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 相关文章推荐
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
Aug 19 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
May 08 Javascript
javascript的正则匹配方法学习
Feb 24 Javascript
AngularJS使用指令增强标准表单元素功能
Jul 01 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
Feb 23 Javascript
vue bootstrap小例子一枚
Jun 09 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
Jul 20 Javascript
简单实现节流函数和防抖函数过程解析
Oct 08 Javascript
vue 实现特定条件下绑定事件
Nov 09 Javascript
重置Redux的状态数据的方法实现
Nov 18 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
Apr 07 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
Sep 02 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
我的论坛源代码(五)
2006/10/09 PHP
PHP中最容易忘记的一些知识点总结
2013/04/28 PHP
php微信公众开发之获取周边酒店信息的方法
2014/12/22 PHP
PHP实现股票趋势图和柱形图
2015/02/07 PHP
codeigniter发送邮件并打印调试信息的方法
2015/03/21 PHP
php抽奖概率算法(刮刮卡,大转盘)
2020/04/17 PHP
PHP实现倒计时功能
2020/11/16 PHP
jquery 图片预加载 自动等比例缩放插件
2008/12/25 Javascript
prototype与jquery下Ajax实现的差别
2009/09/13 Javascript
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
js动态加载以及确定加载完成的代码
2011/07/31 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
2013/01/03 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
2013/04/02 Javascript
jQuery之折叠面板的深入解析
2013/06/19 Javascript
JQuery实现防止退格键返回的方法
2015/02/12 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
2015/06/01 Javascript
JavaScript实现的CRC32函数示例
2016/11/23 Javascript
js实现仿购物车加减效果
2017/03/01 Javascript
使用Javascript简单计算器
2018/11/17 Javascript
vue 表单验证按钮事件交由父组件触发的方法
2018/12/17 Javascript
JavaScript实现与使用发布/订阅模式详解
2019/01/19 Javascript
vue使用map代替Aarry数组循环遍历的方法
2020/04/30 Javascript
详解Python如何获取列表(List)的中位数
2016/08/12 Python
Python利用matplotlib生成图片背景及图例透明的效果
2017/04/27 Python
python程序 线程队列queue使用方法解析
2019/09/23 Python
python实现高斯(Gauss)迭代法的例子
2019/11/20 Python
详解python爬取弹幕与数据分析
2020/11/14 Python
UNIONBAY官网:美国青少年服装品牌
2019/03/26 全球购物
煤矿班组长的职责
2013/12/25 职场文书
酒店个人求职信范文
2014/01/25 职场文书
检查接待方案
2014/02/27 职场文书
大学四年个人自我小结
2014/03/05 职场文书
产品推广策划方案
2014/05/10 职场文书
旅游安全责任协议书
2016/03/22 职场文书
Nginx反向代理至go-fastdfs案例讲解
2021/08/02 Servers
CSS list-style-type属性使用方法
2023/05/21 HTML / CSS