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);
});