jQuery DataTable是一個非常強大的插件,它可以讓你快速創建一個漂亮,易于使用的表格。該插件提供了多項高級功能,例如:排序、分頁、過濾、導出等。其中的過濾功能可以幫助用戶快速檢索到他們需要的信息。
使用jQuery DataTable的過濾功能非常簡單。你只需要在你的HTML代碼中添加一個輸入框,然后在插件的初始化代碼中設置一個搜索選項即可。下面是具體的代碼實現:
<input type="text" id="search" placeholder="Search..."> <table id="example"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> </table> <script> $(document).ready(function() { var table = $('#example').DataTable({ // 設置搜索選項 searching: true, // 設置語言 language: { search: "_INPUT_", searchPlaceholder: "Search records" } }); // 綁定搜索框 $('#search').on('keyup', function() { table.search(this.value).draw(); }); }); </script>
上述代碼中的input標簽就是我們用來搜索的輸入框。而我們使用了Datatable插件來初始化我們的表格,設置了搜索選項和語言選項。然后我們對搜索框使用keyup事件進行監聽,每當用戶在搜索框中輸入時,我們就對表格進行搜索操作。最后,我們使用draw()方法來重繪表格,從而使搜索結果得以更新。
總之,使用jQuery DataTable進行檢索操作非常簡單。只需要幾行代碼就可以讓我們的表格擁有強大的搜索功能。如果你想進一步學習如何使用jQuery DataTable,請參考官方文檔。