Mottie 的 Tablesorter Pager 没有在选项卡上有多个表格的页面上更新 (Bootstrap/Laravel)

Question

我已经成功地在我最新的 Laravel 5.1 视图项目中实现了 Mottie 的 Tablesorter 2.0，其中只有一个 table.

但是，我有一个页面，我在其中使用 Bootstrap CSS 设置了许多选项卡。请注意，我正在使用 Blade 模板引擎为每个选项卡包含部分 PHP，并且我还在单独的部分中设置了寻呼机。这对我只显示页面的一个 table 的所有其他视图都有效。

这是标签声明的代码：

<div class="container-fluid">
    <div id="content">
        <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
            <li class="active"><a href="#datos" data-toggle="tab">Datos</a></li>
            <li><a href="#pasajeros" data-toggle="tab">Pasajeros</a></li>
            <li><a href="#productos" data-toggle="tab">Productos</a></li>
            <li><a href="#add-productos" data-toggle="tab">Añadir productos</a></li>
            <li><a href="#pagos" data-toggle="tab">Pagos</a></li>
            <li><a href="#pagos-realizados" data-toggle="tab">Pagos realizados</a></li>
            <li><a href="#mensajes" data-toggle="tab">Mensajería</a></li>
        </ul>

        <div id="my-tab-content" class="tab-content">

            @include('groups.partials.passengers')
            @include('groups.partials.addproducts')

            { other includes removed for clarity }
        </div>
    </div>
</div>

在每个部分中，我都包含一个 table 排序页面，每个页面中都有一个寻呼机：

<div class="tab-pane" id="add-productos">
<div class="table-responsive" style="width:auto;">
    <table id="products-not-associated-table" class="table table-striped tablesorter">

        @include('partials.pager')

        <thead>
        <tr>
            <th>Descripción</th>
            <th>Precio</th>
            <th>Stock</th>
            <th>Usado</th>
            <th>Proveedor</th>
            <th>Obligatorio</th>
            <th>Asociar al grupo</th>
        </tr>
        </thead>
        <tbody>
        @foreach($products_not_associated as $product_not_associated)
            <tr>
                <td>{{ $product_not_associated->description }}</td>
                <td>{{ $product_not_associated->price }}</td>
                <td>{{ $product_not_associated->stock }}</td>
                <td>{{ $product_not_associated->used_stock }}</td>
                <td>{{ $product_not_associated->provider_id->commercial_name }}</td>
                <td>{{ $product_not_associated->mandatory ? 'Sí' : 'No' }}</td>
                <td class="text-center">
                {{ some other laravel code removed for clarity }}
                </td>
            </tr>
        @endforeach
        </tbody>
    </table>
</div>

所以我的最后一页中有一堆 table，每个里面都有自己的 Tablesorter 寻呼机。但是，当我加载页面时，所有寻呼机都只加载 table 之一的值，这样就可以只在一个选项卡中使用 Tablesorter。

例如，如果它加载的第一个 table 有 6 个元素，另一个可能有 100 多个元素的 table 只会显示前 10 个（10 是每页的默认值) 而且不让我以任何方式使用寻呼机。

这是我的寻呼机代码：

<div class="pager control-group">
<i class="fa fa-fast-backward first"></i>
<i class="fa fa-backward prev"></i>
<span class="pagedisplay"></span>
<i class="fa fa-forward next"></i>
<i class="fa fa-fast-forward last"></i>
&nbsp;
<label for="selected">Por página: </label>
<select class="pagesize" title="Elementos por página">
    <option selected="selected" value="10">10</option>
    <option value="20">20</option>
    <option value="30">30</option>
    <option value="40">40</option>
</select>
&nbsp;
<label for="gotoPage">Ir a página: </label>
<select class="gotoPage" title="Escoja página"></select>

这是我的 javascript 代码，用于以相同的方式对站点中的所有 table 进行排序：

$(document).ready(function () {
    sortTable(".tablesorter");
});

function sortTable(selector, sortList) {
sortListParameter = [
    [0, 1],
    [1, 0],
    [2, 0]
];
if (sortList != null) {
    sortListParameter = sortList;
}
$(selector).tablesorter({
    theme: 'bootstrap',
    widthFixed: false,
    showProcessing: true,
    headerTemplate: '{content} {icon}',
    cancelSelection: true,
    dateFormat: "ddmmyyyy",
    sortMultiSortKey: "shiftKey",
    sortResetKey: 'ctrlKey',
    usNumberFormat: false,
    delayInit: false,
    serverSideSorting: false,
    ignoreCase: true,
    sortForce: null,
    sortList: sortListParameter,
    sortAppend: null,
    sortInitialOrder: "asc",
    sortLocaleCompare: false,
    sortReset: false,
    sortRestart: false,
    emptyTo: "bottom",
    stringTo: "max",
    initWidgets: true,

    widgets: ['columns', 'uitheme', 'filter', 'resizable', 'stickyHeaders'],
    widgetOptions: {
        resizable: true,
        resizable_addLastColumn: true,
        uitheme: 'bootstrap',
        columns_thead: true,
        filter_childRows: false,
        filter_columnFilters: true,
        filter_cssFilter: "tablesorter-filter",
        filter_functions: null,
        filter_hideFilters: false,
        filter_ignoreCase: true,
        filter_reset: null,
        filter_searchDelay: 300,
        filter_serversideFiltering: false,
        filter_startsWith: false,
        filter_useParsedData: false,
        saveSort: false
    },
    initialized: function (table) {
    },
    selectorHeaders: '> thead th, > thead td',
    selectorSort: "th, td",
    debug: true
}).tablesorterPager({
    container: $(".pager"),
    ajaxUrl: null,
    ajaxProcessing: function (ajax) {
        if (ajax && ajax.hasOwnProperty('data')) {
            // return [ "data", "total_rows" ];
            return [ajax.data, ajax.total_rows];
        }
    },
    output: '{startRow} a {endRow} ({totalRows})',
    updateArrows: true,
    page: 0,
    size: 10,
    fixedHeight: true,
    removeRows: false,
    cssNext: '.next',
    cssPrev: '.prev',
    cssFirst: '.first',
    cssLast: '.last',
    cssGoto: '.gotoPage',
    cssPageDisplay: '.pagedisplay',
    cssPageSize: '.pagesize',
    cssDisabled: 'disabled'
});
$.extend($.tablesorter.themes.bootstrap, {
    table: 'ui-widget ui-widget-content ui-corner-all',
    header: 'ui-widget-header ui-corner-all ui-state-default',
    icons: 'ui-icon',
    sortNone: 'ui-icon-carat-2-n-s',
    sortAsc: 'ui-icon-carat-1-n',
    sortDesc: 'ui-icon-carat-1-s',
    active: 'ui-state-active',
    hover: 'ui-state-hover',
    filterRow: '',
    even: 'ui-widget-content',
    odd: 'ui-state-default'
});
}

我已经尝试在每个选项卡中直接实现寻呼机代码，看看是否有帮助，但没有帮助。在此处提出另一个问题之后，我尝试在没有很多选项的情况下声明一个 sortTable() 函数，但这也无济于事。

对于解决此问题的任何形式的帮助，我将不胜感激。我猜它必须与进入每个选项卡后加载寻呼机数据的方式有关，可能与某种自定义 ajax 函数有关。我已经尝试使用 customAjax 函数遵循 Mottie 的 Tablesorter 文档中的一些建议，但我也没有让它工作，但这很可能是我的错。

非常感谢您的帮助。

Answer 1

看来问题是 container 选项指向 所有寻呼机:

container: $(".pager")

如果您有多个表，每个表都有自己的寻呼机，您需要为每个寻呼机分配一个唯一的 ID，或者分别定位每个 table/pager 组。也许是这样的：

$( '.tablesorter' ).each( function( indx ) {
    $(this)
        .tablesorter({
            /* tablesorter options here */
        })
        .tablesorterPager({
            container: $( '.pager' ).eq( indx )
            // ...
        });
});

Answer 2

谢谢你给我指明了正确的方向，Mottie。由于我不想为每个 table 声明不同的脚本，我按照您的指示添加了一些更改。

我将分享我解决这个问题的方法，这使得现在一切都完美无缺，以防有人遇到同样的麻烦。

它遍历每个 tablesorter 元素并应用 sortTable 方法：

$(document).ready(function () {
    $(".tablesorter").each(function(){
        sortTable($(this));
    });

});

sortTable() 方法现在不再处理 CSS 选择器，而是处理 jQueryObject。由于我在 table 声明之后和元素之前包含寻呼机，因此我必须与父级一起工作。

修改后的行是星号之间的行：

**function sortTable(jQueryObject, sortList)** {
    sortListParameter = [[0, 1],[1, 0],[2, 0]];

    if (sortList != null) {
        sortListParameter = sortList;
    }

    **jQueryObject.tablesorter({**

        [options],

        widgets: ['columns', 'uitheme', 'filter', 'resizable', 'stickyHeaders'],

        widgetOptions: {
            [options]
        },

        initialized: function (table) { },
        selectorHeaders: '> thead th, > thead td',
        selectorSort: "th, td",
        debug: true

    }).tablesorterPager({
        **container: jQueryObject.parent().find(".pager"),**
        ajaxUrl: null,
        ajaxProcessing: function (ajax) {
            if (ajax && ajax.hasOwnProperty('data')) {
                 return [ajax.data, ajax.total_rows];
            }
        },
        [other options]
    });
    $.extend($.tablesorter.themes.bootstrap, {
        [options]
    });
}

再次感谢您的帮助，Mottie！

Mottie 的 Tablesorter Pager 没有在选项卡上有多个表格的页面上更新 (Bootstrap/Laravel)

Mottie's Tablesorter Pager not updating on a page with multiple tables on tabs (Bootstrap/Laravel)

tablesorter