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
投稿
猜你喜欢
- 那天突然的一个灵感,是针对防盗链的。正常上传的文件,若被人盗链则增加了自己服务器的负担,上次164.cc就因此被挂。然后想想对策,目前各类防
- 今天在 ajaxian 上看到一篇文章,名为 Five Ajax Anti-pattern ,觉得讲得比较有道理,现粗略翻译一下,加一些自己
- WebSocket的作用WebSock其实在平常使用,我们是时常见到的,用于实时通讯,例如我们常用的实时聊天、服务端向客户端消息推送、也可以
- GetObject 函数返回对文件中 Automation 对象的引用。GetObject([pathname] [, class])参数P
- 【原文地址】 Tip/Trick: How to upload a .SQL file to a Hoster and
- 本文给出了MySQL数据库中定义外键的必要性、具体的定义步骤和相关的一些基本操作,供大家参考!定义数据表假如某个电脑生产商,它的数据库中保存
- 查了查《VBSCRIPT 速查手册》InstrRev的用法:InstrRev函数,功能:返回某字符串在另一个字符串中出现的从结尾计起的位置语
- 1. 停应用层的各种程序。 2. 停oralce的监听进程: $lsnrctl stop 3. 在独占的系统用户下,备份控制文件: SQL&
- 这个主要应用于,获取用户输入的时候,防止用户不小心,多输入了一个空格,导致验证无法通过,多用于用户名跟密码的,好多情况下,大家复制的winr
- image.jsp------------------------------生成随机验证码图片的Jsp页面 代码如下: <
- XML(可扩展标记语言)已成为Web应用中数据表示和数据交换的标准,随着Internet的快速发展,尤其是电子商务,Web服务等应用的广泛使
- 我想大多数的人在编写ASP程序的时候,都碰到过类似的错误信息: Error Number -> 
- 技巧1XmlNode.InnerText与.InnerXml的区别是:前者将内容中的<和>分别变成<和>,因此,希望
- 如何在页面中快捷地添加翻页按钮? 先编写一个nextprev.inc文件,再将代码<
- 如何在网上查找链接? 见下:findlinks.html<html><head>
- 摘要:现代网站和web应用程序趋向于依赖客户端的大量的javascript来提供丰富的交互。特别是通过不刷新页面的异步请求来返回数据或从服务
- 在异步应用程序中发送和接收信息时,可以选择以纯文本和 XML 作为数据格式。掌握 Ajax 的这一期讨论另一种有用的数据格式 JavaScr
- JavaScript中的定时器大家基本在平时的开发中都遇见过吧,但是又有多少人去深入的理解其中的原理呢?下面我们就来分析一下定时器的实现原理
- 我们一般采用photoshop等做图工具制作电视扫描线效果图片:首先做一个黑白相间的图案,然后用这个图案进行填充,再调整图层的模式或者透明度
- 如果你想进一步了解如何用JavaScript来为网页添加交互性的话,你也许已经听过JavaScript的事件代理(event delegat