无法重新初始化DataTable：提交后无刷新更新DataTable的方法

你的问题出在两个核心点上：

1. DataTable初始化时是直接传入本地内存中的数据（data: js），没有配置DataTable自带的ajax数据源，所以调用ajax.reload()不会生效——这个方法只对通过DataTable ajax选项配置的数据源有效。
2. 初始化时的table变量是ajax.success回调里的局部变量，外部点击事件无法访问；而且$('#crteriaTbl').DataTable.ajax.reload()的写法错误，正确获取实例的方式是$('#crteriaTbl').DataTable()（方法调用，而非直接访问属性）。

下面提供两种可行的解决办法：

方法一：保持现有初始化逻辑，手动重新请求数据更新表格 #

1. 先修正初始化代码的语法错误（columns数组末尾多余的},），并将table变量提升为全局变量，方便后续调用：

// 全局变量存储DataTable实例
let table;

window.addEventListener('load', function () {
    const selectValueBatch = document.getElementById('valueBatch').value;
    $.ajax({
        method: 'GET',
        url: "/DIYRate/onLoadCriteria",
        data: { batchID: selectValueBatch },
        success: function (result) {
            var js = result.criTbls;
            table = $('#crteriaTbl').DataTable({
                "data": js,
                "aLengthMenu": [
                    [10, 25, 50, 100, -1],
                    [10, 25, 50, 100, "All"]
                ],
                "iDisplayLength": 10,
                "columns": [
                    { "data": "criteriaID" },
                    { "data": "batchID" },
                    { "data": "criteria" },
                    { "data": "description" },
                    { "data": "percentage" } // 移除多余的},
                ]
            });
        }
    })
});

2. 修改新增按钮的点击事件，在提交成功后重新请求最新数据，再更新表格：

document.getElementById('btnCreateCrit').addEventListener('click', function () {
    const batchID = document.getElementById('batchID').value;
    const criteria = document.getElementById('criteriaName').value;
    const descript = document.getElementById('descript').value;
    const percent = document.getElementById('percent').value;

    $.ajax({
        method: 'POST',
        url: '/DIYRate/criteriaCreate',
        data: { batchID: batchID, criteria: criteria, descript: descript, percent: percent },
        success: function (result) {
            result.stats == 0 ? toastr.error(result.message) : toastr.success(result.message);
            
            // 重新请求当前批次的最新数据
            const currentBatch = document.getElementById('valueBatch').value;
            $.ajax({
                method: 'GET',
                url: "/DIYRate/onLoadCriteria",
                data: { batchID: currentBatch },
                success: function (newResult) {
                    // 清空现有数据、添加新数据、重新渲染表格
                    table.clear().rows.add(newResult.criTbls).draw();
                }
            });
        }       
    })
});

方法二：改用DataTable内置的ajax配置（更简洁规范） #

这种方式让DataTable自动管理数据请求，后续刷新只需调用ajax.reload()即可：

1. 初始化时配置ajax选项，替换手动的ajax请求：

let table;

window.addEventListener('load', function () {
    table = $('#crteriaTbl').DataTable({
        "ajax": {
            "url": "/DIYRate/onLoadCriteria",
            "method": "GET",
            "data": function() {
                // 每次请求时动态传入当前选中的batchID
                return { batchID: document.getElementById('valueBatch').value };
            }
        },
        "aLengthMenu": [
            [10, 25, 50, 100, -1],
            [10, 25, 50, 100, "All"]
        ],
        "iDisplayLength": 10,
        "columns": [
            { "data": "criteriaID" },
            { "data": "batchID" },
            { "data": "criteria" },
            { "data": "description" },
            { "data": "percentage" }
        ]
    });
});

2. 点击事件中直接调用ajax.reload()刷新表格：

document.getElementById('btnCreateCrit').addEventListener('click', function () {
    const batchID = document.getElementById('batchID').value;
    const criteria = document.getElementById('criteriaName').value;
    const descript = document.getElementById('descript').value;
    const percent = document.getElementById('percent').value;

    $.ajax({
        method: 'POST',
        url: '/DIYRate/criteriaCreate',
        data: { batchID: batchID, criteria: criteria, descript: descript, percent: percent },
        success: function (result) {
            result.stats == 0 ? toastr.error(result.message) : toastr.success(result.message);
            
            // 重新请求数据并渲染表格
            table.ajax.reload();
            // 若不需要保留当前分页位置，可传参数：table.ajax.reload(null, false);
        }       
    })
});

注意：确保后端/DIYRate/onLoadCriteria接口在新增数据后，能返回包含最新记录的完整数据集。第二种方法更符合DataTable的设计规范，推荐优先使用。

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