Ajax加载数据无法兼容DataTable问题求助（.NET Core环境）

修改后的JS代码 #

<script>
    function GetMainCategoryList() {
        $.ajax({
            url: "/Admin/BusinessCategories/MainCategories/",
            contentType: "application/json",
            dataType: "json",
            type: "Get",
            success: function (data) {
                var item = jQuery.parseJSON(data);
                $("#table-maincategories").empty();

                $.each(JSON.parse("[" + item + "]"), (index, value) => {
                    for (let element of value) {
                        $("#table-maincategories").append(`<tr class="text-center">
                                                            <td><img src="${element.Image}" style="height:80px;" /></td>
                                                            <td>${element.Name}</td>
                                                            <td>
                                                                 <div class="form-check">
                                                                 <a href="/Admin/BusinessCategories/MainShowMenu/${element.Id}" onclick="location.href=this.href;">
                                                                 <input class="form-check-input" type="checkbox" id="flex_${element.Id}">
                                                                 </a>
                                                                 <label class="form-check-label" for="flex_${element.Id}">Menüde Göster</label>
                                                                 </div>
                                                            </td>
                                                            <td>
                                                                 <a onclick="ShowEditMainCategory(${element.Id})" class="btn btn-primary"><i class="bx bx-edit"></i> Düzenle</a>
                                                                 <a onclick="DeleteMainCategory(${element.Id});" data-name="${element.Name}" id="del_${element.Id}" class="btn btn-danger delete-button"><i class="bx bx-trash"></i> Sil</a>
                                                            </td> </tr>`);

                        var checkbox = document.getElementById('flex_' + element.Id);
                        checkbox.checked = element.ShowMenu === true;
                    }
                });

                // 处理DataTable初始化：先销毁已存在实例再重新初始化
                var table = $('#datatablex').DataTable();
                table.destroy();
                $('#datatablex').DataTable({
                    responsive: true,
                    language: {
                        url: '//cdn.datatables.net/plug-ins/1.13.4/i18n/tr.json' // 可选：适配土耳其语界面文字
                    }
                });
                ViewShowHide(1);
            },
            error: function () {
                Swal.fire('Veriler Okunamadı!', '', 'error')
            }
        })
    }
</script>

核心修改点 #

• 修正表格ID匹配：原代码中表格ID为datatablex，但DataTable初始化时错误使用datatable，现在统一为正确的ID。
• 避免初始化冲突：每次初始化前先销毁已存在的DataTable实例，防止多次调用函数时出现报错。
• 简化复选框赋值逻辑：将原有的if-else判断简化为一行代码，保持逻辑简洁。
• 可选本地化优化：添加土耳其语配置，让DataTable的控件文字（搜索、分页等）与界面语言统一。

说明 #

HTML代码无需修改，保持原结构即可。修改后数据渲染完成后会正确初始化DataTable，实现表格的分页、搜索、排序等功能。

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