在使用jQuery DataTable插件制作數據表格的時候,往往需要添加查詢條件來篩選出所需要的數據。在DataTable中添加查詢條件非常簡單,只需要在table元素上添加class為data-table的類,并在初始化DataTable的時候添加搜索框即可。
<table class="data-table"> <thead> <tr> <th>姓名</th> <th>年齡</th> <th>性別</th> <th>入職時間</th> </tr> </thead> <tbody> <tr> <td>張三</td> <td>24</td> <td>男</td> <td>2020-01-01</td> </tr> <tr> <td>李四</td> <td>28</td> <td>男</td> <td>2019-06-01</td> </tr> <tr> <td>王五</td> <td>22</td> <td>女</td> <td>2020-08-01</td> </tr> </tbody> </table> <script> $('.data-table').DataTable({ searching: true, // 是否開啟搜索 searchDelay: 500, // 搜索延遲時間 }); </script>
在上面的代碼中,我們添加了class為data-table的類,表示這是一個數據表格,并在初始化DataTable的時候設置了searching為true,表示開啟搜索功能,searchDelay為500ms,表示搜索延遲時間為0.5秒。
除了這些常用的選項之外,DataTable還有很多其他的查詢條件設置,例如設置搜索占位符placeholder,設置搜索的列searchCols,設置搜索正則表達式regex,設置搜索事件searchCallback等。根據不同的需求,可以自由設置查詢條件。
<script> $('.data-table').DataTable({ searching: true, searchDelay: 500, language: { searchPlaceholder: '請輸入搜索內容', }, searchCols: [ null, { search: 'male' }, { search: '2020' }, null, ], searchRegex: true, searchCallback: function(){ console.log('搜索事件觸發'); } }); </script>
在上面的代碼中,我們通過language選項設置了搜索框的占位符為“請輸入搜索內容”,通過searchCols設置了第二列搜索關鍵字為“male”,第三列搜索關鍵字為“2020”,通過searchRegex設置了搜索開啟正則表達式搜索,通過searchCallback設置了搜索事件回調函數。
總之,在使用jQuery DataTable插件制作數據表格時,設置查詢條件非常簡單,只需要按照自己的需求,選擇相應的查詢條件即可。