使用 DataTables 與 Bootstrap 時需要注意的事項

更新於 發佈於 閱讀時間約 5 分鐘


引用部分

  1. 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>` 中,


  1. DataTables CSS
html

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">

位置:放在 `<head>` 中,已正確引用。


  1. jQuery
html

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

位置:放在 `<body>` 結尾處,已正確引用。


  1. Bootstrap JS
html

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

位置:放在 `<body>` 結尾處,已正確引用。


  1. 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>` 結尾處,已正確引用。


  1. DataTables 語言檔
javascript

language: {

url: "https://cdn.datatables.net/plug-ins/1.13.6/i18n/zh-HANT.json"

}

位置:在 DataTables 初始化的 `language` 屬性中,已正確設定。


---

建議補充

  1. 表格的 `id` 屬性

- 確保所有需要初始化 DataTables 的表格都有唯一的 `id`,例如:

html

<table id="shipping-table" class="table table-bordered table-striped table-hover">


  1. 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"

}

});


  1. 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 導致無法運作。

留言
avatar-img
留言分享你的想法!
avatar-img
夢翔心岩 — 展翼追夢,心如磐石。
0會員
2內容數
熱愛學習,贏得財富,取得豐盛的人生選擇權。
你可能也想看
Thumbnail
在本章中,我們探討了CSS Grid佈局的基本概念和應用。CSS Grid提供了一個強大而靈活的二維佈局系統,使得處理複雜的網頁佈局變得更加簡單和直觀。我們學習了如何設置Grid容器和Grid項目,以及如何使用各種Grid屬性來定義和管理佈局。
Thumbnail
在本章中,我們探討了CSS Grid佈局的基本概念和應用。CSS Grid提供了一個強大而靈活的二維佈局系統,使得處理複雜的網頁佈局變得更加簡單和直觀。我們學習了如何設置Grid容器和Grid項目,以及如何使用各種Grid屬性來定義和管理佈局。
Thumbnail
CSS 盒模型是理解和設計網頁佈局的核心概念。它包括元素的內容、填充、邊框和外邊距。
Thumbnail
CSS 盒模型是理解和設計網頁佈局的核心概念。它包括元素的內容、填充、邊框和外邊距。
Thumbnail
這節課的學習目標是了解 CSS 的基本語法結構和使用方法。
Thumbnail
這節課的學習目標是了解 CSS 的基本語法結構和使用方法。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
使用靜態檔案下載 Bootstrap 的原因主要有以下幾點: 客製化:當你下載了 Bootstrap 的靜態檔案,你可以根據自己的需求來修改這些檔案。例如,你可以改變預設的顏色、字型大小、間距等,使其更符合你的網站風格。這是直接使用 CDN 所無法做到的。 效能優化:如果你的網站只使用 Boot
Thumbnail
使用靜態檔案下載 Bootstrap 的原因主要有以下幾點: 客製化:當你下載了 Bootstrap 的靜態檔案,你可以根據自己的需求來修改這些檔案。例如,你可以改變預設的顏色、字型大小、間距等,使其更符合你的網站風格。這是直接使用 CDN 所無法做到的。 效能優化:如果你的網站只使用 Boot
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
User Input & Tables 的使用
Thumbnail
User Input & Tables 的使用
Thumbnail
CSS 的繼承性是開發網頁樣式時的一個重要概念,它使得樣式設計更加靈活和高效,有助於提高程式碼的可讀性、一致性和可重用性,並加快開發速度,從而提供更好的開發體驗。
Thumbnail
CSS 的繼承性是開發網頁樣式時的一個重要概念,它使得樣式設計更加靈活和高效,有助於提高程式碼的可讀性、一致性和可重用性,並加快開發速度,從而提供更好的開發體驗。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News