溫馨提示×

jQuery表格插件datatables用法詳解

小云
128
2023-08-09 14:55:00
欄目: 編程語言

DataTables是一個強(qiáng)大的jQuery表格插件，可以幫助我們在網(wǎng)站上創(chuàng)建交互性的表格。以下是DataTables的用法詳解：

  1. 引入jQuery和DataTables的相關(guān)文件。在HTML文件的<head>標(biāo)簽中添加以下代碼：
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
  1. 創(chuàng)建HTML表格。在HTML文件中添加一個<table>元素，為表格設(shè)置一個唯一的ID，例如：
<table id="myTable">
<thead>
<tr>
<th>列標(biāo)題1</th>
<th>列標(biāo)題2</th>
<th>列標(biāo)題3</th>
</tr>
</thead>
<tbody>
<tr>
<td>數(shù)據(jù)1</td>
<td>數(shù)據(jù)2</td>
<td>數(shù)據(jù)3</td>
</tr>
<tr>
<td>數(shù)據(jù)4</td>
<td>數(shù)據(jù)5</td>
<td>數(shù)據(jù)6</td>
</tr>
...
</tbody>
</table>
  1. 初始化DataTables。在JavaScript文件中，使用以下代碼初始化DataTables：
$(document).ready(function() {
$('#myTable').DataTable();
});
  1. 可選配置。DataTables提供了許多可選的配置選項(xiàng)，可以根據(jù)需要進(jìn)行配置。例如，可以設(shè)置每頁顯示的行數(shù)：
$(document).ready(function() {
$('#myTable').DataTable({
"paging": true,
"lengthMenu": [10, 25, 50, 75, 100]  // 設(shè)置每頁顯示的行數(shù)選項(xiàng)
});
});
  1. 添加搜索功能?？梢栽诒砀裆戏教砑右粋€搜索框，用于搜索表格中的數(shù)據(jù)。在HTML文件中添加一個<input>元素，為其設(shè)置一個唯一的ID，例如：
<input type="text" id="searchInput" placeholder="搜索...">

然后在JavaScript文件中添加以下代碼來實(shí)現(xiàn)搜索功能：

$(document).ready(function() {
var table = $('#myTable').DataTable();
$('#searchInput').on('keyup', function() {
table.search(this.value).draw();
});
});
  1. 添加分頁功能。DataTables默認(rèn)會將表格分成多頁顯示，可以通過設(shè)置paging選項(xiàng)來啟用或禁用分頁功能。例如，禁用分頁功能：
$(document).ready(function() {
$('#myTable').DataTable({
"paging": false
});
});

以上就是DataTables的用法詳解。通過使用DataTables，我們可以輕松地在網(wǎng)站上創(chuàng)建交互性的表格，并添加搜索功能和分頁功能，提供更好的用戶體驗(yàn)。

0 踩