jQuery DataTable：删除行并重新加载答案

【问题标题】：jQuery DataTable : Delete row and reloadjQuery DataTable：删除行并重新加载
【发布时间】：2016-10-28 09:16:18
【问题描述】：

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

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

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

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

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

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

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

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

我不知道如何解决这个问题。我想在删除当前页面的所有记录后显示上一页。

我知道没有 false 参数的 `draw()`` 函数会转到首页。但它会在每次删除时进入第一页。

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

请帮帮我。谢谢。

【问题讨论】：

标签： javascript jquery datatable

【解决方案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作为dataTable数据

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

“删除这个→”按钮处理程序是：

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

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

【讨论】：