jQuery DataTable是一款非常方便的JavaScript數據表格插件,它提供了功能強大的表格交互和數據操作,可以讓我們快速地實現查詢、排序、篩選等功能。下面我們就來看一下如何使用jQuery DataTable進行查詢。
首先,我們需要引入jQuery和jQuery DataTable的相關文件:
<!-- 引入jQuery庫 -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<!-- 引入jQuery DataTable庫 -->
<link rel="stylesheet" type="text/css" >
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
接下來,我們需要將數據加載到表格中:
<table id="example">
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
</thead>
<tbody>
<tr>
<td>張三</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
</tr>
<tr>
<td>王五</td>
<td>30</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(function(){
//DataTable數據表格
$('#example').dataTable({
"language": {
"url": "http://cdn.datatables.net/plug-ins/1.10.20/i18n/Chinese.json"http://中文
}
});
});
</script>
最后,我們就可以通過DataTable提供的API進行查詢操作,例如:
<input type="text" id="searchText"/><button id="searchBtn">查詢</button>
$('#searchBtn').click(function(){
var searchText = $('#searchText').val();
// DataTable實例化對象
var table = $('#example').DataTable();
table.search(searchText).draw();//查詢并繪制結果
})
以上就是使用jQuery DataTable進行查詢的簡單介紹,希望對大家有所幫助。