There is such a table:

<tbody class="ui-sortable"> <tr data-item="id"> <td> <span data-name="sort" data-value="34" class="dragger ui-sortable-handle"></span> </td> <td> <input type="text" name="name" value=""> </td> </tr> <tr data-item="id"> <td> <span data-name="sort" data-value="36" class="dragger ui-sortable-handle"></span> </td> <td> <input type="text" name="name" value=""> </td> </tr> <tr data-item="id"> <td> <span data-name="sort" data-value="33" class="dragger ui-sortable-handle"></span> </td> <td> <input type="text" name="name" value=""> </td> </tr> <tr data-item="id"> <td> <span data-name="sort" data-value="35" class="dragger ui-sortable-handle"></span> </td> <td> <input type="text" name="name" value=""> </td> </tr> </tbody>

It is necessary to sort the rows in descending order according to the data-value attribute that the span has with the data-name attribute that is inside the row, in the first cell.

How to do it?

ps Plugins and so on. ready solutions are not interesting

  • Are you using a Sortable Widget plugin? - Grundy
  • Sorry, I forgot to clarify what exactly my hands, without third-party plug - ins - sanu0074
  • I looked at something, it turns out jQuery could also be used :) - Grundy

3 answers 3

Since jQuery returns a collection of elements, you can sort it right away, and then simply insert the sorted lines back into the container.

 $('.ui-sortable tr').sort(function(a, b) { // сортируем return +$(b).find('[data-name=sort]').attr('data-value') - +$(a).find('[data-name=sort]').attr('data-value'); }) .appendTo('.ui-sortable');// возвращаем в контейнер 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tbody class="ui-sortable"> <tr data-item="id"> <td> <span data-name="sort" data-value="34" class="dragger ui-sortable-handle">34</span> </td> <td> <input type="text" name="name" value=""> </td> </tr> <tr data-item="id"> <td> <span data-name="sort" data-value="36" class="dragger ui-sortable-handle">36</span> </td> <td> <input type="text" name="name" value=""> </td> </tr> <tr data-item="id"> <td> <span data-name="sort" data-value="33" class="dragger ui-sortable-handle">33</span> </td> <td> <input type="text" name="name" value=""> </td> </tr> <tr data-item="id"> <td> <span data-name="sort" data-value="35" class="dragger ui-sortable-handle">35</span> </td> <td> <input type="text" name="name" value=""> </td> </tr> </tbody> </table>

    You can use the free tablesorter plugin
    Documentation with examples: http://tablesorter.com/docs/
    Download link http://tablesorter.com/__jquery.tablesorter.zip

    • Sorry, I forgot to clarify what exactly my hands, without third-party plug - ins - sanu0074

    Gash like this:

     var sorting = [], sortNumber = function(a, b){return b - a}; listPropertiesTable.find('[data-name="sort"]').each(function(){ sorting.push(Number($(this).data('value'))); }); sorting = sorting.sort(sortNumber); for(var i in sorting){ listPropertiesTable.find('[data-name="sort"][data-value="'+sorting[i]+'"]') .closest('tr') .appendTo('table > tbody'); }

    It looks awful, but it works as it should. If there is a more productive way, always happy to comment)