我们在上一章节中已经学习了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代码