0
我使用引導程序數據表Datatables和引導程序taginput與typehead.js。我是新的引導數據表。將引導程序typeahead js與Bootstrap Datatable集成
這是我的引導程序數據表Example的佈局,請考慮Bootstrap標記輸入框在上面。
我想用自舉標記元素搜索數據表記錄。但不知何故,我無法搜索引導標籤。
在此先感謝。
我使用引導程序數據表Datatables和引導程序taginput與typehead.js。我是新的引導數據表。將引導程序typeahead js與Bootstrap Datatable集成
這是我的引導程序數據表Example的佈局,請考慮Bootstrap標記輸入框在上面。
我想用自舉標記元素搜索數據表記錄。但不知何故,我無法搜索引導標籤。
在此先感謝。
如果您從桌面上獲得的空數組開始,您可以通過替換內置的搜索框來做一些巧妙的事情。在我鏈接到我的例子不在乎列約一,在其他列需要一點點的格式:
var words = [];
var table = $('#example').DataTable({
"columns": [
null, {
"render": function(data, type, row) {
~words.indexOf(data) || words.push(data);
return data;
}
}, {
"render": function(data, type, row) {
var d = data.replace(/\, /g, " ");
~words.indexOf(d) || words.push(d);
return data.split(", ").join("<br/>");
}
}
],
"initComplete": function() {
var searchBox = $("#example_wrapper").find("input[type='search']");
var searchBoxHolder = searchBox.parent();
searchBox.empty().remove();
searchBoxHolder.append($("<input/>", {
"type": "text"
}).typeahead({
source: words,
afterSelect: function(word) {
table.search(word).draw();
}
}).on("keyup", function(x) {
if (words.indexOf($(x.target).val()) === -1) {
table.search($(x.target).val()).draw();
}
}));
}
});
基本上我們在這裏所做的是創建搜索項的空白陣列,然後迭代每個第二和第三個單元格,並將該術語添加到該數組(如果它不存在)。在第三個單元的情況下,我需要清除一些格式(額外的逗號)。然後我們得到原來的搜索框,它是父母。刪除原始文件並將新文件追加到父文件中。然後我們將其設置爲typeahead
以及搜索項的列表。我們需要確保它仍然像原來的一樣,因此我們添加了keyup
函數。我希望這是有道理的。
工作實例是here,希望有所幫助。
感謝您的回答..但我想建立在搜索框和boostrap標記兩個不同的文本框..感謝上面的幫助,它會給我幫助前進。 –
你如何繼續用ajax和json填充這張表? – iamchriswick