bootstrap table列和表头对不齐的解决方法


Posted in Javascript onJuly 19, 2019

我们在使用bootstraptable做表格展示时,有时需要固定表格的高度当数据超出高度会出现滚动条,这时有可能出现表头列和数据列对不齐。出现这个问题的原因是数据列出现了滚动条占了宽度,造成表头 数据 的div宽度不一样。

通过Chrome浏览器 f12,看到样式为 .fixed-table-header  .fixed-table-body .fixed-table-footer的3个div容器宽度不一样, .fixed-table-header  .fixed-table-footer这两个div没有滚动条。

解决方法:

bootstraptable在渲染完列表时会执行onPostBody事件,代码如下。

$('#dataGrid').bootstrapTable({ 
 method: 'post', 
 url: 'http://www.itxst.com/?ajax', 
 dataType: "json", 
 striped: true, //隔行变色 
 pagination: true, //底部显示分页码
 pageSize: 30, //每页显示行数
 pageNumber: 1, //页码
 pageList: [30, 50, 100, 200, 500], //每页显示数量选择器
 idField: "objectId", //主键字段 
 showColumns: true, //显示隐藏列 
 showRefresh: true, //刷新按钮 
 singleSelect: true, 
 search: false, 
 clickToSelect: true, 
 sidePagination: "server", 
 queryParams: queryParams, 
 queryParamsType: "limit", 
 toolbar: "#toolbar", //设置工具栏的Id 
 columns: column, //要显示的列
 silent: true, //刷新事件必须设置 
 formatLoadingMessage: function () { 
 return "it小书童正在加载中..."; 
 }, 
 formatNoMatches: function () { 
 return '未查询到结果'; 
 }, 
 onLoadError: function (data) { 
 
 }, 
 onClickRow: function (row) { 
 window.location.href = "/detail?id=" + row.objectId; 
 }, 
 onPostBody:function()
 {
 //重点就在这里,获取渲染后的数据列td的宽度赋值给对应头部的th,这样就表头和列就对齐了
 var header=$(".fixed-table-header table thead tr th");
 var body=$(".fixed-table-header table tbody tr td");
 var footer=$(".fixed-table-header table tr td");
 body.each(function(){
 header.width((this).width());
 footer.width((this).width());
 });
 }
});

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript数组深拷贝和浅拷贝的两种方法
Apr 16 Javascript
一个JavaScript操作元素定位元素的实例
Oct 29 Javascript
jquery事件preventDefault()方法用法实例
Jan 16 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
Aug 05 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
Jun 22 Javascript
js编写三级联动简单案例
Dec 21 Javascript
移动端利用H5实现压缩图片上传功能
Mar 29 Javascript
详解Webpack实战之构建 Electron 应用
Dec 25 Javascript
JS实现随机生成10个手机号的方法示例
Dec 07 Javascript
如何为你的JS项目添加智能提示与类型检查详解
Mar 12 Javascript
JS+CSS3实现的简易钟表效果示例
Apr 13 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
Aug 04 Javascript
JS开发 富文本编辑器TinyMCE详解
Jul 19 #Javascript
更强大的vue ssr实现预取数据的方式
Jul 19 #Javascript
bootstrap table.js动态填充单元格数据的多种方法
Jul 18 #Javascript
bootstrap table实现横向合并与纵向合并
Jul 18 #Javascript
微信小程序判断用户是否需要再次授权获取个人信息
Jul 18 #Javascript
Vue动态生成表格的行和列
Jul 18 #Javascript
vue通过数据过滤实现表格合并
Nov 30 #Javascript
You might like
php+mysql开源XNA 聚合程序发布 下载
2007/07/13 PHP
php+mysql数据库实现无限分类的方法
2014/12/12 PHP
如何使用php脚本给html中引用的js和css路径打上版本号
2015/11/18 PHP
php基于 swoole 实现的异步处理任务功能示例
2019/08/13 PHP
javascript中的undefined和not defined区别示例介绍
2014/02/26 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
jQuery中trigger()与bind()用法分析
2015/12/18 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
2016/07/11 Javascript
Bootstrap CSS布局之图像
2016/12/17 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
2017/12/12 Javascript
浅谈Webpack打包优化技巧
2018/06/12 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
2018/12/11 jQuery
vue+web端仿微信网页版聊天室功能
2019/04/30 Javascript
如何HttpServletRequest文件对象并储存
2020/08/14 Javascript
pandas带有重复索引操作方法
2018/06/08 Python
python爬虫爬取微博评论案例详解
2019/03/27 Python
如何使用Python多线程测试并发漏洞
2019/12/18 Python
python中导入 train_test_split提示错误的解决
2020/06/19 Python
基于Python正确读取资源文件
2020/09/14 Python
阿玛尼美妆加拿大官方商城:Giorgio Armani Beauty加拿大
2017/10/24 全球购物
The Outnet亚太地区:折扣设计师时装店
2019/12/05 全球购物
加拿大鞋网:Globo Shoes
2019/12/26 全球购物
学生自我鉴定范文
2013/10/04 职场文书
文明学生标兵事迹
2014/01/21 职场文书
酒店值班经理的工作职责范本
2014/02/18 职场文书
电工工作职责范本
2014/02/22 职场文书
外语系大学生自荐信范文
2014/03/01 职场文书
个人作风建设心得体会
2014/10/22 职场文书
2014年教研工作总结
2014/12/06 职场文书
2014年体育教学工作总结
2014/12/09 职场文书
国庆节慰问信
2015/02/15 职场文书
2015年质检工作总结
2015/05/04 职场文书
2016年优秀班主任先进事迹材料
2016/02/26 职场文书
OpenCV-Python实现图像平滑处理操作
2021/06/08 Python
Spring Security使用单点登录的权限功能
2022/04/03 Java/Android
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
2022/04/09 Javascript