JQuery AJAX DataTable在重新加载数据后不加载标准函数答案

【问题标题】：JQuery AJAX DataTable Not Loading Standard Functions After Reload DataJQuery AJAX DataTable在重新加载数据后不加载标准函数
【发布时间】：2017-06-04 09:54:54
【问题描述】：

我已将 DataTables 添加到我正在使用 PHP 和 SQL 通过 AJAX 获取数据的表中。在第一次加载时，执行第一次搜索后一切都很好，一切都按预期工作。然而，在第二次搜索时，虽然所有用于搜索的代码都已再次运行，但 DataTable 功能似乎停止工作。

我在DataTable文件的关键部分添加了一些alert，第一次搜索后发现，它再也没有回到文件中。

虽然我可能需要“重新初始化”DataTable，因为在我再次搜索后，整个数据内容都发生了变化。

花了很长时间在网上寻找，有很多关于 Destroy 和 Clear 等的建议。但似乎没有任何效果。

这是我的代码，如您所见，我已将其设置为在第一次搜索后执行不同的操作，但不确定如何解决此问题，因为排序、分页、搜索等都不起作用：

$.ajax({
    type:'POST',
    url:'/ITSMIS/data/asset/search.php',
    data:HardwareAsset,
    dataType: "html",
    success:function(data){

        LoadDataTableHeaders();

        var NotSearched = document.getElementById("no-search-default");
        var TableContainer = document.getElementById("data-table-container");
        var NoSearchResults = document.getElementById("no-search-results");

        if(NotSearched.style.display !== 'none'){
            $(NotSearched).hide();
        }
        if(data){
            if(TableContainer.style.display == 'none'){
                $(TableContainer).show();
            }
            $(NoSearchResults).hide();
            $('#data-table-results').html(data);

            $("input:checkbox:not(:checked)").each(function() {
                var DataTableColumn = "table ." + $(this).attr("name");
                $(DataTableColumn).remove();
            });

            if ( ! $.fn.DataTable.isDataTable( '#data-table' ) ) {
                $('#data-table').DataTable();
            }
            else{

            }
        }
        else{
            if(NoSearchResults.style.display == 'none'){
                $(TableContainer).hide();
                $(NoSearchResults).show();
            }   
        }
    }
})

【问题讨论】：

如果要将数据转储到原始 html 表中，则需要使所有行无效并重绘。 DataTable 不知道你在改变底层的 html
你可以随时销毁并重建整个表

标签： javascript php jquery ajax datatables

【解决方案1】：

当表格已经退出时，这应该会使表格无效并重新绘制。
（在我发现这个之后添加了'full-rest'参数：https://datatables.net/reference/api/draw()）

if (  $.fn.DataTable.isDataTable( '#data-table' ) ) {
     $('#data-table').DataTable().rows().invalidate().draw('full-reset');
 }
 else{
      $('#data-table').DataTable();
 }

【讨论】：

好吧，这似乎有固定的分页和行数选项，搜索似乎也不错。但排序似乎仍然没有重新加载。非常感谢其余部分的修复！非常感谢。
您总是可以在每次 ajax 调用时销毁和重建表

【解决方案2】：

您可以尝试通过调用简单地重新初始化数据表

$('#data-table').DataTable({
    destroy: true
});

此选项将允许 Datatables 销毁前一个实例（如果存在），并像第一次一样进行初始化。

【讨论】：