jQuery Datatables是一個非常流行的JavaScript庫,用于在網頁上展示數據表格。它內置了許多強大的功能,包括排序、搜索、分頁等。其中,過濾功能是它最為常用的功能之一。
過濾功能能夠幫助用戶通過關鍵字來搜索數據表格中的特定內容。在Datatables中,過濾功能是通過使用search()方法來實現的。該方法接受一個字符串參數,表示要搜索的關鍵字。下面是一個使用search()方法的簡單示例:
$('#myTable').DataTable().search('關鍵字').draw();
上述代碼會在ID為myTable的元素上應用Datatables,并根據指定的關鍵字進行過濾。調用draw()方法之后,Datatables會重新渲染表格,顯示與搜索條件匹配的行。
除了基本的搜索功能之外,Datatables還支持高級搜索,可以在搜索過程中使用復雜的邏輯操作符,例如“與”、“或”、“非”等。要開啟高級搜索功能,可以使用列過濾器(Column filters)。列過濾器是一種將搜索條件應用于特定列的過濾器。它可以通過在表頭中添加輸入控件來實現。下面是添加列過濾器的示例代碼:
$('#myTable').DataTable({ initComplete: function () { this.api().columns().every(function () { var column = this; var select = $('') .appendTo($(column.header()).empty()) .on('change', function () { var val = $.fn.dataTable.util.escapeRegex( $(this).val() ); column .search(val ? '^' + val + '$' : '', true, false) .draw(); }); column.data().unique().sort().each(function (d, j) { select.append('') }); }); } });
該示例代碼會在ID為myTable的元素上應用Datatables,并創建一個列過濾器。每個列過濾器都包含一個下拉框,當用戶選擇某個選項時,Datatables會使用該選項來過濾相應的列。
總之,Datatables的過濾功能是一個十分強大的工具,它可以幫助用戶輕松地搜索和過濾數據表格中的內容。通過使用搜索和列過濾器,用戶可以更加高效地瀏覽和管理數據。