JQuery DataTable與Ajax的排序衝突

所以它來了：我用dataTable插件來顯示我的HTML表。當我點擊一列的標題時，該列被排序。它運作良好。但是當我試圖實現Ajax時，它開始有一種怪異的行爲。我能夠通過Ajax刪除DOM文檔，並且該行從表中消失。但在此之後，如果我點擊表格的標題，突然，該行會回來並顯示出來，即使它已經在數據庫中被刪除了！這裏用dataTable發生了什麼？我懷疑jQuery remove（）不會從頁面的DOM中刪除實際的元素，但它仍然存在但未顯示。所以當我點擊標題時，數據表認爲該行仍然存在。我被困。誰能幫我這個？非常感謝您的幫助。謝謝JQuery DataTable與Ajax的排序衝突

來源

2011-06-15 zsljulius

我從來沒有遇到過jQuery remove（）之前的麻煩。點擊標題實際上是否再次獲取數據？或者它只是在視圖上對內存中的東西進行排序。如果它是前者，也許你必須調整dataTable的配置，以便說明你在重新加載時刪除了某些東西的事實？ – jaydel 2011-06-15 13:51:12

@jaydel感謝您的幫助。我閱讀dataTable網站上的文檔，我想，dataTable默認從DOM獲取數據。這就是爲什麼我很困惑。因爲我通過螢火蟲看到tr元素已被刪除，所以當我點擊列標題時，元素又回來了！ – zsljulius 2011-06-15 13:57:36

這很奇怪。在我的知識結束時，我感覺很好。我們使用flexigrid作爲我們的表格（它有很多自己的限制和不透明性），但聽起來像你在正確的軌道上。 – jaydel 2011-06-15 14:19:28

在這裏可能會發生許多事情之一。

您是否在使用帶有「fnServerData」的高速緩存管道？
我猜你從數據表中刪除行時，你也在做一個Ajax調用，從數據庫中刪除它。在嘗試再次排序之前，您是否確定操作已完成？
而不是做一個.remove（）你可以做一個$（「＃tableID」）。fnDraw（）成功回調您的刪除回調。這將導致數據表從數據庫中獲取新數據併爲您呈現表。

當您使用「bServerSide」：true作爲數據表是不刪除通過jquery.remove（）的DOM元素或者其他DOM操作方法，而是讓datatable.fnDraw（可能是最佳實踐的一個選項）根據從數據庫中獲取的數據處理添加和刪除列。

來源

2011-06-17 20:31:36

好吧，它已經有一段時間了。但是非常感謝Keith。我的意思是我使用純粹的HTML數據表，它不涉及服務器端處理。但是你提醒我一件事，我應該使用dataTable的fnDeleteRow來刪除行而不是jQuery的remove（）。由於我使用的是Ajax調用，我只需要將行號參數與表單數據一起傳遞。讓控制器進一步將params傳遞給js回調函數，然後從那裏用傳遞給它的行號調用dataTable的fnDeleteRow。它就像魅力一樣。謝謝！ – zsljulius 2011-06-22 14:19:11

這是一個老問題，所以我不確定當時是否有api可用。這個問題似乎與this SO question類似，但很難說沒有細節。

您的問題可能是將數據從DOM中刪除而不從DataTable中刪除它。他們documentation說要刪除的數據是這樣的：

var table = $('#example').DataTable(); 
  
$('#example tbody').on('click', 'img.icon-delete', function() { 
    table 
        .row($(this).parents('tr')) 
        .remove() 
        .draw(); 
});

的DOM反映與.draw()命令的變化，並與數據表與.row().remove() API調用刪除行。

來源

2017-08-04 15:46:02

JQuery DataTable與Ajax的排序衝突

回答

相關問題