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.
-edit-
25 Comments
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.
Sorry no code in comment. Here is the html code – http://html.pastebin.com/m26c1b525
I’m not sure understand but I think you want something like $(“#Demos>div”).tsort(“span”);
I just updated scripts and I have been getting an error in IE “Line 68: Error – ‘(‘ expected” do you get that error as well?
Ah… I hadn’t checked IE yet. Must be the forbidden ‘for each (.. in ..)’ loop. I’ll fix it tomorrow.
Did you get a chance to fix the error?
Fixed as version 0.2
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');
Are you trying to sort by the input elements value? In that case try this:
$(’#tdetail tr:has(td)’).tsort(’input.py’,{attr:”value”});
Nice utility. I was able to combine it with Flexigrid to get client-side sorting (which Flexigrid doesn’t do). Works nicely.
awesome little thing. thanks a lot.
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?
I hadn’t noticed yet… will look into it when I find time
Any chance support for dates and currency will be added? Or is there a workaround in place already that I’m missing?
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>.
Is there a particular way of sorting in reverse order?
Of course! Parse the property ‘order’ with the values ‘asc’, ‘desc’ or ‘rand’. Like so: $(“ul#people>li”).tsort(“img”,{order:”desc”});
This has helped me with my current project thanks alot for sharing the reverse order is great!
Love this plugin. I have one suggestion, which I have added to your code for my own purposes. Just like there is option to sort by attr, also add option to sort by data, as in $(object).data(key). I have a table with 2-3 thousand rows. Sorting is much faster if I sort the rows based data associated with the row, versus attribute of a cell within the row. I use my modified verion of your code like this: $(#table tr:gt(0)).tsort(data:column1); I added data: to the defaults, and replaced mElm.text() with (oSettings.data==?mElm.text():mElm.attr(oSettings.data)). Works like a charm.
’input.py’,{attr:”value”} saved my bacon! Great little plugin!
now on to calling one plugin in an external js file, from another plugin in an external js file, so after I sort, I can reset the slider calling the movingBoxes() method….
cheers!
I do have difficulties to sort numbers properly:
100
11
1000
.. gets sorted:
100
1000
11
code:
$(‘div.search-results > div > span’).tsort();
or
$(‘div.search-results > div’).tsort(‘span’);
or
$(‘div.search-results > div span’).tsort();
regards, ns
Yeah sorting numbers correctly is a know issue… slightly related to the mixed literal/numeral issue. You could fix this by using your own sortFunction (and parseInt your values).
Excellent! I’m using tinysort 1.1.1 to sort some tables in Surreal.
We do this:
$(‘#statsDevices>tbody>tr’).tsort(‘td:eq(1)’,{
order:”desc”,
attr:”data-percentage”
});
This utilizes the html5 data- attributes.
Hello,
I would like to know Tinysort 1.3.27 with examples don’t work.I hasn’t tried it on it’s own ,actually i opened index.html and there was no links to sort, only text.
I just downloaded and ran it from a local directory on my phone and it works fine (the css does’t but the examples do). What are you running?