如何通过重置分页，DataTable 插件中的总行数来重新加载？答案

【问题标题】：How to reload by resetting pagination, total rows in DataTable plugin?如何通过重置分页，DataTable 插件中的总行数来重新加载？
【发布时间】：2017-11-10 17:52:50
【问题描述】：

每次插入新数据或选择不同的下拉选项时，我不确定如何使用正确的分页等重新加载新表。

我通常的代码所做的是，当我从下拉列表中选择一个值时，我的表格将刷新并在表格主体标签内显示一组新数据。当我使用这个插件时，它显示一切都很好，但是当我从下拉列表中选择不同的值时，它会显示一个新的集合，但我的排序、分页和其他功能仍将基于我选择的第一组数据运行。

这是我的代码。如果有人能指出我的错误，那真的很有帮助。谢谢！

var loadClassType = function(eventID){
    $("#loadClassTypeTableBody").empty();

    var formData = {
        'perform'     : "getClassTypeList",
        'event_id'    : eventID,
    };

    $.ajax({
        type        : 'POST', 
        url         : './competition.php', 
        data        : formData, 
        dataType    : 'json', 
        encode      : true
    })
    .done(function(data) {

        if (data.success) {
            var htmlBlock="";
            var i = 1;
            $.each(data.data, function(id,errMsg){
                htmlBlock += '<tr>';
                htmlBlock +=    '<td>'+i+'</td>';
                htmlBlock +=    '<td>'+errMsg['class_type_name']+'</td>';

                if (errMsg['status'] == 1 ) {
                      htmlBlock +=    '<td class="text-success">Active</td>';               
                }else{
                      htmlBlock +=    '<td class="text-danger">Disabled</td>';
                }

                if (errMsg['status'] == 1 ) {
                      htmlBlock +=    '<td><i class="material-icons" rel="tooltip" title data-original-title="Click to \'Disable\'" onClick="ctrlClassType(2,'+errMsg['id']+','+eventID+')">lock_open</i></td>';                
                }else{
                      htmlBlock +=    '<td><i class="material-icons" rel="tooltip" title data-original-title="Click to \'Enable\' " onClick="ctrlClassType(1,'+errMsg['id']+','+eventID+')">lock</i></td>';
                }
                htmlBlock +=  '</tr>';
                i++;
        });



            $("#loadClassTypeTableBody").append(htmlBlock);
            $("#loadClassTypeTable").DataTable().clear();
        }else{
            console.log(data);

        } 
    });
}

还有我的 HTML 代码：

<table class="table table-hover" id="loadClassTypeTable">
    <thead>
        <tr>
            <th>#</th>
            <th>Class Type Name</th>

            <th>Status</th>
            <th>Options</th>
        </tr>
    </thead>

    <tbody id="loadClassTypeTableBody">
      <!-- Depends on JS -->
    </tbody>
</table>

到目前为止，我尝试过的是，

$("#loadClassTypeTable").DataTable().clear().draw(); 
// returns "No data available in table" and following with my blocks of html code
$("#loadClassTypeTable").DataTable().ajax.reload(); // doesnt work because i am not passing a jason value

【问题讨论】：

标签： javascript jquery datatables

【解决方案1】：

好的，在花了一些时间之后，我通过玩弄代码并进行了一些研究找到了解决方法。这种方法对我有用。希望它可以帮助遇到与我相同问题的人。

首先要注意：

//clear and destroy the table first
$('#viewEntriesTable').DataTable().clear();
$('#viewEntriesTable').DataTable().destroy(); 

//in my case,i will use the append method to insert my HTML Blocks of code first 
$("#load_total_joined_entries").append(htmlBlocks);

//and finally 
 $('#viewEntriesTable').DataTable();

要注意的第二件事：如果使用“colspan”没有检测到任何行，我必须避免附加我的 html 块......这是在收到错误后从the discussion here 引用的说 Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined datatable

【讨论】：