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()功能，以防止轉到第一頁時刪除任何其他頁面中的記錄。這一個也爲我工作。

的問題是，當我itemList有記錄，我去數據表的第二頁，刪除11記錄。

所以，我的itemList將只留下10條記錄，我的數據表應該顯示第一個頁的分頁。

但是，jQuery數據表沒有這樣做。它仍然在第二頁與沒有記錄。

我不知道如何解決這個問題。我想從當前頁面刪除每條記錄後顯示前一頁。

我知道`畫（）``不假參數功能將前往第一頁。但它會在每次刪除時進入第一頁。

我只想去前一頁，當我從當前頁面刪除所有記錄。

請幫幫我。謝謝。

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作爲數據表數據

我刪除了上面代碼中的所有console.log()和示例相關代碼（但不包含在CodePen中）。

「刪除此→」按鈕處理是：

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

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