jquery.tinysort

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/

Posted in code, javascript, jquery

30 Comments

  1. Setj
    Posted 2008/06/10 at 17:32 | Permalink

    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
    Posted 2008/06/10 at 17:34 | Permalink

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

  3. Sjeiti
    Posted 2008/06/10 at 17:51 | Permalink

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

  4. Seth
    Posted 2008/06/18 at 22:18 | Permalink

    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
    Posted 2008/06/18 at 23:37 | Permalink

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

  6. Seth
    Posted 2008/06/19 at 16:16 | Permalink

    Did you get a chance to fix the error?

  7. Sjeiti
    Posted 2008/06/20 at 14:05 | Permalink

    Fixed as version 0.2

  8. adwin
    Posted 2008/07/18 at 05:35 | Permalink

    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
    Posted 2008/07/27 at 23:48 | Permalink

    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
    Posted 2008/07/30 at 22:34 | Permalink

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

  11. egor
    Posted 2008/12/05 at 13:54 | Permalink

    awesome little thing. thanks a lot.

  12. Posted 2009/10/22 at 13:24 | Permalink

    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?

    • Posted 2009/12/17 at 16:09 | Permalink

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

  13. mike
    Posted 2010/04/15 at 18:37 | Permalink

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

    • Posted 2010/09/02 at 08:29 | Permalink

      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. Posted 2010/08/17 at 14:56 | Permalink

    Is there a particular way of sorting in reverse order?

    • Posted 2010/09/02 at 08:15 | Permalink

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

  15. Posted 2010/12/06 at 15:36 | Permalink

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

  16. cameron
    Posted 2011/03/11 at 18:31 | Permalink

    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
    Posted 2011/05/21 at 02:01 | Permalink

    ’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. Posted 2011/11/10 at 21:25 | Permalink

    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

    • Posted 2012/01/30 at 13:03 | Permalink

      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. Posted 2011/12/09 at 17:20 | Permalink

    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
    Posted 2012/04/23 at 21:07 | Permalink

    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.

    • Posted 2012/04/25 at 21:13 | Permalink

      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?

  21. TJung
    Posted 2014/02/21 at 13:54 | Permalink

    Very nice and useful plugin, thank you!
    I’ve got a question: After sorting the elements using tinysort, is there a way to return to the unsorted order, i.e. the order the elements are listed in the source code?

    • Sjeiti
      Posted 2014/02/21 at 18:39 | Permalink

      No, once the order in the DOM is altered there is no way of reverting to the original order. Unless of course you loop through the nodes on beforehand and store them in a separate array.

      • TJung
        Posted 2014/02/22 at 20:09 | Permalink

        Okay, thank you!

        Since the element list is generated via PHP, I guess I’ll simply add another attribute like »data-sort-original=”XYZ”« with XYZ being an incremented number and use this to restore the original order. :-)

        Kind regards,
        Tobias

  22. Kenneth
    Posted 2014/05/22 at 18:03 | Permalink

    Hello! Thanks for this plugin. It has saved me much time. I have a question though. I have a list of N elements where each is using an input text field holding a numeric value from 1 to N. I am sorting on these values.

    If I change a single value and click my “sort” button to apply tinysort, the list is sorted such that the list element with the changed value is placed either after (when moving an item up the list) or before (when moving an item down the list). In other words, an existing list item with the same input value as the element’s whose value is changed always takes precedence.

    For example, if I have a list of 5 items, numbered 1 – 5 and I change the value of #3 to “1″ and click the button, the item with the changed value is placed in position 2 instead of 1.

    Is there a way to force the changed value to take precedence over the existing value?

    I can make it work the way I want by entering a value 1 less than the targeted position if moving an item up or entering a value 1 more than the targeted position if moving an item down. Also, renumbering all values works fine :).

    Note: after the sort is completed, I renumber all inputs to equal their new position in the list.

    I hope I have explained this clear enough. Thanks!!

  23. Sjeiti
    Posted 2014/05/23 at 12:17 | Permalink

    That is a tricky problem. Here is a solution you could use.
    http://jsfiddle.net/Sjeiti/LEkj3/

    It stores the old input-value on the list item. Then when a value changes it looks through the list if there is already a similar one, and changes that (+ or – one depending on the direction) … repeat with the remaining siblings untill ok.

Post a Comment

*
*