配置DataTables：初始化不触发Ajax，筛选后再调用请求

要实现初始化表格时不自动发起Ajax请求，仅在用户完成筛选操作后再加载数据，你可以按以下步骤调整代码：

1. 初始化DataTables时移除ajax配置 #

首先，初始化表格的时候不要设置ajax参数，这样DataTables就不会在页面加载完成后立刻发起请求。同时建议把表格实例保存到变量中，方便后续调用相关方法：

p._createDataTableMappings = function (application, field) {
    // 保存表格实例，方便后续操作
    p.dataTableInstance = $('#data_mappings').DataTable({
        "dom": 'rtip',
        // 移除初始化阶段的ajax配置
        "columns": [
            { "data": "Application1" },
            { "data": "Field1" },
            { "data": "Value1" },
            { "data": "Application2" },
            { "data": ... } // 保留你原本的列配置
        ]
    });
}

如果希望初始化后表格显示空状态更友好，可以加上"data": []配置，让表格先渲染空结构：

p.dataTableInstance = $('#data_mappings').DataTable({
    "dom": 'rtip',
    "data": [], // 初始化空数据
    "columns": [
        // 列配置不变
    ]
});

2. 给筛选操作绑定事件，触发数据加载 #

找到你的筛选触发元素（比如筛选按钮、输入框的确认事件），在回调里动态设置表格的Ajax地址并加载数据：

// 示例：假设筛选按钮的ID是filter_submit，替换成你实际的筛选触发元素
$('#filter_submit').on('click', function() {
    // 这里可以获取筛选参数，比如从输入框取值
    // var filterKeyword = $('#filter_input').val();
    
    // 动态拼接请求URL，可根据筛选参数调整
    var targetUrl = "/api/applications/" + application + "/mappings/" + field;
    // 如果有筛选参数，可拼接到URL后：
    // targetUrl += "?keyword=" + encodeURIComponent(filterKeyword);
    
    // 设置表格的Ajax地址并加载数据
    p.dataTableInstance.ajax.url(targetUrl).load();
});

如果需要在数据加载完成后做额外处理，或者不想重置分页到第一页，可以给load()方法传参数：

p.dataTableInstance.ajax.url(targetUrl).load(function(loadedData) {
    // 数据加载完成后的回调逻辑，可选
    console.log("数据加载成功", loadedData);
}, false); // 第二个参数设为false，加载新数据时保留当前分页位置

这样调整后，表格只会在用户触发筛选操作时才会发起Ajax请求并渲染数据，完全符合你的需求。

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