javascript - jQuery 数据表 : Delete row and reload

Question

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

在我的表格中，它包括删除行按钮。当我单击每行的删除按钮时，我使用以下函数删除记录。

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()`` 函数将转到第一页。但每次删除它都会转到第一页。

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

请帮帮我。谢谢。

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 作为 dataTable 数据

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

“删除此→”按钮处理程序是:

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

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