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数据表并没有这样做。它仍然在第二页中，没有记录。

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

我知道`draw（）``函数没有 false 参数会转到第一页。但它会在每次删除时转到第一页。

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

请帮帮我。感谢。

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中）。

＆＃34;删除此→＆＃34; 按钮处理程序是：

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

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

jQuery DataTable：删除行并重新加载

1 个答案: