Исключить столбец из сортировки с помощью JQuery TableSorter - PullRequest
Новая
       16

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

16 голосов
/ 13 января 2009

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

Например: 

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

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

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

Спасибо.

Ответы [ 8 ]

30 голосов
/ 17 октября 2012

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

$("table").tablesorter({
    headers: {4: {sorter: false}}
});
18 голосов
/ 13 января 2009

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

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

});
4 голосов
/ 13 января 2009

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

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

<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 вы можете увидеть, как расположить столбцы с номерами строк в любом месте, а не только в первом столбце.

3 голосов
/ 15 ноября 2016 
$("table").tablesorter({
    headers: {4: {sorter: false},8: {sorter: false}}
});
3 голосов
/ 06 марта 2014

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

<script>
$(document).ready(function() { 
    $("table").tablesorter({
        headers: {
            0: {sorter: false},
            1: {sorter: true},
            3: {sorter: false}
        }//headers
    }); 
});            
</script>
2 голосов
/ 25 октября 2016

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

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

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

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

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

0 голосов
/ 13 января 2009

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

...