jQuery tablesorter, работающий с tablesorterPager и скрытыми строками

Question

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

Я попытался удалить «скрытый» класс из строк таблицы, и он ограничивает результаты, но не создает элементы управления разбиением на страницы, и если вы попытаетесь отсортировать, результаты исчезнут, и скрипт умрет.

$('table').tablesorter({
    widthFixed:true,
    widgets: ['zebra']}
).tablesorterPager({
    container: $("#pager")
});

Это код, который вызывается в готовом документе.

В любой момент времени, вот несколько примеров строк данных (предварительная таблица):

<tr class="place hidden">
    <td class="name">Sample Row 1</td>
    <td>100</td>
    <td>12</td>
    <td>1</td>
    <td>1</td>
    <td>0</td>
</tr>
<tr class="place">
    <td class="name">Sample Row 2</td>
    <td>100</td>
    <td>12</td>
    <td>1</td>
    <td>1</td>
    <td>0</td>
</tr>
<tr class="place hidden">
    <td class="name">Sample Row 3</td>
    <td>100</td>
    <td>12</td>
    <td>1</td>
    <td>1</td>
    <td>0</td>
</tr>

Answer 1

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

  <div id="pager" class="pager">
<form>
  <img src="javascript/jqPlugins/tablesorter/addons/pager/icons/first.png" class="first"/>
  <img src="javascript/jqPlugins/tablesorter/addons/pager/icons/prev.png" class="prev"/>
  <input type="text" class="pagedisplay"/>
  <img src="javascript/jqPlugins/tablesorter/addons/pager/icons/next.png" class="next"/>
  <img src="javascript/jqPlugins/tablesorter/addons/pager/icons/last.png" class="last"/>
  <select class="pagesize">
    <option selected="selected"  value="10">10</option>
    <option value="20">20</option>
    <option value="30">30</option>
    <option  value="40">40</option>
  </select>
</form>

Также обратите внимание, что загруженный zip-файл не содержал никаких файлов изображений, так как «значки»папка отсутствует.Также раздражает тот факт, что zip содержит папки svn repo.Таким образом, вы должны добавить эту папку 'icons' и файлы изображений внутри.Вы можете скачать файлы изображений со страницы примера таблиц для пейджера.Я также должен был установить свой путь непосредственно к изображениям (обратите внимание, в моем примере кода я это делаю).Удачи!

Answer 2

            this.construct = function(settings) {

            return this.each(function() {   

                config = $.extend(this.config, $.tablesorterPager.defaults, settings);

                var table = this, pager = config.container;

                $(this).trigger("appendCache");

                config.size = parseInt($(".pagesize",pager).val());

                $(config.cssFirst,pager).click(function() {
                    moveToFirstPage(table);
                    return false;
                });
                $(config.cssNext,pager).click(function() {
                    moveToNextPage(table);
                    return false;
                });
                $(config.cssPrev,pager).click(function() {
                    moveToPrevPage(table);
                    return false;
                });
                $(config.cssLast,pager).click(function() {
                    moveToLastPage(table);
                    return false;
                });
                $(config.cssPageSize,pager).change(function() {
                    setPageSize(table,parseInt($(this).val()));
                    return false;
                });

Это конструктор для плагина tableSorter Pager. Как вы можете видеть, он привязывает функции щелчка к элементам на основе конфигурации (cssFirst, cssNext, cssPrev, cssLast). К сожалению, это означает, что эти элементы уже должны существовать в контейнере, определенном как «config.container». Это, похоже, не документировано нигде на сайте плагина пейджера. Но вы должны определить (в html или javascript перед вызовом функции пейджера) элементы со следующими классами по умолчанию:

            cssNext: '.next',
            cssPrev: '.prev',
            cssFirst: '.first',
            cssLast: '.last',

Я не уверен, как сортировщик таблиц будет взаимодействовать с вашими скрытыми строками, вам может потребоваться внести некоторые изменения в базовую функциональность tableSorter, чтобы получить поведение, которое вы ищете.

/ Chris