Jump to content

[SOLVED] Sortable Javascript Table not sorting. :(

[-_-]

By [-_-]
in Javascript Help

Recommended Posts

[-_-] Member

[-_-]

Posted
Posted

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>

phpQuestioner Regular Member

phpQuestioner

Posted
Posted

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.

[-_-] Member

[-_-]

Posted
  • Author
Posted

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.

phpQuestioner Regular Member

phpQuestioner

Posted
Posted

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.

 

<img id="10" src="10.jpg">

<img id="9" src="9.jpg">

<img id="8" src="8.jpg">

 

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

 

you should get the numbers in order that way

[-_-] Member

[-_-]

Posted
  • Author
Posted

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. ;D

phpQuestioner Regular Member

phpQuestioner

Posted
Posted

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.

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.