ASP.NET MVC中DataTable如何重载新搜索数据？

问题根源 #

1. 表单提交时未阻止默认跳转行为，导致浏览器直接加载后端返回的JSON响应，而非通过AJAX更新表格
2. DataTable实例未正确赋值给全局变量table，后续调用table.ajax.load()会失效
3. 事件绑定的'Submit'是大写，jQuery事件名需使用小写的'submit'
4. 配置中重复出现destroy: true，属于冗余配置
5. 存在配置项拼写错误（AutoWidth应为autoWidth）和字段名拼写错误（cusotmer_mobilenum应为customer_mobilenum）

修复后的完整代码 #

var table;
$(document).ready(function () {
    // 初始化DataTable并赋值给全局table变量（注意用DataTable()而非dataTable()，前者返回API实例）
    table = $('#customer_table').DataTable({
        clear: true,
        destroy: true,
        paging: true,
        processing: true,
        pageLength: 10,
        lengthMenu: [[10, 25, 50, 100, 100000], [10, 25, 50, 100, "All"]],
        autoWidth: false, // 修正配置项大小写
        "initComplete": function (settings, json) {
            $(this.api().table().container()).find('input').attr('autocomplete', 'off');
        },
        "ajax": {
            url: "/Home/GetCustomers",
            type: "POST",
            dataType: 'json',
            data: function (d) {
                // 自动拼接搜索表单数据到请求参数
                var formData = $('#searchForm').serializeArray();
                formData.forEach(function (item) {
                    d[item.name] = item.value;
                });
                return d;
            },
            "dataSrc": function (json) {
                // 确保返回结构符合DataTable要求，可根据后端实际返回调整
                json.draw = json.draw || 1;
                json.recordsTotal = json.recordsTotal || (typeof json.data === 'string' ? JSON.parse(json.data).length : json.data.length);
                json.recordsFiltered = json.recordsFiltered || json.recordsTotal;
                // 若后端返回的data已是数组，可去掉JSON.parse
                return typeof json.data === 'string' ? JSON.parse(json.data) : json.data;
            }
        },
        "columns": [
            { "data": "customer_id" },
            { "data": "customer_id_external" },
            { "data": "customer_name" },
            { "data": "customer_user_name" },
            { "data": "customer_cnic" },
            { "data": "customer_mobilenum" }, // 修正字段名拼写错误
            { "data": "customer_address" },
            { "data": "package_id" },
            { "data": "join_date" },
            { "data": "customer_due_day" },
            { "data": "customer_status" },
            { "data": "TotalPaymentDue" },
        ]
    });

    // 绑定表单提交事件，阻止默认跳转并刷新表格
    $('#searchForm').on('submit', function (e) {
        e.preventDefault(); // 核心：阻止表单默认提交行为
        table.ajax.reload(); // 直接调用reload，复用已配置的ajax参数和数据处理逻辑
    });
})

额外注意点 #

• 确保后端GetCustomers方法返回的JSON结构严格符合DataTable要求：包含draw、recordsTotal、recordsFiltered、data四个字段
• 如果后端返回的data字段已经是JSON数组，可删除JSON.parse(json.data)，直接返回json.data

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