Mottie的Tablesorter寻呼机没有在标签上有多个表的页面上更新（Bootstrap / Laravel）

Question

我已经成功地在我最新的Laravel 5.1项目中使用Pager和Filtering实现了Mottie的Tablesorter 2.0，只有一个表格。

但是，我有一个页面，我使用Bootstrap CSS设置了许多选项卡。请注意，我正在使用Blade Templating Engine为每个选项卡包含部分PHP，并且我还在单独的部分中设置了Pager。这对于我只显示该页面的一个表的所有其他视图都正常工作。

这是标签声明的代码：

<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>

在每个部分内部，我都包含一个带有分页器的tableorted页面：

<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>

所以我的最后一页有一堆表，每个表都有自己的Tablesorter寻呼机。但是，当我加载页面时，所有寻呼机只加载其中一个表的值，从而可以在一个选项卡中仅使用Tablesorter。

例如，如果它加载的第一个表有6个元素，另一个可能有100多个元素的表只会显示前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代码，以相同的方式对网站中的所有表进行排序：

$(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

感谢你指出我正确的方向，莫蒂。由于我不想为每个表声明不同的脚本，因此我根据您的指示添加了一些更改。

我将分享我解决这个问题的方法，这使得一切都能完美无缺地工作，万一有人遇到同样的麻烦。

迭代每个tablesorter元素并应用sortTable方法：

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

});

sortTable（）方法现在不是在CSS选择器上工作，而是在jQueryObject上运行。因为我在声明表格之后和元素之前包括寻呼机，所以我必须与父母一起工作。

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

**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！

Answer 2

问题似乎是container选项指向所有寻呼机：

container: $(".pager")

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

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