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

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

Например:

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

При сортировке по столбцу имени следует:

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

Спасибо.

Ответ 1

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

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

});

Ответ 2

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

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

Ответ 3

Изменить: я сделал образец этой техники в 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 только поддерживает это в trunk на данный момент...)

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

Ответ 4

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

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

Ответ 5

Ответ Брайана Фишера правильный, но он слишком медленный в больших таблицах (+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']
    });
});

Ответ 6

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

Ответ 7

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

Ответ 8

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

Некоторые наблюдения:

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

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