使用 dataTables 和 SearchPane 插件过滤表后更新 SearchPane 过滤器值答案

【问题标题】：Update SearchPane filter values after filter table using dataTables and SearchPane plugin使用 dataTables 和 SearchPane 插件过滤表后更新 SearchPane 过滤器值
【发布时间】：2019-09-28 09:49:06
【问题描述】：

我正在测试一个名为 SearchPane 的 dataTables 插件，它工作正常，但是当我使用窗格过滤表时，值会一直卡住，而不是反映过滤表中的值。

我需要的是：单击 searchPane 过滤器中的某个值后，过滤器会根据（过滤的）更新表的值更新值。

文档说明了它，但没有解释如何应用它。 searchPane Documentation

文档有以下信息：

API - 当表中的数据更新时，您需要搜索窗格以反映此更新的数据 - 这可以通过 searchPanes.rebuild() 方法 - 例如：

var table = $('#example').DataTable( {
    searchPane: true
} );

table.row.add( ... ).draw();
table.searchPanes.rebuild();

但我不知道如何在工作示例中应用它。

我的代码：

$('#example').DataTable( {
    searchPane: true
} )

<link href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/plug-ins/preview/searchPane/dataTables.searchPane.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/preview/searchPane/dataTables.searchPane.min.js"></script>

<div class="container">
            
<table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example">
    <thead>
        <tr>
            <th>Rendering engine</th>
            <th>Browser</th>
            <th>Platform(s)</th>
            <th>Engine version</th>
            <th>CSS grade</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Trident</td>
            <td>Internet
                 Explorer 4.0</td>
            <td>Win 95+</td>
            <td> 4</td>
            <td>X</td>
        </tr>
        <tr>
            <td>Trident</td>
            <td>Internet
                 Explorer 5.0</td>
            <td>Win 95+</td>
            <td>5</td>
            <td>C</td>
        </tr>
        <tr>
            <td>Trident</td>
            <td>Internet
                 Explorer 5.5</td>
            <td>Win 95+</td>
            <td>5.5</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Trident</td>
            <td>Internet
                 Explorer 6</td>
            <td>Win 98+</td>
            <td>6</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Trident</td>
            <td>Internet Explorer 7</td>
            <td>Win XP SP2+</td>
            <td>7</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Trident</td>
            <td>AOL browser (AOL desktop)</td>
            <td>Win XP</td>
            <td>6</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Gecko</td>
            <td>Firefox 1.0</td>
            <td>Win 98+ / OSX.2+</td>
            <td>1.7</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Gecko</td>
            <td>Firefox 1.5</td>
            <td>Win 98+ / OSX.2+</td>
            <td>1.8</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Gecko</td>
            <td>Firefox 2.0</td>
            <td>Win 98+ / OSX.2+</td>
            <td>1.8</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Gecko</td>
            <td>Firefox 3.0</td>
            <td>Win 2k+ / OSX.3+</td>
            <td>1.9</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Gecko</td>
            <td>Camino 1.0</td>
            <td>OSX.2+</td>
            <td>1.8</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Gecko</td>
            <td>Camino 1.5</td>
            <td>OSX.3+</td>
            <td>1.8</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Gecko</td>
            <td>Netscape 7.2</td>
            <td>Win 95+ / Mac OS 8.6-9.2</td>
            <td>1.7</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Gecko</td>
            <td>Netscape Browser 8</td>
            <td>Win 98SE+</td>
            <td>1.7</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Gecko</td>
            <td>Netscape Navigator 9</td>
            <td>Win 98+ / OSX.2+</td>
            <td>1.8</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Gecko</td>
            <td>Mozilla 1.0</td>
            <td>Win 95+ / OSX.1+</td>
            <td>1</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Gecko</td>
            <td>Mozilla 1.1</td>
            <td>Win 95+ / OSX.1+</td>
            <td>1.1</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Gecko</td>
            <td>Mozilla 1.2</td>
            <td>Win 95+ / OSX.1+</td>
            <td>1.2</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Gecko</td>
            <td>Mozilla 1.3</td>
            <td>Win 95+ / OSX.1+</td>
            <td>1.3</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Gecko</td>
            <td>Mozilla 1.4</td>
            <td>Win 95+ / OSX.1+</td>
            <td>1.4</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Gecko</td>
            <td>Mozilla 1.5</td>
            <td>Win 95+ / OSX.1+</td>
            <td>1.5</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Gecko</td>
            <td>Mozilla 1.6</td>
            <td>Win 95+ / OSX.1+</td>
            <td>1.6</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Gecko</td>
            <td>Mozilla 1.7</td>
            <td>Win 98+ / OSX.1+</td>
            <td>1.7</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Gecko</td>
            <td>Mozilla 1.8</td>
            <td>Win 98+ / OSX.1+</td>
            <td>1.8</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Gecko</td>
            <td>Seamonkey 1.1</td>
            <td>Win 98+ / OSX.2+</td>
            <td>1.8</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Gecko</td>
            <td>Epiphany 2.20</td>
            <td>Gnome</td>
            <td>1.8</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Webkit</td>
            <td>Safari 1.2</td>
            <td>OSX.3</td>
            <td>125.5</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Webkit</td>
            <td>Safari 1.3</td>
            <td>OSX.3</td>
            <td>312.8</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Webkit</td>
            <td>Safari 2.0</td>
            <td>OSX.4+</td>
            <td>419.3</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Webkit</td>
            <td>Safari 3.0</td>
            <td>OSX.4+</td>
            <td>522.1</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Webkit</td>
            <td>OmniWeb 5.5</td>
            <td>OSX.4+</td>
            <td>420</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Webkit</td>
            <td>iPod Touch / iPhone</td>
            <td>iPod</td>
            <td>420.1</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Webkit</td>
            <td>S60</td>
            <td>S60</td>
            <td>413</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Presto</td>
            <td>Opera 7.0</td>
            <td>Win 95+ / OSX.1+</td>
            <td>-</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Presto</td>
            <td>Opera 7.5</td>
            <td>Win 95+ / OSX.2+</td>
            <td>-</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Presto</td>
            <td>Opera 8.0</td>
            <td>Win 95+ / OSX.2+</td>
            <td>-</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Presto</td>
            <td>Opera 8.5</td>
            <td>Win 95+ / OSX.2+</td>
            <td>-</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Presto</td>
            <td>Opera 9.0</td>
            <td>Win 95+ / OSX.3+</td>
            <td>-</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Presto</td>
            <td>Opera 9.2</td>
            <td>Win 88+ / OSX.3+</td>
            <td>-</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Presto</td>
            <td>Opera 9.5</td>
            <td>Win 88+ / OSX.3+</td>
            <td>-</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Presto</td>
            <td>Opera for Wii</td>
            <td>Wii</td>
            <td>-</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Presto</td>
            <td>Nokia N800</td>
            <td>N800</td>
            <td>-</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Presto</td>
            <td>Nintendo DS browser</td>
            <td>Nintendo DS</td>
            <td>8.5</td>
            <td>C/A<sup>1</sup></td>
        </tr>
        <tr>
            <td>KHTML</td>
            <td>Konqureror 3.1</td>
            <td>KDE 3.1</td>
            <td>3.1</td>
            <td>C</td>
        </tr>
        <tr>
            <td>KHTML</td>
            <td>Konqureror 3.3</td>
            <td>KDE 3.3</td>
            <td>3.3</td>
            <td>A</td>
        </tr>
        <tr>
            <td>KHTML</td>
            <td>Konqureror 3.5</td>
            <td>KDE 3.5</td>
            <td>3.5</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Tasman</td>
            <td>Internet Explorer 4.5</td>
            <td>Mac OS 8-9</td>
            <td>-</td>
            <td>X</td>
        </tr>
        <tr>
            <td>Tasman</td>
            <td>Internet Explorer 5.1</td>
            <td>Mac OS 7.6-9</td>
            <td>1</td>
            <td>C</td>
        </tr>
        <tr>
            <td>Tasman</td>
            <td>Internet Explorer 5.2</td>
            <td>Mac OS 8-X</td>
            <td>1</td>
            <td>C</td>
        </tr>
        <tr>
            <td>Misc</td>
            <td>NetFront 3.1</td>
            <td>Embedded devices</td>
            <td>-</td>
            <td>C</td>
        </tr>
        <tr>
            <td>Misc</td>
            <td>NetFront 3.4</td>
            <td>Embedded devices</td>
            <td>-</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Misc</td>
            <td>Dillo 0.8</td>
            <td>Embedded devices</td>
            <td>-</td>
            <td>X</td>
        </tr>
        <tr>
            <td>Misc</td>
            <td>Links</td>
            <td>Text only</td>
            <td>-</td>
            <td>X</td>
        </tr>
        <tr>
            <td>Misc</td>
            <td>Lynx</td>
            <td>Text only</td>
            <td>-</td>
            <td>X</td>
        </tr>
        <tr>
            <td>Misc</td>
            <td>IE Mobile</td>
            <td>Windows Mobile 6</td>
            <td>-</td>
            <td>C</td>
        </tr>
        <tr>
            <td>Misc</td>
            <td>PSP browser</td>
            <td>PSP</td>
            <td>-</td>
            <td>C</td>
        </tr>
        <tr>
            <td>Other browsers</td>
            <td>All others</td>
            <td>-</td>
            <td>-</td>
            <td>U</td>
        </tr>
    </tbody>
</table>
            
        </div>

【问题讨论】：

标签： filter datatable datatables

【解决方案1】：

table.row.add( ... ).draw(); table.searchPanes.rebuild();

删除上面的行。如果您想在服务器端使用它，请编辑“dataTables.searchPane.min.js”文件，如下所示。

var $jscomp = $jscomp || {}; $jscomp.scope = {}; $jscomp.findInternal = function (a, e, c) { a instanceof String && (a = String(a)); for (var g = a.length, d = 0; d < g; d++) { var l = a[d]; if (e.call(c, l, d, a)) return { i: d, v: l } } return { i: -1, v: void 0 } }; $jscomp.ASSUME_ES5 = !1; $jscomp.ASSUME_NO_NATIVE_MAP = !1; $jscomp.ASSUME_NO_NATIVE_SET = !1; $jscomp.defineProperty = $jscomp.ASSUME_ES5 || "function" == typeof Object.defineProperties ? Object.defineProperty : function (a, e, c) { a != Array.prototype && a != Object.prototype && (a[e] = c.value) };
$jscomp.getGlobal = function (a) { return "undefined" != typeof window && window === a ? a : "undefined" != typeof global && null != global ? global : a }; $jscomp.global = $jscomp.getGlobal(this); $jscomp.polyfill = function (a, e, c, g) { if (e) { c = $jscomp.global; a = a.split("."); for (g = 0; g < a.length - 1; g++) { var d = a[g]; d in c || (c[d] = {}); c = c[d] } a = a[a.length - 1]; g = c[a]; e = e(g); e != g && null != e && $jscomp.defineProperty(c, a, { configurable: !0, writable: !0, value: e }) } };
$jscomp.polyfill("Array.prototype.find", function (a) { return a ? a : function (a, c) { return $jscomp.findInternal(this, a, c).v } }, "es6-impl", "es3");
(function (a) { "function" === typeof define && define.amd ? define(["jquery", "datatables.net"], function (e) { return a(e, window, document) }) : "object" === typeof exports ? module.exports = function (e, c) { e || (e = window); c && c.fn.dataTable || (c = require("datatables.net")(e, c).$); return a(c, e, e.document) } : a(jQuery, window, document) })(function (a, e, c, g) {
    function d(b, h) {
        var f = this; b = new l.Api(b); this.classes = a.extend(!0, {}, d.classes); this.dom = { container: a("<div/>").addClass(this.classes.container) }; this.c = a.extend(!0, {}, d.defaults,
            h); this.s = { dt: b }; b.settings()[0].searchPane = this; b.columns(this.c.columns).eq(0).each(function (a) { f._pane(a) }); a(this.dom.container).on("click", "li", function () { f._toggle(this) }).on("click", "button." + this.classes.clear, function () { f._clear(a(this).closest("div." + f.classes.pane.container)) }); this._attach()
    } var l = a.fn.dataTable; a.extend(d.prototype, {
        rebuild: function () { var a = this; this.s.dt.columns(this.c.columns).eq(0).each(function (b) { a._pane(b) }) }, _attach: function () {
            var b = this.c.container, b = "function" ===
                typeof b ? b(this.s.dt) : b; "prepend" === this.c.insert ? a(this.dom.container).prependTo(b) : a(this.dom.container).appendTo(b)
        }, _binData: function (a) { var b = {}; a.each(function (a) { a && (b[a] ? b[a]++ : b[a] = 1) }); return b }, _clear: function (a) { var b = this.classes, f = b.item.selected; a.find("li." + f).removeClass(f); a.removeClass(b.pane.active); this.s.dt.column(a.data("column")).search("").draw() }, _pane: function (b) {
            var h = this.classes, f = h.item, h = h.pane, c = this.s.dt.column(b), e = a("<ul/>"), d = this._binData(c.data().flatten());
            if (!(this._variance(d) < this.c.threshold)) {
                for (var g = c.search(), g = g ? g.substr(1, g.length - 2).split("|") : [], m = c.data().unique().sort().toArray(), k = 0, l = m.length; k < l; k++)if (m[k]) { var n = a("<li/>").html('<span class="' + f.label + '">' + m[k] + "</span>").data("filter", m[k]).append(a("<span/>").addClass(f.count).html(d[m[k]])); if (g.length) { var p = m[k].replace ? a.fn.dataTable.util.escapeRegex(m[k]) : m[k]; -1 !== a.inArray(p, g) && n.addClass(f.selected) } e.append(n) } f = a("<div/>").data("column", b).addClass(h.container).addClass(g.length ?
                    h.active : "").append(a('<button type="button">&times;</button>').addClass(this.classes.clear)).append(a("<div/>").addClass(h.title).html(a(c.header()).text())).append(a("<div/>").addClass(h.scroller).append(e)); h = this.dom.container; c = h.children().map(function () { if (a(this).data("column") == b) return this }); c.length ? c.replaceWith(f) : a(h).append(f)
            }
        }, _toggle: function (b) {
            var c = this.classes, f = c.item.selected, e = this.s.dt; b = a(b); var d = b.closest("div." + c.pane.container); b.toggleClass(f, !b.hasClass(f)); b = d.find("li." +
                f); 0 === b.length ? (d.removeClass(c.pane.active), e.column(d.data("column")).search("").draw()) : (d.addClass(c.pane.active), e.column(d.data("column")).search(a.map(b, function (b) { b = a(b).data("filter").toString(); return a.fn.dataTable.util.escapeRegex(b) }).join("|"), !0, !1).draw())
        }, _variance: function (b) { b = a.map(b, function (a, b) { return a }); for (var c = b.length, f = 0, d = 0, e = c; d < e; d++)f += b[d]; for (var f = f / c, g = 0, d = 0, e = c; d < e; d++)g += Math.pow(f - b[d], 2); return g / (c - 1) }
    }); d.classes = {
        container: "dt-searchPanes", clear: "clear",
        pane: { active: "filtering", container: "pane", title: "title", scroller: "scroller" }, item: { selected: "selected", label: "label", count: "count" }
    }; d.defaults = { container: function (a) { return a.table().container() }, columns: g, insert: "prepend", threshold: .5 }; d.version = "0.0.1"; a.fn.dataTable.SearchPanes = d; a.fn.DataTable.SearchPanes = d; l.Api.register("searchPanes.rebuild()", function () { return this.iterator("table", function (a) { a.searchPane && a.searchPane.rebuild() }) }); a(c).on("init.dt", function (b, c, e) {
        "dt" === b.namespace && (b =
            c.oInit.searchPane, e = l.defaults.searchPane, b || e) && (e = a.extend({}, b, e), !1 !== b && new d(c, e))
    })
});

【讨论】：