jQuery DataTable：删除行并重新加载

Question

现在，我正在使用jQuery DataTable。使用JavaScript数据数组初始化数据表格一切都很顺利。

在我的表中，它包括删除行按钮。当我点击删除每行的按钮时，使用以下功能删除记录。

function removeRow(itemList, recordIndex){ 
    itemList.splice(recordIndex, 1); 

    dataTable.clear(); 
    dataTable.rows.add(itemList); 
    dataTable.columns.adjust().draw(false); 
} 

该功能表现良好，没有错误。在那里，我设置为假到draw()功能，以防止转到第一页时删除任何其他页面中的记录。这一个也为我工作。

的问题是，当我itemList有记录，我去数据表的第二页，删除11记录。

所以，我的itemList将只留下10条记录，我的数据表应该显示第一个页的分页。

但是，jQuery数据表没有这样做。它仍然在第二页与没有记录。

我不知道如何解决这个问题。我想从当前页面删除每条记录后显示前一页。

我知道`画（）``不假参数功能将前往第一页。但它会在每次删除时进入第一页。

我只想去前一页，当我从当前页面删除所有记录。

请帮帮我。谢谢。

Answer 1

我发现一个hacky的方式以获得当前已清空的以前的分页。
由于使用了它的类命名，因此它特定于jQuery DataTable。

请试试CodePen。

function removeRow(recordIndex){ 

    // Get previous pagination number 
    var previousPagination= parseInt($(document).find(".paginate_button.current").data("dt-idx")) -1; 

    // Splice the data. 
    data.splice(recordIndex,1); 
    myTable.clear(); 
    myTable.rows.add(data); 
    myTable.columns.adjust().draw(false); // May ajust the pagination as empty... `.draw(false)` is needed. 

    // Decide to redraw or not based on the presence of `.deleteBtn` elements. 
    var doIdraw=false; 
    if($(document).find(".deleteBtn").length==0){ 
     doIdraw=true; 
    } 
    myTable.columns.adjust().draw(doIdraw); // Re-draw the whole dataTable to pagination 1 

    // If the page redraws and a previous pagination existed (except the first) 
    if(previousPagination>1 && doIdraw){ 
     var previousPage = $(document).find("[data-dt-idx='" + previousPagination + "']").click(); 
    } 

    // Just to debug... Console.log the fact that only one pagination is left. You can remove that. 
    if(previousPagination==0 && doIdraw){ 
    } 
} 

通知，我用：

• #myTable作为表id
• .deleteBtn作为删除按钮class
• data作为数据表数据

我删除了上面代码中的所有console.log()和示例相关代码（但不包含在CodePen中）。

“删除此→”按钮处理是：

$("#myTable").on("click",".deleteBtn",function(){ 

    var rowElement = $(this).closest("tr"); 
    var rowIndex = myTable.row(rowElement).index(); 
    removeRow(rowIndex); 
});