數據表延遲加載服務器過濾器延遲

我正在使用數據表（https://datatables.net/），並且啓用了延遲加載。它只需要做10個結果（或者其他的東西，現在並不重要）。然後，當你點擊一個新頁面時，必須得到X個下一個結果（可能會有很多結果，所以我不想一次加載所有數據）。數據表延遲加載服務器過濾器延遲

現在，有一個問題。如果我搜索，每個字符發送一個AJAX請求後，導致大量的AJAX請求。但它應該做的是：

負載10項
您鍵入
最後鍵入字符後，等待2秒鐘，然後火AJAX請求

我得到這個代碼：

var dataTable = $('#editor').dataTable({ 
    ajax: { 
     url: baseUrl + '/ajax/getWebpages', 
     dataSrc: '', 
     type: 'POST' 
    }, 
    deferLoading: 10, 
    serverSide: true, 
    searchDelay: 2000, 
}).on('search.dt', function() 
{ 
    clearTimeout(timer); 

    timer = setTimeout(function() { 
     return true; 
    }, 2000); 
});

我知道返回true可能是錯誤的，我真的不知道如何讓我的想法工作。我搜查了很長時間，但找不到任何東西。

來源

2017-05-09 Joshua Bakker

是的。但是這不符合我的要求;相反，在發出請求之前它只會等待X毫秒，這意味着如果輸入5個字符，它將等待並仍然執行所有這些請求。但我已經找到了答案。 –

你在找什麼叫做「去抖」看看吧 –

找到了答案：

我不得不把我的代碼在initComplete，如：

var dataTable = $('#editor').dataTable({ 
    ajax: { 
     url: baseUrl + '/ajax/getWebpages', 
     dataSrc: '', 
     type: 'POST' 
    }, 
    deferLoading: 57, 
    serverSide: true, 
    searchDelay: 2000, 
    columns: [ ], 
    initComplete: function() 
    { 
     var api = dataTable.api(); 

     $('.dataTables_filter input').unbind('.DT').bind('keyup.DT', function(e) 
     { 
      var value = this.value; 

      clearTimeout(timer); 

      timer = setTimeout(function() { 
       api.search(value).draw(); 
      }, 400); 
     }); 
    } 
});

釋：

你輸入的時候，此功能清除存儲在timer超時（在我的情況下是一個'全局'變量）
如果你停止輸入，超時將不會被清除（因爲它只會在你輸入時被清除）
上一次超時400毫秒仍然有效，所以在輸入最後一個字符後的400毫秒後，它會執行。

initComplete是在dataTables初始化後調用的事件。 .unbind('.DT')刪除了keyup事件，因此它不會自動調用AJAX請求。 api.search進行搜索。

來源

2017-05-09 13:57:39

感謝您的回答和解答。我一直在尋找這個功能，不明白爲什麼正常的行爲是不斷的輪詢...... –

數據表延遲加載服務器過濾器延遲

回答

相關問題