jQuery DataTables服务端重载并传递新Post数据的实现问询

我明白你的需求——你已经封装了通用的服务端DataTable初始化函数，但现在需要在重载表格的时候传递新的筛选参数（也就是新的Post数据）对吧？这其实是DataTables里很常见的场景，我给你几个可行的方案，结合你的现有代码来调整：

首先，把你原函数里的ajax.data改成一个函数，而不是直接传入固定的data对象。这样每次DataTables发起请求（包括初始化和重载）时，都会调用这个函数获取最新的Post数据，完美解决重载时传新参数的问题。

修改后的UTIL.serverDatatable函数：

UTIL.serverDatatable = function (table, api, getDataCallback) { 
    var token = "Bearer " + JSON.parse(UTIL.getItemLocalStorage('token')); 
    return table.DataTable({ 
        "processing": true, 
        "serverSide": true, 
        "paging": true, 
        "ajax": { 
            url: api, 
            type: "post", 
            beforeSend: function (request) { 
                request.setRequestHeader("Authorization", token); // 补全实际需要的请求头，比如token鉴权
            },
            // 改成函数，每次请求时获取最新的Post数据
            data: function(d) {
                // 合并DataTables自带的分页/排序参数，和自定义筛选参数
                var filterData = getDataCallback();
                return Object.assign({}, d, filterData);
            }
        }
    }); 
};

然后，初始化表格时传入一个获取当前筛选数据的回调函数：

// 示例：获取筛选区下拉框的最新数据
function getCurrentFilterData() {
    return {
        category: $('#category-select').val(),
        status: $('#status-select').val()
        // 其他需要传递的筛选字段...
    };
}

// 初始化表格
var myTable = UTIL.serverDatatable($('#my-table'), '/api/data/list', getCurrentFilterData);

当需要重载表格时，直接调用DataTables的draw()方法即可，它会自动拉取最新的筛选参数：

// 比如用户切换下拉框选项后触发重载
$('#category-select').change(function() {
    myTable.draw();
});

如果你的原函数已经在多处使用，不想大范围修改，可以单独写一个重载函数，手动更新AJAX的请求数据：

UTIL.reloadDatatable = function(tableInstance, newData) {
    // 更新AJAX的data配置，同时保留原接口地址
    tableInstance.ajax.url(tableInstance.ajax.url()).data(newData);
    // 触发表格重载
    tableInstance.draw();
};

使用示例：

// 用户修改筛选条件后，组装新的Post数据
var newPostData = {
    category: $('#category-select').val(),
    status: $('#status-select').val()
};
// 调用重载方法传递新参数
UTIL.reloadDatatable(myTable, newPostData);

不过这个方案需要注意：如果需要合并DataTables自带的分页/排序参数，你得手动处理，不如方案一优雅。

• 记得补全beforeSend里的请求头（比如原代码中的request.setRequestHeader("...")，通常是设置鉴权token）；
• 方案一中的Object.assign会把DataTables默认的分页、排序、搜索参数，和你的自定义筛选参数合并，服务端可以一次性接收所有必要参数。

这样调整后，就能轻松实现重载表格时传递新的Post数据啦！

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