系統專案的開發經常會有對表格篩選、排序、分頁的功能,藉由使用 DataTables 前端元件就能夠快速解決這個需求。
說明
安裝方式
Visual Studio 使用 libman 安裝
"libraries": [
{
"library": "datatables.net-bs4@1.10.24",
"destination": "lib/datatables.net-bs4/",
"files": [
"dataTables.bootstrap4.min.js",
"dataTables.bootstrap4.min.css"
]
},
{
"library": "datatables@1.10.21",
"destination": "lib/datatables/",
"files": [
"js/jquery.dataTables.min.js"
]
}
]
引用方式
在要使用的 View Include 相關的 js script,並且要根據 Table 的 ID 進行 init DataTables
@section scripts{
<script src="~/lib/datatables/js/jquery.dataTables.min.js"></script>
<script src="~/lib/datatables.net-bs4/dataTables.bootstrap4.min.js"></script>
<script>
$(document).ready(function () {
$('#tableId').DataTable({
"searching": true,
"pageLength": 50,
"bLengthChange": false,
"order": [[ 0, "desc" ]], // Default Order
"columnDefs": [
{ "targets": 0, "orderable": true },
{ "targets": 1, "orderable": false },
{ "targets": 1, "searchable": false },
],
"language": {
"lengthMenu": "Display _MENU_ records per page",
"zeroRecords": "沒有任何查詢結果,請調整搜尋條件後再執行。",
"info": "搜尋共有 _TOTAL_ 個項目",
"infoEmpty": "",
"infoFiltered": "(filtered from _MAX_ total records)"
}
});
});
</script>
}
此外 language 也可以用外指 JS files 的方式設定:
"language": {
"url": "@Url.Content("~/Scripts/DataTables/traditional-chinese.json")"
},
{
"processing": "處理中...",
"loadingRecords": "載入中...",
"lengthMenu": "顯示 _MENU_ 項結果",
"zeroRecords": "沒有符合的結果",
"info": "顯示第 _START_ 至 _END_ 項結果,共 _TOTAL_ 項",
"infoEmpty": "顯示第 0 至 0 項結果,共 0 項",
"infoFiltered": "(從 _MAX_ 項結果中過濾)",
"infoPostFix": "",
"search": "搜尋:",
"paginate": {
"first": "第一頁",
"previous": "上一頁",
"next": "下一頁",
"last": "最後一頁"
},
"aria": {
"sortAscending": ": 升冪排列",
"sortDescending": ": 降冪排列"
}
}
Table 的使用要注意必須包含 Thead
與 Tbody
才能正確解析。
<table class="table table-bordered table-striped" id="EmpTable">
<thead>
<tr>
<th>標頭</th>
</tr>
</thead>
<tbody>
<tr>
<td>資料</td>
</tr>
</tbody>
</table>