jQuery tablesorter过滤器和Ajax分页器

Question

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

由于表中的记录数量越来越多，因此页面的加载变得越来越慢（> 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，所以当我添加该条件时，不会填充该过滤器。

我还注意到，由于我实际上是通过ajax切换为填充，因此页面大小设置为30，即使我实际上仅从数据库中获取每页20条记录并且设置了大小：20.为何会忽略该想法？

Answer 1

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