Question

我有一个带有过滤器的bootstrapTable，其中包含服务器端数据。

<table class="table table-condensed table-bordered table-hover" id="position-list"
data-toggle="table" 
data-page-list="[10, 25, 50, 100, ALL]"
data-url="/getData.jsp"
data-side-pagination="server"
data-pagination="true" 
data-click-to-select="true"
data-id-field="id"
data-show-footer="false"   
data-minimum-count-columns="2"                           
data-height="550" 
data-filter-control="true" 
data-filter-show-clear="true"
>
<thead>
<tr>
    <th data-sortable="true" data-field="Status" data-filter-control="select">Status</th>
      ....

第data-filter-show-clear="true"行向bootstrapTable添加了一个按钮，效果很好。这是开发者http://issues.wenzhixin.net.cn/bootstrap-table/#extensions/filter-control.html

的演示

问题是我在屏幕上的其他地方有自己的按钮，我想激活清除过滤器，但我不希望使用此默认按钮。

我尝试过的一种选择是将以下代码附加到我的按钮上

 $('.form-control').val('');
 $('#position-list').bootstrapTable('refresh');

但是它不起作用-通过调试bootstrap-table.js，我可以看到未重置filterColumnsPartial，因此忽略了我手动选择的过滤器。

有什么想法吗？

Answer 1

我可以通过以下技巧解决此问题：

$('#yourCustomButtonId').on('click', function(){ $('.filter-show-clear').trigger('click') });

如果您需要隐藏按钮，可以使用此按钮：

.filter-show-clear {visibility: hidden; position: absolute; top: -9999px}

这将解决问题。

注意：关于您的代码以及为什么不起作用的原因，因为remove函数是remove filter，并清除cookie并重置filter ..etc

BootstrapTable.prototype.clearFilterControl = function () {
        if (this.options.filterControl && this.options.filterShowClear) {
            var that = this,
                cookies = collectBootstrapCookies(),
                header = getCurrentHeader(that),
                table = header.closest('table'),
                controls = header.find(getCurrentSearchControls(that)),
                search = that.$toolbar.find('.search input'),
                timeoutId = 0;

            $.each(that.options.valuesFilterControl, function (i, item) {
                item.value = '';
            });

            setValues(that);

            // Clear each type of filter if it exists.
            // Requires the body to reload each time a type of filter is found because we never know
            // which ones are going to be present.
            if (controls.length > 0) {
                this.filterColumnsPartial = {};
                $(controls[0]).trigger(controls[0].tagName === 'INPUT' ? 'keyup' : 'change');
            } else {
                return;
            }

            if (search.length > 0) {
                that.resetSearch();
            }

            // use the default sort order if it exists. do nothing if it does not
            if (that.options.sortName !== table.data('sortName') || that.options.sortOrder !== table.data('sortOrder')) {
                var sorter = header.find(sprintf('[data-field="%s"]', $(controls[0]).closest('table').data('sortName')));
                if (sorter.length > 0) {
                    that.onSort(table.data('sortName'), table.data('sortName'));
                    $(sorter).find('.sortable').trigger('click');
                }
            }

            // clear cookies once the filters are clean
            clearTimeout(timeoutId);
            timeoutId = setTimeout(function () {
                if (cookies && cookies.length > 0) {
                    $.each(cookies, function (i, item) {
                        if (that.deleteCookie !== undefined) {
                            that.deleteCookie(item);
                        }
                    });
                }
            }, that.options.searchTimeOut);
        }
    };

我厌倦了找到一个清除按钮选项，但是我找不到一个，因此您需要触发当前的过滤器或建立核心原型的清除函数依赖性。……

Answer 2

更清洁的解决方案：

$('#position-list').bootstrapTable('filterBy', {});

Answer 3

您也可以使用

$（'＃yourCustomButtonId'）。on（'click'，function（）{$（'table'）。bootstrapTable（'clearFilterControl'）}）; }）

清除BootstrapTable中的过滤器值

3 个答案: