引用部分
- Bootstrap CSS
html
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
位置:放在 `<head>` 中,
- DataTables CSS
html
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
位置:放在 `<head>` 中,已正確引用。
- jQuery
html
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
位置:放在 `<body>` 結尾處,已正確引用。
- Bootstrap JS
html
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
位置:放在 `<body>` 結尾處,已正確引用。
- DataTables JS
html
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
位置:放在 `<body>` 結尾處,已正確引用。
- DataTables 語言檔
javascript
language: {
url: "https://cdn.datatables.net/plug-ins/1.13.6/i18n/zh-HANT.json"
}
位置:在 DataTables 初始化的 `language` 屬性中,已正確設定。
---
建議補充
- 表格的 `id` 屬性
- 確保所有需要初始化 DataTables 的表格都有唯一的 `id`,例如:
html
<table id="shipping-table" class="table table-bordered table-striped table-hover">
- DataTables 初始化
- 確保每個需要使用 DataTables 的表格都正確初始化,例如:
javascript
$('#shipping-table').DataTable({
paging: true,
searching: true,
ordering: true,
language: {
url: "https://cdn.datatables.net/plug-ins/1.13.6/i18n/zh-HANT.json"
}
});
- CSS 自訂樣式
- 如果需要自訂 DataTables 的樣式,可以新增一個自訂的 CSS 檔案,並在 `<head>` 中引用,例如:
html
<style>
.dataTables_wrapper .dataTables_paginate .paginate_button {
color: #007bff; /* 自訂分頁按鈕顏色 */
}
</style>
今日使用時發生的狀況記錄
在 <table id="shipping-table" class="table table-bordered table-striped table-hover"> ,忘記加上 class 導致無法運作。