Сортировка столбцов таблицы с помощью jQuery Table Sorter

Мне было интересно, есть ли способ сортировать столбцы с помощью сортировщика таблиц,
чтобы я мог расположить сами столбцы в соответствии с каким-то идентификатором или чем-то еще.
альтернативный текст

Так вот, например, если я хочу отсортировать таблицу так, чтобы столбец Apple
был первым, как мне это сделать?


person Asaf    schedule 27.06.2010    source источник
comment
Table Sorter не имеет этого встроенного, вы привязаны к этому плагину? Есть и другие, которые будут делать это по своей сути, хотя я не могу придумать такие легкие.   -  person Nick Craver    schedule 27.06.2010


Ответы (4)


Демонстрация: http://jsfiddle.net/fKMqD/

Код:

var rows = $('tr');

rows.eq(0).find('td').sort(function(a, b){

    return $.text([a]) > $.text([b]) ? 1: -1;

}).each(function(newIndex){

    var originalIndex = $(this).index();

    rows.each(function(){
        var td = $(this).find('td');
        if (originalIndex !== newIndex)
            td.eq(originalIndex).insertAfter(td.eq(newIndex));
    });

});

Плагины не нужны.

person James    schedule 27.06.2010

Существует плагин для jquery под названием datatable, он очень прост в использовании, как и большинство плагинов, и делает все, что вы хотите, на лету без дополнительной работы.

http://www.datatables.net/

проверить это.

person zccool4718    schedule 02.09.2010

Возможно, это могло бы помочь:

http://james.padolsey.com/javascript/sorting-elements-with-jquery/

person Mark    schedule 28.06.2010

у меня так работает

<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("jquery", "1");
    </script>
    <script>
      $(function() {
        // Figure out the new column order.
        var isWas = {};
        $("tr").eq(0).find("td").each(function(index) {
          $(this).attr("was", index);
        }).sort(function(left, right) {
          // Change this line to change how you sort.
          return $(left).text() > $(right).text() ? 1 : -1;
        }).each(function(index) {
          isWas[index] = $(this).attr("was");
        });

        // Reorder the columns in every row.
        $("tr").each(function() {
          var tr = $(this);
          var tds = tr.find("td");
          var newOrder = [];
          for (var is = 0; is < tds.length; is++) {
            newOrder.push(tds.eq(isWas[is]));
          }
          for (var is = 0; is < tds.length; is++) {
            tr.append(newOrder[is]);
          }
        });
      });
    </script>
  </head>
  <body>
    <table>
      <tr><td>Potato</td><td>Tomato</td><td>Apple</td></tr>
      <tr><td>20g</td><td>10gr</td><td>40gr</td></tr>
    </table>
  </body>
</html>
person Dave Aaron Smith    schedule 03.09.2010