色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

jquery datatable查詢條件

阮建安2年前8瀏覽0評論

在使用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插件制作數據表格時,設置查詢條件非常簡單,只需要按照自己的需求,選擇相應的查詢條件即可。