bootstrap怎麼做到點選表格表頭排序

使用Bootstrap可以快速製作出響應式網頁，有時候專案中會用到Bootstrap點擊表格table的表頭列頭實現升降序排序的功能，本文詳細記錄了Bootstrap table實現表格表頭欄位頂部列頭升降序排序的步驟。

1、引入Bootstrap。

從Bootstrap官網下載最新版的Bootstrap框架，引入專案中用到的CSS樣式和js腳本。

其中，有三個基礎檔案是必須要引進的：

①bootstrap.min.css

②jquery.min.js

#③bootstrap.min. js

注意，②必須在③之前引入，因為bootstrap腳本依賴jQuery函式庫。

2、引入DataTables外掛程式。

由於我們要實現的功能是點擊Bootstrap table表頭列頭切換升降序排序，所以我們在開發過程中選取這個優秀的表格視圖外掛程式。

專案中使用DataTables，只需要引入三個檔案：

①jQuery

②DataTables.js

③DataTables.css

#3、建立Bootstrap table容器DOM。

Bootstrap提供多個樣式的table類，可依照自己的需求添加，例如下圖中我寫的表格class="table table-striped table-bordered"，這個Bootstrap table的DOM就是點選表頭列頭切換升降序排序的表格。

4、動態產生Bootstrap table網格。

透過DataTables定義DOM為資料表控制元素的網格佈局， "sDom"的屬性值可以依照實際項目需要寫，這個Bootstrap table網格就是後面要用到點選表頭列頭切換升降序排序的網格。

5、擴充DataTable「sWrapper」類別。

透過"sWrapper": "dataTables_wrapper form-inline"即可擴展sWrapper類，以資料表的形式包裝元素使元素內聯而不是作為一個區塊，從而實現點擊Bootstrap table的表頭列頭實現升降序排序功能。

6、Bootstrap table點擊表格表頭列頭切換升降序排序。

由於Bootstrap廢棄了tablesorter作為表庫和結果排序的類，所以我們自己編寫相關CSS樣式實現效果。

實作效果如下：

#更多Bootstrap相關技術文章，請造訪Bootstrap教學欄位進行學習！

以上是bootstrap怎麼做到點選表格表頭排序的詳細內容。更多資訊請關注PHP中文網其他相關文章！