Сортировать строки таблицы с jQuery

Question

В моей таблице есть номер с номером. Я хочу отсортировать по этому номеру с jQuery и попробовал этот код ниже.

<table>
  <tr>
            <td><input class="itemnumber" name="explodenumber[]" value="1"></td>
            <td><input class="explodeinput" value="1465" disabled=""><input type="hidden" name="exproductid[]" value="1465"></td>
            <td><input class="explodeinput" value="Remy Martin XO" disabled=""></td>
            <td><div class="deleteexplode">verwijderen</div></td>
        </tr>

  <tr>
            <td><input class="itemnumber" name="explodenumber[]" value="2"></td>
            <td><input class="explodeinput" value="145" disabled=""><input type="hidden" name="exproductid[]" value="145"></td>
            <td><input class="explodeinput" value="Wine" disabled=""></td>
            <td><div class="deleteexplode">verwijderen</div></td>
        </tr>
</table>




$('table').sort(function(a,b) {
  var data = $('.itemnumber').val();
     return $(a)data > $(b)data;
}).appendTo('table');

Answer 1

Вы собираетесь сортировать элементы, а не массив или объекты. Поэтому вам нужно манипулировать элементами на основе сортировки. Сортировка двух вариантов:

A) При сортировке манипулировать элементами во время сортировки

B) Преобразовать данные таблицы в объект, отсортировать объект, заново нарисовать таблицу.

Рассмотрим следующее (пример B).

$(function() {
  $.fn.tableSort = function() {
    var c = $(this).index();
    var body = $(this).closest("tbody");
    var data = [];
    $("tr", body).each(function(i, r) {
      data.push($(r).clone());
    });
    data = data.sort(function(a, b) {
      var result = 0;
      // Asc Sort (1, 2, 3...)
      if ($("td:eq(" + c + ") > input", a).val() < $("td:eq(" + c + ") > input", b).val()) {
        return -1;
      }
      if ($("td:eq(" + c + ") > input", b).val() < $("td:eq(" + c + ") > input", a).val()) {
        return 1;
      }
      return 0;
    });
    body.html("");
    $.each(data, function(i, r) {
      body.append(r);
    });
  }

  $(".itemnumber").change(function() {
    $(this).tableSort();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
  </thead>
  <tbody>
    <tr>
      <td><input class="itemnumber" name="explodenumber[]" value="1"></td>
      <td><input class="explodeinput" value="1465" disabled=""><input type="hidden" name="exproductid[]" value="1465"></td>
      <td><input class="explodeinput" value="Remy Martin XO" disabled=""></td>
      <td>
        <div class="deleteexplode">verwijderen</div>
      </td>
    </tr>
    <tr>
      <td><input class="itemnumber" name="explodenumber[]" value="3"></td>
      <td><input class="explodeinput" value="145" disabled=""><input type="hidden" name="exproductid[]" value="145"></td>
      <td><input class="explodeinput" value="Wine" disabled=""></td>
      <td>
        <div class="deleteexplode">verwijderen</div>
      </td>
    </tr>
    <tr>
      <td><input class="itemnumber" name="explodenumber[]" value="2"></td>
      <td><input class="explodeinput" value="123" disabled=""><input type="hidden" name="exproductid[]" value="123"></td>
      <td><input class="explodeinput" value="Absente" disabled=""></td>
      <td>
        <div class="deleteexplode">verwijderen</div>
      </td>
    </tr>
  </tbody>
</table>