應用程序正在使用：數據表 1.10.18jQuery 3.2.1PHP 后端lodash 4.17.4該應用程序包含一個由多個數據表組成的網頁。這些中的每一個都使用serverSide: true（服務器端模式）通過返回 JSON 數據的 ajax 端點獲取數據。表初始化如下：在頁面加載<table>時，會呈現幾個 '。我正在使用 jquery.each()為每個初始化 DataTable：$.each($('table'), function () { $(this).DataTable({ processing: true, serverSide: true, searching: false, ajax: { data: { table_id: $(this).attr('id') }, url: '/get-data.json', }, ...});每個<table>人都有一個 ID。這是通過data:屬性中的 ajax 傳遞的。端點/get-data.json根據表 ID 返回數據。換句話說，它知道應該根據這個 ID 為“哪個表”獲取數據。我希望能夠在表格上進行搜索，但必須在服務器端完成。出于這個原因，我在 (1) 中設置了初始化代碼，searching: false因為這有效地禁用了 DataTables 提供的客戶端搜索工具（我們不能在這種情況下使用它，因為搜索必須在服務器端完成）。我面臨的問題是如何為每個表創建搜索輸入、進行 ajax 調用并更新相應的表。我希望在輸入 >=3 個字符后實時搜索。這個問題的關鍵是 1 個搜索輸入負責搜索 1 個數據表 - 它不是一個搜索功能，輸入可以更新“頁面上的任何/每個表”，這是其他問題中常見的模式。1 個輸入：在這種情況下搜索 1 個表。我的計劃如下 - 第 (2) 點中引用的每個表都有一個 ID。我需要創建獨特的輸入。因此，如果我有 ID 為 , 的表，#table1我可以輕松創建：#table2#table3<input type="text" name="table1_search" id="table1_search"> <input type="text" name="table2_search" id="table2_search"> <input type="text" name="table3_search" id="table3_search"> 上面的代碼在等待輸入 >=3 個字符方面完成了我需要的操作。然后我正在執行一個名為的函數，該函數debouncedDraw傳遞一個包含search_idand的對象search_value。這些分別指的是輸入 ID 和值，例如，如果我在其中鍵入“foo”，#table1_search那么對象是：{search_id: 'table1_search', search_value: 'foo'}debouncedDraw函數看起來像這樣。這是使用lodash來限制函數可以觸發的速率。這里的重點是根據我幾年前在這里提出的一個問題來阻止它發出不必要的 ajax 請求：DataTables - 當一個新請求開始時終止 ajax 請求：var debouncedDraw = _.debounce(function (opts) { console.log(opts);}, 500);目前，這只是console.log上面給出的對象。我不確定在這一點上進行的最佳方式。我需要通過 ajax 重新運行/get-data.json，然后更新相應的表。我可以訪問請求數據并根據下劃線拆分數據search_id以計算出數據用于哪個表 ID（例如table1_searchtargets #table1）。然后我需要將這些數據寫回適當的表（#table1在這種情況下）。我忍不住想我會以一種復雜的方式來解決這個問題，并想知道 DataTables 本身是否有更好的方法來支持這一點？這似乎是一個非?；镜囊螅╯erverSide模式下的多個可搜索表）。但我找不到任何具體提到如何做到這一點的帖子。
2 回答
慕神8447489
TA貢獻1780條經驗 獲得超1個贊
我多年來經歷的所有“陷阱”都包含在下面的片段中。這是我在創建新數據表時經常使用的基本模板。您可以使用此模式在頁面上創建任意數量的數據表。
就個人而言，我會為每個表使用不同的 ajax url 路徑/路由，以便表邏輯位于后端的單獨文件中......但可以將所有數據邏輯放在一個后端文件中。我修改了我常用的模板以適應它。
<script> //I usually put the script section in the head tag
var table_1; //declare your table var here and initialize as a datatable inside document ready below.
$(document).ready(function() {
table_1 = $('#table_1').DataTable( {
dom: "Bfrtip",
ajax: {
url: "/get-data.json?table=table_1", //add query string var for backend routing
type: "POST" //use POST to not have to deal with url encoding various characters
},
serverSide: true,
searchDelay: 2000, // use this instead of custom debounce
processing: true, // optional visual indicator that a search has been sent to backend
lengthMenu: [ 10, 25, 50, 75, 100 ], // define per page limits. first value will be the default
buttons: [
"pageLength" // per page drop down button. i usually override/extend the default button
],
columns: [ // column definitions of json data fields
{ data: "col_1", title: "ID", width: "1%" }, // width: 1% makes col width as small as possible
{ data: "col_2", title: "Label 2", visible:false }, //visible: false allows you access to field data without displaying to user
{ data: "col_3", title: "Label 3", render: function ( data, type, row ) { //render allows combining of fields into single column
return data + ' <small>('+row.col_2+')</small>'; // data will be col_3 value. row.col_2 is how you reference col_2 value
} },
{ data: "col_4", title: "Label 4", searchable:false }, //searchable: false set this field to not be used in search
],
rowId: 'col_1' //sets the tr row id to the value in this column. useful for DOM and other manipulation later
} );
}
</script>
<table id="table_1" class="table table-striped table-bordered table-sm" style="width:100%"></table>
<!-- If you define title attributes in col definitions above you don't need to create html table headers/footers. Just an empty table tag will do. -->
使用此模式，您可以將數據表附帶的內置搜索輸入用于您的用例，并在所有表上進行服務器端處理。
我的瘋狂背后有一種方法，我試圖在每一行的腳本注釋中記錄下來。如果您對某事有任何疑問，請告訴我。我認為這是值得的賞金。
作為參考，在使用數據表開發新應用程序時，我基本上住在這個頁面https://datatables.net/reference/option/
編輯 1
在現有的 debounced drawTable 函數中，您可以執行以下操作：
function drawTable(id) {
$('#'+id).DataTable().ajax.url( 'get-data.json?table_id='+id+'&foo=bar' ); //update ajax url of existing dt - if necessary
$('#'+id).DataTable().search(search_input_val).draw(); // fire ajax request with value from your custom search input
}
我相當確定您需要將“搜索”設置為 true，但此方法才能正常工作。
編輯 2
我剛剛想到的另一種方式，不使用 dt 搜索。通過修改后的 url 傳遞所有數據并加載/重新加載。
$('#'+id).DataTable().ajax.url( 'get-data.json?table_id='+id+'&search=foo' ).load();
然后，如果您在輸入字段上使用按鈕單擊偵聽器或 onblur 偵聽器并觸發上述相同的命令，則可以擺脫所有去抖動的東西。
你見過這個嗎？https://datatables.net/reference/api/%24.fn.dataTable.util.throttle()
我以前從未使用過它，但它看起來像一個去抖動。頁面上的示例顯示它被用于 .search()
繁星淼淼
TA貢獻1775條經驗 獲得超11個贊
我已經實現了以下內容，但更喜歡更好的解決方案，因為我認為這不是有效的，而且絕對不是優雅的！
從問題中獲取代碼，我修改了 debounce 函數，如下所示：
var debouncedDraw = _.debounce(function (opts) {
// Destroy the existing DataTable.
$('#' + opts.search_region).DataTable().destroy();
// Re-run the drawTable method to get the new DataTable with the search results
drawTable(opts.search_region);
}, 500);
我介紹了一個名為的函數drawTable，它獲取 a 的 ID<table>并運行 DataTables 初始化代碼。還修改了 ajax 對象以考慮輸入到給定表 ID 的搜索關鍵字輸入中的任何內容：
function drawTable(id) {
$id = $('#'+id); // Convert string ID to jquery identifier
$id.DataTable({
// DataTable initialisation code as per question
ajax: {
data: {
table_id: id,
keywords: $('input[name="keywords_' + id + '"]').val() // search keywords for table_id
},
url: '/get-data.json',
},
// ... code as per question
});
}
已$.each()修改，以便它檢測每個<table>頁面加載的 ID 并調用drawTable：
$.each($('table'), function () {
drawTable($(this).attr('id'));
});
這“有效”是因為它在頁面加載時創建每個所需的 DataTable，并且還處理搜索。搜索輸入名稱已修改為以下格式：keywords_加上表的 ID，例如keywords_table1.
我認為這不是有效的，因為我不得不調用destroy我的 DataTable。根據文檔：
這會對頁面的性能造成非常顯著的影響，因為涉及到大量的計算和 DOM 操作，所以如果您可以避免這種情況并使用 API，那么我們強烈建議您這樣做！
但是，我這樣做的原因也與相同的文檔中給出的相同：
DataTables 不允許在初始化時以外的任何時間更改初始化選項。初始化后對表的任何操作都必須通過 API 完成
好吧，我沒有使用客戶端搜索功能，因為我必須在服務器端進行搜索。所以我不確定通過 API 操作表格是否真的會在這種情況下有所幫助。
有沒有更好的方法來實現這一目標？
- 2 回答
- 0 關注
- 213 瀏覽
添加回答
舉報
0/150
提交
取消