Tabulator远程过滤清空输入字段问题咨询及修复方法求助

这是Tabulator远程过滤模式下的正常设计，而非Bug。因为远程过滤时，每次触发过滤/分页/排序操作，表格都会向服务器发起新请求，服务器返回数据后，表格会重置表头过滤器的状态，避免本地输入值与服务器返回的数据集状态不一致。

修复方法：保存并恢复过滤参数 #

通过Tabulator的回调函数，在请求发起前保存当前表头过滤值，待数据加载完成后再回填到输入框中：

1. 定义变量存储过滤参数

let savedFilters = {};

2. 修改表格配置，添加请求前后的回调逻辑

var table = new Tabulator("#table", {
    layout: "fitColumns",
    filterMode: "remote",
    dataSendParams: {
         filter: 'filter_by',
         sort: 'order_by',
    },
    ajaxURL: "{url}",
    // 请求发起前，保存当前所有表头过滤值
    ajaxRequesting: function(url, params) {
        savedFilters = this.getHeaderFilterValues();
    },
    // 数据加载完成后，恢复表头过滤值
    ajaxResponse: function(url, params, response) {
        this.setHeaderFilterValues(savedFilters);
        return response; // 必须返回响应数据供表格渲染
    },
    columns: [
        {
            title: 'Username',
            field: 'user_name',
            headerFilter: 'input'
        },
        {
            title: "Birthdate",
            field: "birth_date",
            headerFilter: "input"
        }
    ],
});

说明 #

• 该方法会在每次远程请求（过滤、分页、排序）时自动保存和恢复过滤值，确保输入框内容不会丢失。
• 如果你的业务需要根据服务器返回的过滤条件调整本地输入值，可以在ajaxResponse中对savedFilters进行二次处理后再调用setHeaderFilterValues。

内容的提问来源于stack exchange，提问作者Zegert