我試圖在點擊相關元素時激活每列的搜索。
我設法點擊了搜索框，但它不執行搜索
我不是 javascript 和 jQuery 的專家，但這是我的代碼：
// Setup - add a text input to each footer cell
$('#DataTable tfoot th').each(function () {
var title = $(this).text();
$(this).click(function (event) {
$(this).html('<input type="text" placeholder="Search ' title '" />');
$(this).unbind('click');
});
});
// DataTable
var table = $('#DataTable').DataTable({
initComplete: function () {
// Apply the search
this.api().columns().every(function () {
var that = this;
$('input', this.footer()).on('keyup change clear', function () {
if (that.search() !== this.value) {
that
.search(this.value)
.draw();
}
});
});
}
});
有沒有辦法讓代碼更短？
謝謝
uj5u.com熱心網友回復：
輸入在您將keyup change clear事件處理程式附加到它的點上不存在。您需要改用委托事件。
initComplete: function() {
this.api().columns().every(function() {
var that = this;
$(this.footer()).on('keyup change clear', 'input', function() {
if (that.search() !== this.value) {
that.search(this.value).draw();
}
});
});
}
您可以使用jQuery 的one方法來附加一個只會被呼叫一次的事件處理程式。您還應該盡可能避免為同一輸入創建多個 jQuery 包裝器。
$('#DataTable tfoot th').each(function () {
var $this = $(this);
$this.one("click", function (event) {
$this.empty().append($('<input/>').attr("type", "search").attr("placeholder", "Search " $this.text()));
});
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/379025.html
標籤：javascript 查询 数据表