[SOLVED] Sortable Javascript Table not sorting. :(

[-_-] · December 8, 2007

Hi I'm trying to get my table to sort properly but the images I'm trying to sort wont stay together. Any ideas on how I can fix this? Thanks for any help.

Hers what I'm working on http://www.plentyoftorrents.com/010/index.php

You just click the title on each category and it sorts them.

Heres the Javascript http://www.webtoolkit.info/sortable-html-table.html

Heres the html

<table cellspacing="1" cellpadding="2" class="" id="myTable" width="670">


    <thead>


        <tr>


            <th class="c1">Site</th>


            <th class="c2">Language</th>


            <th class="c3">Rating</th>


					<th class="c4">Status</th>


					<th class="c5">Category</th>


        </tr>


    </thead>





    <tbody>


        <tr class="r1">


            <td class="c1"><a href="http://Bitenova.nl">Bitenova.nl</a></th>


            <td class="c2">EN</th>


            <td class="c3"><img src="tableimg/sr10.png" alt="tableimg/sr10.png"></th>


					<td class="c4">Public Tracker</th>


					<td class="c5"><a href="/General">General</a></th>


        </tr>


        <tr class="r2">


            <td class="c1"><a href="http://Btjunkie.org">Btjunkie.org</a></th>


            <td class="c2">EN</th>


            <td class="c3"><img src="tableimg/sr9.png" alt="tableimg/sr9.png"></th>


					<td class="c4">Public Tracker</th>


					<td class="c5"><a href="/General">General</a></th>


        </tr>


        <tr class="r3">


            <td class="c1"><a href="http://Demonoid.com">Demonoid.com</a></th>


            <td class="c2">EN</th>


            <td class="c3"><img src="tableimg/sr9.png" alt="tableimg/sr9.png"></th>


           <td class="c4">Private Tracker</th>                                     


					<td class="c5"><a href="/General">General</a></th>


        </tr>


        <tr class="r4">


            <td class="c1"><a href="http://Fenopy.com">Fenopy.com</a></th>


            <td class="c2">EN</th>


            <td class="c3"><img src="tableimg/sr9.png" alt="tableimg/sr9.png"></th>


					<td class="c4">Public Tracker</th>


					<td class="c5"><a href="/General">General</a></th>


        </tr>


        <tr class="r5">


            <td class="c1"><a href="http://Isohunt.com">Isohunt.com</a></th> 


					<td class="c2">EN</th>


            <td class="c3"><img src="tableimg/sr8.png" alt="tableimg/sr8.png"></th>


					<td class="c4">Public Tracker</th>


					<td class="c5"><a href="/General">General</a></th>


        </tr>


        <tr class="r6">


            <td class="c1"><a href="http://Mininova.org">Mininova.org</a></th>


            <td class="c2">EN</th>


            <td class="c3"><img src="tableimg/sr8.png" alt="tableimg/sr8.png"></th>


					<td class="c4">Public Tracker</th>


					<td class="c5"><a href="/General">General</a></th>


        </tr>


        <tr class="r7">


            <td class="c1"><a href="http://Torrentspy.com">Torrentspy.com</a></th>


            <td class="c2">EN</th>


            <td class="c3"><img src="tableimg/sr10.png" alt="tableimg/sr10.png"></th>


					<td class="c4">Public Tracker</th>


					<td class="c5"><a href="/General">General</a></th>


        </tr>


        <tr class="r8">


            <td class="c1"><a href="http://ThePirateBay.org">ThePirateBay.org</a></th>


            <td class="c2">EN</th>


            <td class="c3"><img src="tableimg/sr9.png" alt="tableimg/sr9.png"></th>


					<td class="c4">Public Tracker</th>


					<td class="c5"><a href="/General">General</a></th>

					</tr>

					  <tr class="r9">


            <td class="c1"><a href="http://www.boxtorrents.com">Boxtorrents.com</a></th>


            <td class="c2">EN</th>


            <td class="c3"><img src="tableimg/sr10.png" alt="tableimg/sr10.png"></th>


					<td class="c4">Public Tracker</th>


					<td class="c5"><a href="/General">Anime</a></th>

        </tr>

          <tr class="r10">


            <td class="c1"><a href="http://www.animelab.com">Animelab.com</a></th>


            <td class="c2">EN</th>


            <td class="c3"><img src="tableimg/sr10.png" alt="tableimg/sr10.png"></th>


					<td class="c4">Public Tracker</th>


					<td class="c5"><a href="/General">Anime</a></th>

        </tr>

			 <tr class="r11">


            <td class="c1"><a href="http://www.hentaishare.com">Hentaishare.com</a></th>


            <td class="c2">ES</th>


            <td class="c3"><img src="tableimg/sr8.png" alt="tableimg/sr8.png"></th>


					<td class="c4">Public Tracker</th>


					<td class="c5"><a href="/General">Anime</a></th>

        </tr>

			<tr class="r12">


            <td class="c1"><a href="http://bt.etree.org">bt.etree.org</a></th>


            <td class="c2">EN</th>


            <td class="c3"><img src="tableimg/sr7.png" alt="tableimg/sr7.png"></th>


					<td class="c4">Public Tracker</th>


					<td class="c5"><a href="/General">Audio</a></th>

        </tr>
			<tr class="r13">


            <td class="c1"><a href="http://kraytracker.com">Kraytracker.com</a></th>


            <td class="c2">EN</th>


            <td class="c3"><img src="tableimg/sr5.png" alt="tableimg/sr5.png"></th>


					<td class="c4">Private Tracker</th>


					<td class="c5"><a href="/General">Audio</a></th>

        </tr>
			<tr class="r14">


            <td class="c1"><a href="http://www.indietorrents.com">Indietorrents.com</a></th>


            <td class="c2">EN</th>


            <td class="c3"><img src="tableimg/sr8.png" alt="tableimg/sr8.png"></th>


					<td class="c4">Private Tracker</th>


					<td class="c5"><a href="/General">Audio</a></th>

        </tr>
			<tr class="r15">


            <td class="c1"><a href="http://www.punktorrents.com">Punktorrents.com</a></th>


            <td class="c2">EN</th>


            <td class="c3"><img src="tableimg/sr8.png" alt="tableimg/sr8.png"></th>


					<td class="c4">Private Tracker</th>


					<td class="c5"><a href="/General">Audio</a></th>

        </tr>

			<tr class="r16">


            <td class="c1"><a href="http://www.bitmetv.org">Bitmetv.org</a></th>


            <td class="c2">EN</th>


            <td class="c3"><img src="tableimg/sr8.png" alt="tableimg/sr8.png"></th>


					<td class="c4">Private Tracker</th>


					<td class="c5"><a href="/General">TV</a></th>

        </tr>

			<tr class="r17">


            <td class="c1"><a href="http://tvtorrents.com">tvtorrents.com</a></th>


            <td class="c2">EN</th>


            <td class="c3"><img src="tableimg/sr8.png" alt="tableimg/sr8.png"></th>


					<td class="c4">Private Tracker</th>


					<td class="c5"><a href="/General">TV</a></th>

        </tr>

			<tr class="r18">


            <td class="c1"><a href="http://xtvi.com">xtvi.com</a></th>


            <td class="c2">EN</th>


            <td class="c3"><img src="tableimg/sr8.png" alt="tableimg/sr8.png"></th>


					<td class="c4">Public Tracker</th>


					<td class="c5"><a href="/General">TV</a></th>

        </tr>

			<tr class="r19">


            <td class="c1"><a href="http://familyguytorrents.com">Familyguytorrents.com</a></th>


            <td class="c2">EN</th>


            <td class="c3"><img src="tableimg/sr8.png" alt="tableimg/sr8.png"></th>


					<td class="c4">Public Tracker</th>


					<td class="c5"><a href="/General">TV</a></th>

        </tr>

				<tr class="r20">


            <td class="c1"><a href="http://underground-gamer.com">underground-gamer.com</a></th>


            <td class="c2">EN</th>


            <td class="c3"><img src="tableimg/sr9.png" alt="tableimg/sr9.png"></th>


					<td class="c4">Private Tracker</th>


					<td class="c5"><a href="/General">Games</a></th>

        </tr>
				<tr class="r21">


            <td class="c1"><a href="http://xbox.udp.at">xbox.udp.at</a></th>


            <td class="c2">EN</th>


            <td class="c3"><img src="tableimg/sr4.png" alt="tableimg/sr4.png"></th>


					<td class="c4">Public Tracker</th>


					<td class="c5"><a href="/General">Games</a></th>

        </tr>
				<tr class="r22">


            <td class="c1"><a href="http://www.gamestorrents.com">Gamestorrents.com</a></th>


            <td class="c2">EN-ES</th>


            <td class="c3"><img src="tableimg/sr5.png" alt="tableimg/sr5.png"></th>


					<td class="c4">Public Tracker</th>


					<td class="c5"><a href="/General">Games</a></th>

        </tr>
				<tr class="r23">


            <td class="c1"><a href="http://www.learnbits.org">Learnbits.org</a></th>


            <td class="c2">EN</th>


            <td class="c3"><img src="tableimg/sr4.png" alt="tableimg/sr4.png"></th>


					<td class="c4">Private Tracker</th>


					<td class="c5"><a href="/General">Other</a></th>

        </tr>
				<tr class="r24">


            <td class="c1"><a href="http://www.xtremewrestlingtorrents.net">Xtremewrestlingtorrents.net</a></th>


            <td class="c2">EN</th>


            <td class="c3"><img src="tableimg/sr3.png" alt="tableimg/sr3.png"></th>


					<td class="c4">Private Tracker</th>


					<td class="c5"><a href="/General">Other</a></th>

        </tr>
				<tr class="r25">


            <td class="c1"><a href="http://www.desitorrents.com/forums">Desitorrents.com</a></th>


            <td class="c2">EN</th>


            <td class="c3"><img src="tableimg/sr5.png" alt="tableimg/sr5.png"></th>


					<td class="c4">Public Tracker</th>


					<td class="c5"><a href="/General">Other</a></th>

        </tr>

			<tr class="r26">


            <td class="c1"><a href="http://dlc.sun.com/torrents/">dlc.sun.com</a></th>


            <td class="c2">EN</th>


            <td class="c3"><img src="tableimg/sr10.png" alt="tableimg/sr10.png"></th>


					<td class="c4">Public Tracker</th>


					<td class="c5"><a href="/General">Software</a></th>

        </tr>

			<tr class="r27">


            <td class="c1"><a href="http://openbsd.somedomain.net">openbsd.somedomain.net</a></th>


            <td class="c2">EN</th>


            <td class="c3"><img src="tableimg/sr10.png" alt="tableimg/sr10.png"></th>


					<td class="c4">Public Tracker</th>


					<td class="c5"><a href="/General">Software</a></th>

        </tr>
			<tr class="r28">


            <td class="c1"><a href="http://www.linuxtracker.org">Linuxtracker.org</a></th>


            <td class="c2">EN</th>


            <td class="c3"><img src="tableimg/sr10.png" alt="tableimg/sr10.png"></th>


					<td class="c4">Public Tracker</th>


					<td class="c5"><a href="/General">Software</a></th>

        </tr>
			<tr class="r29">


            <td class="c1"><a href="http://www.torrentvalley.com">Torrentvalley.com</a></th>


            <td class="c2">EN</th>


            <td class="c3"><img src="tableimg/sr9.png" alt="tableimg/sr9.png"></th>


					<td class="c4">Public Tracker</th>


					<td class="c5"><a href="/General">Software</a></th>

        </tr>








			  
    </tbody>





    <tfoot>


        <tr>


        <th class="c1">Site</th>


            <th class="c2">Language</th>


            <th class="c3">Rating</th>


					<th class="c4">Status</th>


					<th class="c5">Category</th>


        </tr>


    </tfoot>


</table>





<script type="text/javascript">


var t = new SortableTable(document.getElementById('myTable'), 100);


</script>

[-_-] · December 8, 2007

I added numbers before the images and it works, but without the numbers it doesnt recognize them. But having numbers beside the pictures looks ugly. :'(

phpQuestioner · December 8, 2007

this script is for sorting text; not images - the script searches through the text and sorts for A-Z and Z-A. Here is what I would try: if each image represented a number; I would give each image a unique id (either a letter or number or a combination of both) at the first part of the image tag. I think the script searcher the text, left to right - just like we read; so I think in essence this will work.

like so:

<img id="10" src="tableimg/sr10.png" alt="tableimg/sr10.png">

that might do the trick - try that and see if it works.

[-_-] · December 8, 2007

The alt doesnt need to be there for this to work does it? I tried this and I dont think its working. Alot of them wont stick together.

http://www.plentyoftorrents.com/010/index.php

I'll try class with a few of them and see if they stay together when I click the category tab.

[-_-] · December 8, 2007

Nope the class tag didnt work either.

phpQuestioner · December 9, 2007

give each image a unique id and no the alt tag is not needed - it was part of your script; so I left it in there.

and so on............ you get the picture

you should get the numbers in order that way

[-_-] · December 9, 2007

Thanks but it still doesnt sort the health bars some still dont match up. A few full health bars stick together but not all. ???

I stuck it on the main page now.

http://www.plentyoftorrents.com

Better than what was there before.

phpQuestioner · December 9, 2007

you could do what you originally wanted to do; putting numbers by each image - if that worked out - just hide the numbers with css.

[-_-] · December 9, 2007

Okay thanks, I'll look for a css hidden text tutorial and let you know if it works.

phpQuestioner · December 9, 2007

look into changing the text's visibility to hidden - I would suggest using display:none; but I am not sure it would work (maybe it would) - you can try it though - which ever one functions and works out best for you; that's the one I would go with.

[-_-] · December 9, 2007

sweet thanks for your help. I found one and it works great.

I added

<span class="hideFromScreen">10</span>

to the numbers

and

.hideFromScreen {display:none;}

to the css.

Sign In

[SOLVED] Sortable Javascript Table not sorting. :(

Recommended Posts

[-_-]

Link to comment

Share on other sites

[-_-]

Link to comment

Share on other sites

phpQuestioner

Link to comment

Share on other sites

[-_-]

Link to comment

Share on other sites

[-_-]

Link to comment

Share on other sites

phpQuestioner

Link to comment

Share on other sites

[-_-]

Link to comment

Share on other sites

phpQuestioner

Link to comment

Share on other sites

[-_-]

Link to comment

Share on other sites

phpQuestioner

Link to comment

Share on other sites

[-_-]

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information