我们在上一章节中已经学习了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示例
--
男
女
开始
截止
查询
新建
姓名电话性别时间操作
)
)
)
)
)
)
)
)
)
)