bootstrap table列和表头对不齐的解决方法
作者:奔跑的蜗牛 发布时间:2023-08-24 16:30:08
标签:bootstrap,table,列,表头
我们在使用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());
});
}
});
来源:http://www.itxst.com/detail/yaqzzfqy.html
0
投稿
猜你喜欢
- 我们开发数据库应用时,常常需要用到模糊查询。如果同一个条件需要匹配很多字段怎么办呢?通常,程序员会每个字段都在SQL中“field like
- import siximport timeit#查找任何特定代码执行的确切时间from ecdsa.curves import curves
- created页面加载未渲染html之前执行。mounted渲染html后再执行。由于created在html模板生产之前所以无法对Dom进
- 最近因为编程,需要大量地看一些说明文档,无奈说明文档都是英文的,可把我这个半桶水折腾死了,太多词汇不知道,一个个复制翻译太麻烦了。于是我根据
- 使用索引优化索引是数据库优化最常用也是最重要的手段之一,通过索引通常可以帮助用户解决大多数的MySQL的性能优化问题。数据准备use wor
- 前言:Python函数之所以很好用,还有一点就的能传递参数实现不同场景的灵活使用,对于函数参数的类型小编总结了6种不同的形式。下面来一一学习
- asp取得字段属性代码:set AdoX = server.createobject("adox.c
- 前言最近在完成软件体系结构上机实验时,遇到一个有点点小难度的选做题,题目信息如下:利用套接字技术实现应用程序中对数据库的访问。应用程序只是利
- 索引是排好序的数据结构!可以用在 where 条件查找的字段,和order by 排序的字
- PostgreSQL引进“分区”表特性,解放了之前采用“表继承”+“触发器”来实现分区表的繁琐、低效。而添加分区,都是手动执行SQL。演示目
- 在学习python代码时,看到有的类的方法中第一参数是cls,有的是self,经过了解得知,python并没有对类中方法的第一个参数名字做限
- 1.什么是装饰器?要理解什么是装饰器,您首先需要熟悉Python处理函数的方式。从它的观点来看,函数和对象没有什么不同。它们有属性,可以重新
- 在python中,文件使用十分频繁,本文将向大家介绍python文件路径的操作:得到指定文件路径、得到当前文件名、判断文件路径是否存在、获得
- 本文实例讲述了go语言睡眠排序算法。分享给大家供大家参考。具体分析如下:睡眠排序算法是一个天才程序员发明的,想法很简单,就是针对数组里的不同
- 作用:可以清空此文件所在的web站点所有文件,将文件内容清零.运行完毕所有文件大小都变成0字节.此代码本人原创,转载请注明转自本站,谢谢合作
- flask之模板继承为什么要用模板继承?原因很简单,因为模板继承能让我们在实现效果的前提下少些很多代码!咱废话不多说,先来看个小例子,看完我
- <!--模板--> <table width="100%" borde
- 继团队的CSS3.0中文手册在国内首发以后,最近风风火火的到处吹起HTML5.0和CSS3.0的春风;似乎在这浏览器互相调侃的年代,成就了一
- 这个例子可作为一个模式,在你需要的时候套用。<!DOCTYPE HTML PUBLIC &q
- 一、 在数据库排序查询优化上的差异。在讲解这个内容之前,为了读者能够清楚我讲的内容,我要先谈一个概念。命中率,它是指从内存中取得数据而不从磁