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()函数设置了false ，以防止在删除任何其他页面中的记录时转到第一页。

问题是，当我的itemList有11条记录时，我转到数据表的第二页并删除了第11条记录 。

因此，我的itemList将仅留下10条记录，而我的数据表应显示分页的第一页。

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

我不知道该如何解决。 从当前页面删除所有记录后，我想显示上一页。

我知道没有错误参数的`draw（）``函数将转到第一页。 但是它会在每次删除时都转到第一页。

当我从当前页面删除所有记录时，我只想转到上一页。

请帮我。 谢谢。

Answer 1

当清空当前页面时，我发现了一种巧妙的方法来获取先前的分页。
它特定于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);
});