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

I have added DataTables to a table i am fetching data via AJAX, using PHP and SQL. On the very first load, after performing the first Search all is fine and everything works as intended. However when searching a second time, while all the code used to Search has been ran through again, the DataTable functionality seems to stop working.

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

I added some alerts into crucial parts in the DataTable file, and found after the first search, it never makes it back into the file.

我在DataTable文件的关键部分中添加了一些警告，在第一次搜索之后发现，它永远不会返回到文件中。

I though maybe i need to "re-initialise" DataTable seeing as the entirety of the data contents has changed after my search again.

我想我可能需要“重新初始化”DataTable，因为在我再次搜索之后，所有的数据内容都发生了变化。

Spent a long time looking online, with a lot of suggestions being around Destroy and Clear etc. But nothing seems to work.

花了很长时间上网看，有很多建议都是围绕着毁灭和清除等等，但似乎没有什么效果。

Here is my code, as you can see i have it set to do something different after the first search but not sure how to fix this, as the sorting, pagination, searching etc all dont work:

这是我的代码，你可以看到，我在第一次搜索后设置了一些不同的功能，但是不知道如何修复，因为排序、分页、搜索等等都不起作用:

$.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();
            }   
        }
    }
})

2 个解决方案

#1

This should invalidate and redraw the table when it already exits.
(Added 'full-rest' parameter after I found this: https://datatables.net/reference/api/draw())

这将使该表无效，并在该表已经退出时重新绘制该表。(在发现以下参数后添加了“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();
 }

#2

You could try simply re-initializing Datatables by calling

您可以尝试通过调用来重新初始化数据

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

this option would allow Datatables to destroy the previous instance if it exists, and initialize as if it was the first time.

该选项将允许Datatables销毁前一个实例(如果存在的话)，并初始化它，就好像它是第一次一样。

#1