DataTable在Bootstrap Tab选项卡中表头缩在一起的问题解决
来源:互联网 发布:源码平台 编辑:程序博客网 时间:2024/06/06 13:51
最近公司做项目的时候遇到这样一个问题,就是在Bootstrap选项卡中使用Data Table的时候,样式什么的都正确,但是表头错位,找了半天才找到原因,分享给大家解决方案。
原因是这样的,在选项卡中使用DataTables的时候,要首先判断当前选项卡是否显示,要在显示之后再进行DataTables的初始化,否则DataTables会找不到对应的宽高,从而造成表头缩在一起的样式。废话不多说,上代码:
如上图,我的解决方案是给Tab加一个click监听事件,判断当点击了相应有DataTables的选项卡时,先让这个选项卡显示,然后判断DataTables是否初始化,没有则进行初始化操作,否则自适应一下表格。这里有一个更好的方法就是使用Bootstrap Tab的shown事件,大家可以自己探索下!
2 0
- DataTable在Bootstrap Tab选项卡中表头缩在一起的问题解决
- bootstrap的tab选项卡
- bootstrap之Tab选项卡
- bootstrap开发tab选项卡事例
- 设置网页在浏览器Tab选项卡上的图标
- bootstrap TAB选项卡鼠标经过滑动门效果
- 超简易——bootstrap可关闭tab选项卡
- Bootstrap基础18——选项卡tab
- 简单的Tab选项卡
- 竖排的Tab选项卡
- Qt的Tab选项卡
- Qt的Tab选项卡
- Qt的Tab选项卡
- Qt的Tab选项卡
- tab选项卡的应用
- Jquery Easyui Tab中表单重复提交问题解决
- Bootstrap的Datatable详解
- Bootstrap的datatable控件
- GraphicsView Framework图形视图框架(翻译)
- spring-data-redis队列
- mysql基础---存储过程及变量定义(十)
- JSON.parse()和JSON.stringify()
- Java CyclicBarrier
- DataTable在Bootstrap Tab选项卡中表头缩在一起的问题解决
- 长难句解析
- linux命令大全——网络通信(一)
- springMVC学习笔记(九) ---- 总结
- 群聊协议发送的真正的(Message、IQ、presence)等 xmpp(一)
- MVC框架模式总结
- Yii2.0-advanced-10—数据库操作4(AR条件查询where)
- 关于润乾自定义函数报错的问题
- 浅谈移动端自动化测试框架和工具