I was doing some jquery (javascript) today and created a sorting function for html nodes. I tried to find a jquery function or plugin that could do it but I couldn’t find it.
I’ve been using jquery for a year or so, and since it’s just a lazy sunday afternoon out here, I thought I’d turn this snippet into a plugin. It’s a nice and small for for a first plugin.
You can download TinySort from http://plugins.jquery.com/project/TinySort, examples and explanations are here.
comments
Setj: 10/06/2008 17:32
Nifty plugin. Anyway to sort this example -
Demo 1225.00
Demo 2425.00
Demo 3125.00
Where the entire parent div of the span is sorted within the Demos div. So if sorted it should display like this…
Demo 3
125
Demo 1
225
Demo 2
425
Thanks.
Setj: 10/06/2008 17:34
Sorry no code in comment. Here is the html code – http://html.pastebin.com/m26c1b525
Sjeiti: 10/06/2008 17:51
I’m not sure understand but I think you want something like $(“#Demos>div”).tsort(“span”);
Seth: 18/06/2008 22:18
I just updated scripts and I have been getting an error in IE “Line 68: Error – ‘(‘ expected” do you get that error as well?
Sjeiti: 18/06/2008 23:37
Ah… I hadn’t checked IE yet. Must be the forbidden ‘for each (.. in ..)’ loop. I’ll fix it tomorrow.
Seth: 19/06/2008 16:16
Did you get a chance to fix the error?
Sjeiti: 20/06/2008 14:05
Fixed as version 0.2
adwin: 18/07/2008 05:35
Hi .. nice to know your plugins at the time I need it the most…
i have a table where each tr’s element has unique ID and each element inside the tr has input text that has unique id but same name.
[/code]
<table id='myt'>
<tbody id='tdetail'>
<tr id='tr_1'>
<td> <input type='text' id=py_1 class=py name=py[]/> </td>
<td> something else in here </td>
</tr>
<tr id='tr_2'>
<td> <input type='text' id=py_2 class=py name=py[]/> </td>
<td> something else in here 2</td>
</tr>
</tbody>
</table>
[code]
I dont know how to sort it ...
i use this but i has no effect at all ...
$('#tdetail tr:has(td)').tsort('input.py');
Sjeiti: 27/07/2008 23:48
Are you trying to sort by the input elements value? In that case try this:
$(’#tdetail tr:has(td)’).tsort(’input.py’,{attr:”value”});
Mark: 30/07/2008 22:34
Nice utility. I was able to combine it with Flexigrid to get client-side sorting (which Flexigrid doesn’t do). Works nicely.
egor: 05/12/2008 13:54
awesome little thing. thanks a lot.
Ariel: 22/10/2009 13:24
first thing, thank you very mutch, the sort spared me plenty of sofisticated server work.
One weird thing i found, can it be posible that the sort has some sort of a problem with the tag , becuse a have an error only in IE and only when i have that tag?
Sjeiti: 17/12/2009 16:09
I hadn’t noticed yet… will look into it when I find time
mike: 15/04/2010 18:37
Any chance support for dates and currency will be added? Or is there a workaround in place already that I’m missing?
SEO Manchester: 17/08/2010 14:56
Is there a particular way of sorting in reverse order?
Sjeiti: 02/09/2010 08:15
Of course! Parse the property ‘order’ with the values ‘asc’, ‘desc’ or ‘rand’. Like so: $(“ul#people>li”).tsort(“img”,{order:”desc”});
Sjeiti: 02/09/2010 08:29
Dates are usually stored as unix timestamp. So the easiest thing to do is add that as the value: <li value=”1234567890″>Fri, 13 Feb 2009 23:31:30 GMT</li>. If you don’t have acces to the timestamp you’ll have to convert it yourself. Since date notations are quite numerous converting it to timestamp would be a whole new plugin (I do want to keep this one tiny).
For currency you can do the same: <li value=”3.14″>€ 3,14</li>.
Leave a comment: