bootstarp js设置列隐藏_Bootstrap框架----DataTables列表移动端适配定义隐藏列

我们在上一章节中已经学习了DataTables在BootStrap框架中的使用方式和初始化。

Bootstrap框架—-DataTables列表示例

最终效果如图:

Bootstrap是自动适配移动端的，在手机上查看效果如图：

我们发现当数据有很多列时，会存在超出屏幕的可能。这时候表格表现为在屏幕范围内可左右滑动。

我们还有另一种解决方案。

就是在移动端情况下隐藏部分列，点击展开按钮再展开。

最终效果如图:

环境准备

DataTables列表移动端适配定义隐藏列的使用建立在上篇文件的基础上

Bootstrap框架—-DataTables列表示例

主要需要的引用

注意事项

需要注意的是 js的引用有顺序，否则会报找不到方法的各种错误。

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