Mottie 的 Tablesorter Pager 没有在选项卡上有多个表格的页面上更新(Bootstrap/Laravel) [英] Mottie's Tablesorter Pager not updating on a page with multiple tables on tabs (Bootstrap/Laravel)

问题描述

在我最新的 Laravel 5.1 项目中，我已经成功地使用分页器和过滤器实现了 Mottie 的 Tablesorter 2.0，该项目只有一张表.

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

这是标签声明的代码:

<div id="内容"><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><div id="my-tab-content" class="tab-content">@include('groups.partials.passengers')@include('groups.partials.addproducts'){ 为清楚起见，删除了其他包括}

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

<div class="table-responsive" style="width:auto;"><table id="products-not-related-table" class="table table-striped tablesorter">@include('partials.pager')<头><tr><描述</th><th>Precio</th><th>Stock</th><th>Usado</th><th>证明者</th><th>义务</th><th>社会团体</th></tr></thead>@foreach($products_not_associated as $product_not_related)<tr><td>{{ $product_not_associated->description }}</td><td>{{ $product_not_related->price }}</td><td>{{ $product_not_related->stock }}</td><td>{{ $product_not_related->used_stock }}</td><td>{{ $product_not_related->provider_id->commercial_name }}</td><td>{{ $product_not_associated->mandatory ?'Sí' : '否' }}</td><td class="text-center">{{ 为清楚起见，删除了其他一些 Laravel 代码 }}</td></tr>@endforeach</tbody>

所以我的最后一页中有一堆表格，每个表格里面都有自己的 Tablesorter 寻呼机.但是，当我加载页面时，所有寻呼机只加载其中一个表的值，这使得只能在一个选项卡中使用 Tablesorter.

例如，如果它加载的第一个表格有 6 个元素，另一个可能有 100 多个元素的表格只会显示前 10 个(每页的默认值是 10 个)，并且不允许我在任何情况下使用寻呼机方式.

这是我的寻呼机代码:

<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">页面:</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></选择>&nbsp;<label for="gotoPage">Ir 页面:</label><select class="gotoPage" title="Escoja página"></select>

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

$(document).ready(function () {sortTable(".tablesorter");});功能排序表(选择器，排序列表){排序列表参数 = [[0, 1],[1, 0],[2, 0]];如果(排序列表！= null){sortListParameter = sortList;}$(选择器).tablesorter({主题:'引导'，宽度固定:假，显示处理:真，headerTemplate: '{content} {icon}',取消选择:真，dateFormat: "ddmmyyyy",sortMultiSortKey: "shiftKey",sortResetKey: 'ctrlKey',usNumberFormat: false,延迟初始化:假，服务器端排序:假，忽略大小写:真，sortForce:空，sortList: sortListParameter,sortAppend:空，sortInitialOrder: "asc",sortLocaleCompare:假，sortReset:假，sortRestart:假，emptyTo: "底部",stringTo: "最大",initWidgets: 真,小部件:['columns'、'uitheme'、'filter'、'resizable'、'stickyHeaders']、小部件选项:{可调整大小:真实，resizable_addLastColumn: 真，uitheme: '引导程序',columns_thead:真，filter_childRows:假，filter_columnFilters: 真,filter_cssFilter: "tablesorter-filter",filter_functions:空，filter_hideFilters: 假，filter_ignoreCase: 真,filter_reset:空，filter_searchDelay: 300,filter_serversideFiltering: 假，filter_startsWith: 假，filter_useParsedData: 假，保存排序:假},初始化:函数(表){},选择器标题:'>头日，>头td',selectorSort: "th, td",调试:真}).tablesorterPager({容器:$(".pager"),ajaxUrl:空，ajaxProcessing:函数(ajax){if (ajax && ajax.hasOwnProperty('data')) {//return [ "data", "total_rows" ];返回 [ajax.data, ajax.total_rows];}},输出:'{startRow} a {endRow} ({totalRows})',更新箭头:真，页数:0，尺寸:10，固定高度:真，删除行:假，cssNext: '.next',cssPrev: '.prev',cssFirst: '.first',cssLast: '.last',cssGoto: '.gotoPage',cssPageDisplay: '.pagedisplay',cssPageSize: '.pagesize',cssDisabled: '禁用'});$.extend($.tablesorter.themes.bootstrap, {表:'ui-widget ui-widget-content ui-corner-all'，标题:'ui-widget-header ui-corner-all ui-state-default',图标:用户界面图标"，sortNone: 'ui-icon-carat-2-n-s',sortAsc: 'ui-icon-carat-1-n',sortDesc: 'ui-icon-carat-1-s',活动:'ui-state-active'，悬停:'ui-state-hover'，过滤器行:''，甚至:'ui-widget-content'，奇数:'ui-state-default'});}

我已经尝试将寻呼机代码直接实施到每个选项卡中，看看它是否有帮助，但它没有.遵循此处提出的另一个问题，我尝试声明一个 sortTable() 函数而没有很多选项，但这也无济于事.

我非常感谢您对此问题的任何帮助.我猜它必须对进入每个选项卡后应该加载寻呼机数据的方式做一些事情，可能使用某种自定义 ajax 函数.我曾尝试使用 customAjax 函数遵循 Mottie 的 Tablesorter 文档中的一些建议，但我也没有让它起作用，但这很可能是我的错.

非常感谢您的帮助.

解决方案

看来问题在于 container 选项指向 所有寻呼机:>

容器:$(".pager")

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

$( '.tablesorter' ).each( function( indx ) {$(这个).tablesorter({/* 这里的表排序器选项 */}).tablesorterPager({容器:$('.pager').eq(indx)//...});});

I have successfully been able to implement Mottie's Tablesorter 2.0 with Pager and Filtering in my latest Laravel 5.1 project on views with just one table.

However, I have a page where I have set up a number of tabs using Bootstrap CSS. Note that I'm using Blade Templating Engine to include a partial PHP for each of the tabs and that I have also set up the Pager in a separate partial. This has worked correctly for all the other views where I show just one table for the page.

This is the code for the declaration of the tabs:

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

And inside each of those partials, I include a tablesorted page with a pager inside each of them:

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

So my final page has a bunch of tables in them, each with their own Tablesorter pager inside. However, when I load the page all of the pagers load just the value for one of the tables, making it possible to only work with Tablesorter in one tab.

If, for example, the first table it loads has 6 elements, another table that might have 100+ elements would only show me the first 10 (10 being the default value per page) and not let me use the pager in any way.

This is my pager code:

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

And this is my javascript code to sort all the tables in the site in the same way:

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

I have already tried implementing the pager code directly into each of the tabs to see if it would help, which it didn't. Following another question asked here, I tried to declare a sortTable() function without a lot of the options, but that didn't help either.

I'd appreciate a lot any kind of help with this problem. I'm guessing it has to do something with the way the data for the Pager should be loaded after entering each tab, probably with some kind of custom ajax function. I have tried following some suggestions in Mottie's Tablesorter documentation using customAjax functions but I didn't get that to work either, but that could very well be my fault.

Thanks a lot for your help.

解决方案

It appears that the issue is that the container option is pointing to all the pagers:

container: $(".pager")

If you have multiple tables, each with their own pager, you'll need to either give each pager a unique ID, or target each table/pager group separately. Maybe something like this:

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

这篇关于Mottie 的 Tablesorter Pager 没有在选项卡上有多个表格的页面上更新(Bootstrap/Laravel)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！