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实现下拉收缩(展开与折叠)特效
Dec 25 Javascript
固定表格行列(expression)在IE下适用
Jul 25 Javascript
JS随机漂浮广告代码具体实例
Nov 19 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
Apr 08 Javascript
3种js实现string的substring方法
Nov 09 Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
Dec 18 Javascript
Vue.js递归组件构建树形菜单
Dec 24 Javascript
koa中间件核心(koa-compose)源码解读分析
Jun 15 Javascript
Vue3不支持Filters过滤器的问题
Sep 24 Javascript
node.js爬虫框架node-crawler初体验
Oct 29 Javascript
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
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 基础教程(四)
2006/10/09 PHP
phplist及phpmailer(组合使用)通过gmail发送邮件的配置方法
2016/03/30 PHP
JavaScript中也使用$美元符号来代替document.getElementById
2010/06/19 Javascript
基于jquery的用鼠标画出可移动的div
2012/09/06 Javascript
DIV始终居中的js代码
2014/02/17 Javascript
什么是cookie?js手动创建和存储cookie
2014/05/27 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
Javascript对象Clone实例分析
2015/06/09 Javascript
搞定immutable.js详细说明
2016/05/02 Javascript
AngularJS基础 ng-switch 指令简单示例
2016/08/03 Javascript
解析预加载显示图片艺术
2016/12/05 Javascript
jquery与ajax获取特殊字符实例详解
2017/01/08 Javascript
jquery设置css样式的多种方法(总结)
2017/02/21 Javascript
angularJs在多个控制器中共享服务数据的方法
2018/09/30 Javascript
JavaScript中引用vs复制示例详析
2018/12/06 Javascript
实用Javascript调试技巧分享(小结)
2019/06/18 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
JS判断数组是否包含某元素实现方法汇总
2020/06/24 Javascript
python操作数据库之sqlite3打开数据库、删除、修改示例
2014/03/13 Python
Python实现句子翻译功能
2017/11/14 Python
python 动态加载的实现方法
2017/12/22 Python
Python图形绘制操作之正弦曲线实现方法分析
2017/12/25 Python
python中的字典操作及字典函数
2018/01/03 Python
解决python 无法加载downsample模型的问题
2018/10/25 Python
Django之模板层的实现代码
2019/09/09 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
草莓网美国官网:Strawberrynet USA
2016/12/11 全球购物
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
秋季开学典礼主持词
2014/03/19 职场文书
yy生日主持词
2014/03/20 职场文书
设计顾问服务计划书
2014/05/04 职场文书
2014年学校法制宣传日活动总结
2014/11/01 职场文书
体育教师个人总结
2015/02/09 职场文书
Nginx搭建rtmp直播服务器实现代码
2021/03/31 Servers