我們在上一章節中已經學習了DataTables在BootStrap框架中的使用方式和初始化。

Bootstrap框架—-DataTables列表示例

最終效果如圖:

Bootstrap是自動適配移動端的，在手機上查看效果如圖：

我們發現當數據有很多列時，會存在超出屏幕的可能。這時候表格表現為在屏幕范圍內可左右滑動。

我們還有另一種解決方案。

就是在移動端情況下隱藏部分列，點擊展開按鈕再展開。

最終效果如圖:

環境準備

DataTables列表移動端適配定義隱藏列的使用建立在上篇文件的基礎上

Bootstrap框架—-DataTables列表示例

主要需要的引用

注意事項

需要注意的是 js的引用有順序，否則會報找不到方法的各種錯誤。

順序是jQuery相關的js，bootstrap相關的js，datatables的js以及responsive的js，最后是datetimepicker的js。

實現方案

實現DataTables列表移動端適配定義隱藏列主要是通過dataTables.responsive.js實現的。

我們查看dataTables.responsive.js文件里配置如下。

Responsive.breakpoints = [

{ name: 'desktop', width: Infinity },

{ name: 'tablet-l', width: 1024 },

{ name: 'tablet-p', width: 768 },

{ name: 'mobile-l', width: 480 },

{ name: 'mobile-p', width: 320 }

];

分別表示在什么屏幕下顯示該列。

比如desktop表示在PC版大屏幕時才顯示該列，否則隱藏。

tablet-l表示1024的大小才顯示該列，否則隱藏。

以此類推。

所以修改的代碼只需要修改列頭th的class名即可，如下:

姓名電話性別時間操作

完整版JSP代碼

DataTables示例

--

男

女

開始

截止

查詢

新建

示例列表

姓名電話性別時間操作

總結

以上是生活随笔為你收集整理的bootstarp js设置列隐藏_Bootstrap框架----DataTables列表移动端适配定义隐藏列的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。