如何为同一DataTable切换两个数据源并刷新数据？

问题 #

我有一个通过API URL加载JSON数据的DataTable，页面加载时会自动从指定URL获取数据填充表格。现在我希望通过AJAX调用另一个AdvancedSearch接口，获取同格式的自定义查询数据，替换原表格中的数据并刷新表格。以下是我的DataTable初始化代码和advancedSearch函数代码，请问该如何实现？

DataTable初始化代码：

$(document).ready(function () {
    $("#documentsDatatable").DataTable({
        language: {
            "emptyTable": "No Documents found"
        },
        dom: 'lBfrtip',
        "responsive": false, "autoWidth": true,
        "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
        buttons: [
            {
                extend: 'pdf',
                title: 'Documents',
                exportOptions:
                {
                    columns: [2, 1, 4]
                }
            },
            {
                extend: 'excel',
                title: 'Documents',
                exportOptions:
                {
                    columns: [2, 1, 4]
                }
            },
            {
                extend: 'csv',
                title: 'Documents',
                exportOptions:
                {
                    columns: [2, 1, 4]
                }
            }

        ],
        "processing": true,
        "serverSide": true,
        "order": [[4, 'asc']],
        "filter": true,
        "ajax": {
            "url": '@TempData["api"]api/Document/Documents',
            "headers": {
                'Authorization': 'Bearer @HttpContextAccessor.HttpContext.Session.GetString("token")',
                'Access-Control-Allow-Origin': '*'
            },
            "type": "POST",
            "datatype": "json"
        },
        "columnDefs": [{
            "targets": [0, 1],
            "visible": false,
            "searchable": true
        }],
        "columns": [
            { "data": "name", "name": "Name", "autoWidth": true },
            { "data": "name", "name": "Name", "autoWidth": true },
            {
                "render": function (data, type, full, meta) {

                        return "<a href='Documents/Check/" + full.id + "'><span class='badge bg-primmary'><h5 title='" + full.name + "'>" + full.name.substring(0, 20) + "</h5></span></a>";
                }
            },
            {
                data: "created_at",
                "render": function (value) {
                    if (value === null) return "";
                    return moment(value).format('DD/MM/YYYY');
                }
            },
            {
                "render": function (data, type, full, meta) {
                    return "<p title='" + full.createdBy.firstName.concat(" ", full.createdBy.lastName) + "'>"+ full.createdBy.email +"</p>"
                }
            },
            {
                "render": function (data, type, full, meta) {
                    return "<a href='Documents/Tag/" + full.id + "&" + full.name + "' class='btn btn-outline-success btn-link'><i class='fas fa-plus fa-xl'></i> Add</span></a>";
                }
            },
            {
                "render": function (data, type, full, meta) {
                    return "<a href='/Versioning/Versions/" + full.id + "' class='btn btn-outline-success btn-link' title='Versions'><i class='fas fa-code-branch fa-xl'></i> <span id='badge' class='badge badge-secondary'>" + full.versionCount + "</span> </a>";
                }
            }
        ]
    });
});

我已能正常从初始接口获取数据，现在编写了如下advancedSearch函数调用新接口获取JSON数据，请问如何将该数据填充到同一DataTable并清空原有数据？

function advancedSearch() {
    var document_type = document.getElementById("document_type").value;
    var date_from = document.getElementById("date_from").value;
    var date_to = document.getElementById("date_to").value;
    console.log(document_type);
                $.ajax({
    type: 'POST',
    datatype: 'json',
    url: "@TempData["api"]api/Document/AdvancedSearch",
    headers: {
        'Authorization': 'Bearer @HttpContextAccessor.HttpContext.Session.GetString("token")',
        'Access-Control-Allow-Origin': '*'
    },
    data: { document_type: document_type, date_from: date_from, date_to: date_to},
    success: function () {
        alertify.set('notifier', 'position', 'top-center');
        alertify.success('Results are ready');
        //$('#documentsDatatable').DataTable().ajax.reload();

    },
    error: function () {

        alertify.set('notifier', 'position', 'top-center');
        var msg = alertify.error('Failed to fetch documents', 10);
        $('body').one('click', function () {
            msg.dismiss();
        });
        //setInterval('location.reload()', 1500);
        $('#documentsDatatable').DataTable().ajax.reload();

    }
})
    }

解决方案 #

步骤1：保存DataTable实例 #

初始化DataTable时，将实例保存到变量中，方便后续操作：

$(document).ready(function () {
    // 保存DataTable实例
    var table = $("#documentsDatatable").DataTable({
        // 原有的所有配置保持不变
    });
});

步骤2：修改advancedSearch函数 #

直接利用DataTable的API切换接口并加载数据，无需编写独立的$.ajax请求，兼容serverSide模式：

function advancedSearch() {
    var document_type = document.getElementById("document_type").value;
    var date_from = document.getElementById("date_from").value;
    var date_to = document.getElementById("date_to").value;
    var table = $("#documentsDatatable").DataTable();

    // 修改DataTable的AJAX配置，指向高级搜索接口并传递查询参数
    table.ajax.url({
        url: "@TempData["api"]api/Document/AdvancedSearch",
        type: "POST",
        headers: {
            'Authorization': 'Bearer @HttpContextAccessor.HttpContext.Session.GetString("token")',
            'Access-Control-Allow-Origin': '*'
        },
        data: function(d) {
            // 合并DataTable自带的serverSide参数（如draw、start、length）和自定义查询参数
            d.document_type = document_type;
            d.date_from = date_from;
            d.date_to = date_to;
            return d;
        }
    }).load(
        // 加载成功回调
        function() {
            alertify.set('notifier', 'position', 'top-center');
            alertify.success('Results are ready');
        },
        // 加载失败回调
        function() {
            alertify.set('notifier', 'position', 'top-center');
            var msg = alertify.error('Failed to fetch documents', 10);
            $('body').one('click', function () {
                msg.dismiss();
            });
        }
    );
}

可选：恢复初始接口数据 #

如果需要切回初始文档列表接口，可保存初始AJAX配置后直接切换：

$(document).ready(function () {
    // 保存初始AJAX配置
    var originalAjaxConfig = {
        "url": '@TempData["api"]api/Document/Documents',
        "headers": {
            'Authorization': 'Bearer @HttpContextAccessor.HttpContext.Session.GetString("token")',
            'Access-Control-Allow-Origin': '*'
        },
        "type": "POST",
        "datatype": "json"
    };

    var table = $("#documentsDatatable").DataTable({
        // 其他配置不变
        "ajax": originalAjaxConfig
    });

    // 恢复初始数据的函数
    function loadOriginalData() {
        table.ajax.url(originalAjaxConfig).load();
    }
});

注意事项 #

• 确保AdvancedSearch接口返回符合DataTable serverSide要求的格式：包含draw、recordsTotal、recordsFiltered、data字段的JSON对象。
• 如果接口返回纯数据数组（非serverSide格式），则改用以下方式更新表格：

// 在接口success回调中执行
table.clear(); // 清空原有数据
table.rows.add(responseData).draw(); // 添加新数据并刷新表格

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