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-

Go to http://tinysort.sjeiti.com/


comments

  1. Setj

    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.

  2. Setj

    Sorry no code in comment. Here is the html code – http://html.pastebin.com/m26c1b525

  3. Sjeiti

    I’m not sure understand but I think you want something like $(“#Demos>div”).tsort(“span”);

  4. Seth

    I just updated scripts and I have been getting an error in IE “Line 68: Error – ‘(‘ expected” do you get that error as well?

  5. Sjeiti

    Ah… I hadn’t checked IE yet. Must be the forbidden ‘for each (.. in ..)’ loop. I’ll fix it tomorrow.

  6. Seth

    Did you get a chance to fix the error?

  7. Sjeiti

    Fixed as version 0.2

  8. adwin

    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’);

  9. Sjeiti

    Are you trying to sort by the input elements value? In that case try this:
    $(’#tdetail tr:has(td)’).tsort(’input.py’,{attr:”value”});

  10. Mark

    Nice utility. I was able to combine it with Flexigrid to get client-side sorting (which Flexigrid doesn’t do). Works nicely.

  11. egor

    awesome little thing. thanks a lot.

  12. Ariel

    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?

    1. Sjeiti

      I hadn’t noticed yet… will look into it when I find time

  13. mike

    Any chance support for dates and currency will be added? Or is there a workaround in place already that I’m missing?

    1. Sjeiti

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

  14. SEO Manchester

    Is there a particular way of sorting in reverse order?

    1. Sjeiti

      Of course! Parse the property ‘order’ with the values ‘asc’, ‘desc’ or ‘rand’. Like so: $(“ul#people>li”).tsort(“img”,{order:”desc”});

  15. manc seo

    This has helped me with my current project thanks alot for sharing the reverse order is great!

  16. cameron

    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.

  17. Bo Huttinger

    ’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!

  18. niels

    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

    1. Sjeiti

      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).

  19. Eric Warnke

    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.

  20. Nikita

    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.

    1. Sjeiti

      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?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>