Jquery tablesorter 过滤器和 ajax 寻呼机

Question

我正在使用this tablesorter 库对表中的数据进行排序和过滤。我还使用this 插件来将表格​​拆分为多个页面。

由于我的表中的记录数变得相当大，页面的加载速度变慢（>60 秒），所以我想改变页面的行为，通过加载表的内容ajax 调用。

为此，我使用了此页面上的示例：https://mottie.github.io/tablesorter/docs/example-pager-ajax.html

并创建了一个单独的页面来执行查询并返回 json。到目前为止一切顺利，分页工作和过滤和排序也工作。

我面临的一个问题是某些列具有“下拉”过滤器（通过将 class="filter-select" 添加到列中）。此下拉列表由 tablesorter 插件自动填充列中的值。

现在我切换到使用 ajax 调用加载数据，这些过滤器在页面初始加载时不再填充。当我在其他字段之一中输入一些数据时，下拉菜单突然被填充。

为了解决问题的根源，我将我的代码精简为一个简单的示例，我仍然可以在其中重现该问题。代码如下所示：

<script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/tablesorter.css?v=239319">
<script type="text/javascript" src="/js/jquery.tablesorter.combined.js"></script>

<link rel="stylesheet" href="/js/jquery.tablesorter.pager.css">
<script src="/js/jquery.tablesorter.pager.js"></script>

<TABLE id='issueTable' class="tablesorter search-table table table-striped table-bordered table-hover">
    <thead>
    <TR>
        <TH><B>Issue number</B></TH>
        <TH><B>Registered by</B></TH>
        <TH><B>Province</B></TH>
        <TH class="filter-select"><B>Departement</B></TH>
    </TR>
    </thead>
    <tbody class="rowlink">
    </tbody>
</TABLE>

<div id="pager1" class="pager">
    <form>
        <img src="/js/tablesorter_pager_images/first.png" class="first"/>
        <img src="/js/tablesorter_pager_images/prev.png" class="prev"/>
        <span class="pagedisplay" data-pager-output-filtered="{startRow:input} &ndash; {endRow} / {filteredRows} van {totalRows} meldingen"></span>
        <img src="/js/tablesorter_pager_images/next.png" class="next"/>
        <img src="/js/tablesorter_pager_images/last.png" class="last"/>
    </form>
</div>


<script>
    $(document).ready(function () {

        var table = $("#issueTable");

        var pager1Options = {

            container: $("#pager1"),
            page: 0,
            size: 20,
            pageReset: 0,
            ajaxUrl: 'meldingen.json',

            ajaxProcessing: function (data) {

                if (data && data.hasOwnProperty('rows')) {
                    var indx, r, row, c, d = data.rows,
                        // total number of rows (required)
                        total = data.total_rows,
                        // array of header names (optional)
                        headers = data.headers,
                        // cross-reference to match JSON key within data (no spaces)
                        headerXref = headers.join(',').split(','),
                        // all rows: array of arrays; each internal array has the table cell data for that row
                        rows = [],
                        // len should match pager set size (c.size)
                        len = d.length;
                    // this will depend on how the json is set up - see City0.json
                    // rows
                    for (r = 0; r < len; r++) {
                        row = []; // new row array
                        // cells
                        for (c in d[r]) {
                            if (typeof(c) === "string") {
                                // match the key with the header to get the proper column index
                                indx = $.inArray(c, headerXref);
                                // add each table cell data to row array
                                if (indx >= 0) {
                                    row[indx] = d[r][c];
                                }
                            }
                        }
                        rows.push(row); // add new row array to rows array
                    }
                    // in version 2.10, you can optionally return $(rows) a set of table rows within a jQuery object
                    return [total, rows, headers];
                }
            },
        };

        table.tablesorter({
            widgets: ['zebra', 'filter'],

        }).bind('pagerChange pagerComplete pagerInitialized pageMoved', function (e, c) {
            var msg = '"</span> event triggered, ' + (e.type === 'pagerChange' ? 'going to' : 'now on') +
                ' page <span class="typ">' + (c.page + 1) + '/' + c.totalPages + '</span>';
            $('#display')
                .append('<li><span class="str">"' + e.type + msg + '</li>')
                .find('li:first').remove();
        }).tablesorterPager(pager1Options);

    });
</script>

对于这个示例，我使用了一个简单的 json 文件，如下所示：

{
  "total_rows": 5,
  "headers": [
    "Issue number",
    "Registered by",
    "Province",
    "Departement"
  ],
  "rows": [
    {
      "Issue number": "914288",
      "Registered by": "Jan",
      "Province": "Utrecht",
      "Departement": "Department 1"
    },
    {
      "Issue number": "914289",
      "Registered by": "Piet",
      "Province": "Utrecht",
      "Departement": "Department 1"
    },
    {
      "Issue number": "914290",
      "Registered by": "Klaas",
      "Province": "Utrecht",
      "Departement": "Department 1"
    },
    {
      "Issue number": "914288",
      "Registered by": "Erik",
      "Province": "Utrecht",
      "Departement": "Department 2"
    },
    {
      "Issue number": "914288",
      "Registered by": "Bart",
      "Province": "Utrecht",
      "Departement": "Department 2"
    }
  ]
}

使用这个纯 JSON 文件，过滤当然不起作用，但是您可以看到“部门”列的过滤器最初没有填充，只要您在其他任何一个中键入内容，它就会立即填充列。

知道我在这里缺少什么吗？

2017-08-04 更新：

我现在使用 ajax 请求填充过滤器。为此，我已将此添加到 widgetOptions 中：

filter_selectSource: {
4: function (table, column, onlyAvail) {

                        $.getJSON('tablesorter_resources/filters.php?column=Department', function (data) {
                            var result = data.hasOwnProperty('options') ? data.options : false;
                            $.tablesorter.filter.buildSelect(table, column, result, true, onlyAvail);
                        });
                        }
                        return false;
                    }
                    }

但是根据文档，我应该这样做：

filter_selectSource: {
4: function (table, column, onlyAvail) {
                        console.log(table.hasInitialized);

                        // call ajax after tablesorter has initialized; this prevents
                        // multiple ajax calls during initialization
                        if (table.hasInitialized) {

                        $.getJSON('tablesorter_resources/filters.php?column=Department', function (data) {
                            var result = data.hasOwnProperty('options') ? data.options : false;
                            $.tablesorter.filter.buildSelect(table, column, result, true, onlyAvail);
                        });
                        }
                        return false;
                    }
                    }

但我看到 table.hasInitialized 返回 false，所以当我添加该条件时，过滤器不会被填充。

我还注意到页面大小设置为 30，因为我通过 ajax 切换到填充，即使我实际上只从数据库中获得每页 20 条记录并且我设置大小：20。知道为什么会这样忽略？

Answer 1

默认情况下，过滤器选择会使用表格的内容填充下拉列表。要添加不可用的选项，请使用 filter_selectSource option 填充固定数量的值或通过 ajax 调用直接从数据库中获取数据。有关详细信息，请参阅文档中的示例。