Исключить столбец из сортировки с помощью jQuery tablesorter

Я ищу способ исключить один столбец из сортировки с помощью плагина tablesorter jQuery. В частности, у меня есть довольно большая таблица и я хотел бы сохранить столбец" номер строки " фиксированным, чтобы после сортировки было легко увидеть, какая позиция в таблице является конкретной строкой.

например:

#    name
-----------
1    papaya
2    apple
3    strawberry
4    banana

при сортировке по столбцу name должно получиться:

#    name
-----------
1    apple
2    banana
3    papaya
4    strawberry

спасибо.

16
jquery tablesorter

8 ответов

вот виджет, который вы можете использовать, который выполнит то, что вы ищете:

$(function() {
    // add new widget called indexFirstColumn
    $.tablesorter.addWidget({
        // give the widget a id
        id: "indexFirstColumn",
        // format is called when the on init and when a sorting has finished
        format: function(table) {               
            // loop all tr elements and set the value for the first column  
            for(var i=0; i < table.tBodies[0].rows.length; i++) {
                $("tbody tr:eq(" + i + ") td:first",table).html(i+1);
            }                                   
        }
    });

    $("table").tablesorter({
        widgets: ['zebra','indexFirstColumn']
    });

});
18

для тех, кто находит это, ища способ исключить столбец из сортировки (т. е. кликабельный заголовок столбца), приведенный ниже пример исключает столбец 4 (с нулевым индексом) из сортировки):

$("table").tablesorter({
    headers: {4: {sorter: false}}
});
30

Edit: я сделал образец этой техники в http://jsbin.com/igupu4/3. Щелкните любой заголовок столбца для сортировки...

хотя у меня нет ответа на ваш вопрос о jquery, вот альтернативный способ получить конкретное поведение, которое вы описали здесь, фиксированные номера строк после сортировки. (Используя CSS, в частности свойства содержимого и счетчик связанных свойств/функций.)

<html>
<head>
  <title>test</title>
  <style type="text/css">
    tbody tr 
    {
      counter-increment : rownum ; 
    }
    tbody 
    { 
      counter-reset: rownum; 
    }
    table#sample1 td:first-child:before 
    { 
      content: counter(rownum) " " ; 
    }
    table#sample2 td.rownums:before 
    { 
      content: counter(rownum) ; 
    }
  </style>
  <script src="jquery-1.2.6.min.js" ></script>
  <script src="jquery.tablesorter.min.js" ></script>
  <script>
    $(document).ready(function() 
      { 
        $("table").tablesorter(); 
      } 
    ); 
  </script>
</head>

<body>
  <table id="sample1">
    <thead>
      <tr>
        <th>Col 1</th>
        <th>Col 2</th>
    </thead>
    <tbody>
      <tr>
        <td>
          <p>foo</p>
        </td>
        <td>
          <p>quuz</p>
        </td>
      </tr>

      <tr>
        <td>bar</td>
        <td>quux</td>
      </tr>

      <tr>
        <td>baz</td>
        <td>baz</td>
      </tr>
    </tbody>
  </table>

  <table id="sample2">
    <thead>
      <tr>
        <th>Rownums</th>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>More Rownums</th>
    </thead>
    <tbody>
      <tr>
        <td class="rownums"></td>
        <td>
          <p>foo</p>
        </td>
        <td>
          <p>bar</p>
        </td>
        <td class="rownums"></td>
      </tr>

      <tr>
        <td class="rownums"></td>
        <td>quuz</td>
        <td>baz</td>
        <td class="rownums"></td>
      </tr>

      <tr>
        <td class="rownums"></td>
        <td>fred</td>
        <td>quux</td>
        <td class="rownums"></td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Если ваш браузер достаточно CSS2.1 совместимый, вы можете использовать tr: before вместо td:first-child: before в образце 1. (Mozilla поддерживает это только в багажнике...)

в Примере 2 Вы можете увидеть, как расположить столбцы номеров строк в любом месте, а не только в первом столбце.

4

Это позволит пропустить сортировку для первого столбца и разрешить ее для второго. Установите значение true/false для всех столбцов, начиная с первого столбца равными нулю.

<script>
$(document).ready(function() { 
    $("table").tablesorter({
        headers: {
            0: {sorter: false},
            1: {sorter: true},
            3: {sorter: false}
        }//headers
    }); 
});            
</script>
3
$("table").tablesorter({
    headers: {4: {sorter: false},8: {sorter: false}}
});
3

ответ Брайана Фишера верен, но он слишком медленный в больших таблицах (+1600 строк в моем примере). Я улучшил способ перебора всех строк. Все остальное то же самое.

$(function() {
    // add new widget called indexFirstColumn
    $.tablesorter.addWidget({
        // give the widget a id
        id: "indexFirstColumn",
        // format is called when the on init and when a sorting has finished
        format: function(table) {               
            // loop all tr elements and set the value for the first column  
            $(table).find("tr td:first-child").each(function(index){
                $(this).text(index+1);
            })                                  
        }
    });

    $("table").tablesorter({
        widgets: ['zebra','indexFirstColumn']
    });
});
2

Hrm. От метода tablesorter по реорганизации, я уверен, что это не совсем возможно. Tablesorter извлекает каждый tr из DOM один за другим и сортирует их на основе индексированного поля, повторно вставляя весь tr без какого-либо изменения содержимого tr. Затем запрошенное решение необходимо будет выполнить итерацию по таблице после каждой сортировки и повторно перечислить первый столбец. Tablesorter имеет метод плагина, который используется zebrastripe и другими увеличение. Возможно, это можно было бы использовать для крючка методов сортировки?

0

ответ Стобора совершенен. Единственная проблема заключается в том, что нужно подождать, пока таблица не будет полностью отображена, чтобы поместить числа.

некоторые замечания:

  • вам нужно дать пустой столбец для этого метода положить числа.
  • если у вас есть заголовки в таблице, вы должны использовать теги THEAD и TBODY, чтобы позволить tablesorter сортировать только данные в разделе TBODY.
  • если у вас есть нижний колонтитул в ваших таблицах, вы должны выпустить это из раздела TBODY, чтобы избежать tablesorter для сортировки его содержимого, также вы должны использовать теги TH вместо TD, чтобы избежать нумерации нижнего колонтитула.

Примечание.: Метод, показанный Абдулом, ограничивает пользователя только сортировкой по указанным столбцам, но его содержимое всегда упорядочивается с остальной частью строки при выборе порядка по другому неограниченному столбцу.

0