Question

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

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

这是我的代码。如果有人可以指出我的错误，那将会非常有用。谢谢！

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

Answer 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();

需要注意的第二件事：如果使用＆＃34; colspan＆＃34;没有检测到行，我必须避免附加我的html块。 ...这是在收到错误后从the discussion here引用的，该错误表示 Uncaught TypeError：无法设置属性＆＃39; _DT_CellIndex＆＃39;未定义的数据表

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

1 个答案: