2

Есть такая таблица:

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

Нужно отсортировать строки по убыванию по атрибуту data-value который есть у span'a с атрибутом data-name который находится внутри строки, в первой ячейке.

Как это сделать?

p.s. Плагины и проч. готовые решения - не интересны

3
  • вы используете плагин Sortable Widget?
    – Grundy
    18 янв 2016 в 14:07
  • извините, забыл уточнить что именно руками, без сторонних плагинов
    – sanu
    18 янв 2016 в 15:21
  • что-то я просмотрел, оказывается jQuery тоже можно было использовать :)
    – Grundy
    18 янв 2016 в 18:13

3 ответа 3

4

Так как jQuery возвращает коллекцию элементов, то сортировать можно сразу ее, а потом просто вставить отсортированные строки обратно в контейнер.

$('.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>

2

Можно использовать бесплатный плагин tablesorter
Документация с примерами: http://tablesorter.com/docs/
Ссылка на скачивание http://tablesorter.com/__jquery.tablesorter.zip

1
  • извините, забыл уточнить что именно руками, без сторонних плагинов
    – sanu
    18 янв 2016 в 15:21
1

Запилил так:

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');
}

Выглядит ужасно, но работает так как необходимо. Если есть способ более продуктивный, всегда рад комментариям)

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.