I have come across the need to update a ui view of tabular content to be sorted by numeric order ascending. Javascript has a sort() that can be used for this purpose. I will use jquery for its powerful and easy selection capabilities.
Here is a sample of the tablular data:
| Sequence | Filename | Description | Enabled | Delete |
|---|---|---|---|---|
| 0 | sliders/test.jpg | Its a slider | True | X |
| 1 | sliders/test2.jpg | Its another slider! | True | X |
| 2 | my file location | my file description | True | X |
When the user changes the sequence, I would like to update the ui view to reflect the changes in the display order.
I have given each row of the table that contains sortable data a class of “sort”
Then I use Jquery to select those rows, and sort them by the number in the sequence column.
function sortthetable(whattable){ var $tbody = $('#'+whattable); $tbody.find('tr.sort').sort(function(a,b){ var tda = $(a).find('td:eq(0)').text(); // can replace 0 with the column you want to sort on var tdb = $(b).find('td:eq(0)').text(); // this will sort on the firstcolumn // if a < b return 1 return tda > tdb ? 1 // else if a > b return -1 : tda < tdb ? -1 // else they are equal - return 0 : 0; }).appendTo($tbody); }