當按 Enter 鍵時，我在使用單列搜索實現數據表時遇到問題。首先，我使用數據表指南實現它，如下所示：table.columns().every( function () { var that = this; $( 'input', this.footer() ).on( 'keyup change clear', function () { if ( that.search() !== this.value ) { that .search( this.value ) .draw(); } } ); } );上面的代碼工作正常。但是，由于該表使用服務器端處理，因此通過按鍵進行搜索的成本太高。因此，我嘗試更改代碼，以便它按 Enter 鍵進行搜索：table.columns().every(function () { var that = this; $('input', this.footer()).keypress(function (e) { if (e.keyCode == 13) { //search only when Enter key is pressed to avoid wasteful calls e.preventDefault(); //input is within <form> element which submits form when Enter key is pressed. e.preventDefault() prevents this if (that.search() !== this.value) { that .search(this.value) .draw(); } } });});使用上面的代碼，如果我編寫一個搜索值并按 Enter 鍵，它將按預期進行搜索。但是，如果我為 編寫搜索值column1但按 Enter 鍵column2，則不會使用 中的值執行搜索column1。這會導致用戶需要在每一列上按 Enter 鍵才能添加/刪除搜索值。用戶無法先在所需列中寫入搜索值，然后在其中一列上按 Enter 進行搜索。據我所知，該表存儲了該值，并且只有在特定列上按 Enter 鍵后才會更新該值。我不知道如何解決這個問題。
2 回答
慕無忌1623718
TA貢獻1744條經驗 獲得超4個贊
我在幫助下解決了這個問題。我的數據表是服務器端的，具有動態生成的列，因此我需要從每個輸入框獲取輸入值并搜索每個列。當我了解更多時，我會更新這個答案。
這是工作代碼：
table.columns().every(function () {
$('input', this.footer()).keypress(function (e) {
if (e.keyCode == 13) { //search only when Enter key is pressed to avoid wasteful calls
e.preventDefault(); //input is within <form> element which submits form when Enter key is pressed. e.preventDefault() prevents this
var header = table.table().header(); //header because I moved search boxes to header
var inputBoxes = header.getElementsByTagName('input');
$.each(data.columns, function (index) {
var inputBoxVal = inputBoxes[index].value;
table.column(index).search(inputBoxVal);
});
table.draw();
}
});
});
萬千封印
TA貢獻1891條經驗 獲得超3個贊
有兩種方法可以解決這個問題：
用于
activeElement查看哪些元素具有焦點，并進行相應的搜索。在原始事件發生后設置一個計時器
keyup，并在幾秒鐘后進行搜索：
var searchTimer;
table.columns().every( function () {
? var that = this;
? $( 'input', this.footer() ).on( 'keyup change clear', function () {
? ? if ( that.search() !== this.value ) {
? ? ? clearTimeout(searchTimer); // Reset timer
? ? ? var value = this.value;
? ? ? searchTimer = setTimeout(function() {
? ? ? ? that.search(value).draw();
? ? ? }, 3000); // Wait 3 seconds
? ? }
? });
});
- 2 回答
- 0 關注
- 139 瀏覽
添加回答
舉報
0/150
提交
取消