datatables在tab切换时出现表头错位问题

于 2020-06-06 18:35:53 发布
阅读量682 收藏
点赞数 2
分类专栏： datatables 文章标签： datatables
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42217154/article/details/106591786
版权

解决办法：

在tab切换时，加上如下一段代码就可以了。

$.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();

比如 

 

 

麻辣_水煮鱼
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于ElementUI中table组件的column过多出现header与body错位的问题
m943917709的博客
08-28 1788
在使用elementUI的table组件时，很赞赏组件的丰富性，充分考虑到了使用者的各种稀奇古怪的需求，但是也会遇到一些不尽人意的小bug 今天我就遇到了在动态渲染column的时候，由于column过多，出现了滚动条，此时滚动越往后header与body就会出现不同程度的错位，而且只有在分辨率>125%的时候出现,调为100%的话就没事了，其他比例的分辨率也会不同几率的出现这个问题 首先看文档有没有解决方案 看描述的话应该能解决这个问题吧，虽然不是由隐藏切换的，但是动态添加应该也算吧，
datatable插件应用于tab切换出现表头错位问题
jiang_mingyi的博客
06-14 8905
场景描述：有一个tab切换，共两个页面，每个页面里都有一个table，并且采用了datatable插件。 问题：有一个table在初始化的时候，头部布局混乱。如图： 原因所在：tab切换前，有一个页面的display是none，发现只要原来是block的都没有问题，只要是none就有问题。检查元素发现，datatable有一个div（类名为dataTables_scrollHeadInner
jquery datatable设置垂直滚动后，表头(th)错位问题
weixin_30521161的博客
04-18 1278
jquery datatable设置垂直滚动后，表头(th)错位问题 问题描述： 我在datatable里设置：”scrollY”: ‘300px’,垂直滚动属性后，表头的宽度就会错位，代码如下： <!-- HTML代码 --> <table id="demo" class="table" cellspacing="0" width="1...
datatables之tab切换(添加,删除)
cyyy1223的博客
12-10 3710
对于tab切换的表格如何利用datatables插件进行ajax数据获取，如果表格过多，数据过多我们完全可以利用ajax一次获取所有的数据，再将数据分配到不同的表格中
Datatables表头错乱问题
几多心跳
11-03 4877
前言：       之前在项目中用过无数次Datatables和Bootstrap，并且屡试不爽，但今天在将二者结合使用当第二个tab页面中的表格初始化时却遇到了令我头疼的问题：表头错乱的，而且好多样式都没应用上去。        之所以出现上述问题是因为控件初始化顺序导致，当datatable初始化的时候，父元素是隐藏的，获取不到它的尺寸，所以表头设置为默认大小100px;   解决方案...
jQuery Datatables表头不对齐的解决办法
10-18
这时，可以设置一个固定的表格宽度，以确保在显示滚动条时表头与内容仍然对齐。例如： ```css #example { width: 1000px !important; /* 替换为你需要的宽度 */ } ``` 这种方法适用于宽度已知且不会因内容变化...
在Laravel中使用DataTables插件的方法
10-18
DataTables 是一个 jQuery 的表格插件，记录一下在 Laravel 中使用的常用功能和用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
datatables固定头与滚动条适配文件
12-28
总的来说，`datatables固定头与滚动条适配文件`是为了解决`DataTables`在使用`FixedHeader`和滚动模式时的兼容性问题，通过合理的CSS样式调整，确保用户在浏览大量数据时仍能方便地看到表头。理解和解决这个问题对于...
基于Datatables跳转到指定页的简单实例
11-30
当用户在输入框中输入页码并按回车键时，代码会计算目标页码（减一，因为Datatables的页码是从0开始的），然后调用`page()`方法切换到指定页，并通过`draw(false)`更新表格，但不重新请求数据（因为我们假设数据已经...
dataTable表头未对其解决方法
weixin_34192816的博客
03-06 1679
本文为博主原创，未经允许不得转载：        在tab页中使用dataTable时，默认显示的dataTable表头与数据显示正常，另一个的datatable则表头与数据未对其。 检查元素发现，datatable有一个div（类名为dataTables_scrollHeadInner）的width为100px，显然是默认值，其获取父元素的宽度失败。 none导致的datatable无法成功获取...
table内容出现滚动条和表头对齐问题
05-09
table内容出现滚动条和表头对齐
JQuery Datatables 在IE浏览器表头显示错乱问题
你好邱林和的专栏
12-09 4691
JQuery Datatables 在IE浏览器表头显示错乱问题，如下图：                   但在其他浏览器：火狐、谷歌、百度都是显示正常的，这个IE11的浏览器上方的标题并没有自动去适配宽度，后来发现表格有一个属性："bAutoWidth": false,，设置为false就可以防止这个问题，接下来就可以使用一些空格来调整，参考如下网址内容：http://stack
bootstrap-databale设置垂直滚动（吸顶）后头部错位问题处理
骑着代码去流浪
08-29 2022
1.设置垂直滚动 &lt;table class="s-table d-table"&gt;&lt;/table&gt; $(document).ready(function() { $('#example').DataTable( { "scrollY": "500px" } ); } ); 2.头部错位处理 1）为table添加属性 ...
关于jqGrid使用tableExport.js导出Excel问题
qq_15011233的博客
10-25 3496
关于jqGrid使用tableExport.js导出Excel问题 最近项目中要导出excel，由于表格数据不涉及分页功能，所以想直接通过jquery导出表格内容，找到了tableExport.js控件，支持导出 json,xml,png,csv,txt, sql, doc,excel,powerpoint,pdf,貌似支持格式还不少，由于我这里只用到了excel，其余的暂且不论。 普通表格可以...
解决 datatable 中的 表头与表格内容不整齐 和 表头换行问题
YKenan的博客
03-29 4942
解决 datatable 中的 表头与表格内容不整齐 和 表头换行问题 /****************表头不整齐**********************/ .dataTable th { white-space: nowrap !important; } .dataTables_wrapper { width: 100%; display: flex; flex-wrap: w...
数 据 表 DataTable
揭了伤疤忘了痛
11-25 174
数 据 表 　　 　　 　　 　　 　　 　　 　　本章主题 ● 数据表标签——h:dataTable ● 一个简单的表 ● 表头、表尾和标题 ● JSF组件 ● 编辑表元 ● 样式 ● 数据库表 ● 表模型 ● 滚动技术 　　经典Web应用程序常用于处理表格数据。以前，除了作为页面的布局管理器之外，HTML表格最适合这个任务。多数情况...
两个table实现固定表头
xuxiaofang77的专栏
05-09 1159
刚开始接触asp.net，
datatables.js表头挤在一列的解决办法
weixin_30856725的博客
12-06 501
如图： 此类问题的出现是由于页面渲染顺序先于datatable函数执行顺序，解决方式： $(document).ready在界面初始状态即加载 $(function () { listGroup(); $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { va...
dataTable 表格头错位
beta_xiyan的博客
08-11 8721
在开发中遇到这个问题，就是第一次加载的时候会错位，出现窄很多的现象，在网上找了一番后，发现http://blog.csdn.net/bugscode/article/details/53432069这篇博客中给出的原因是清晰的，但是解决方法我没怎么看明白，于是按照他所说的原因，即 这种情况是因为Datatables框架中使用到serverSide : true,// 服务器查询数
datatables怎么根据查询条件改变表头展示个数
最新发布
06-08
您好，根据查询条件动态改变表头展示个数可以通过Datatables的API来实现。具体步骤如下： 1. 定义一个函数来动态生成表格的表头，例如： ```javascript function generateTableHeaders(num) { var headers = []; for (var i = 0; i < num; i++) { headers.push({"title": "Column " + (i+1)}); } return headers; } ``` 上面的代码中，generateTableHeaders函数接受一个参数num，表示表头的个数。函数返回一个包含num个表头的数组，每个表头的标题为"Column n"，其中n从1开始递增。 2. 在Datatables的初始化代码中，根据查询条件动态生成表头，并重新绘制表格，例如： ```javascript $(document).ready(function() { var table = $('#example').DataTable({ "ajax": "data.json", // 表格数据的URL "columns": generateTableHeaders(5) // 表头个数为5 }); $('#search-btn').on('click', function() { var num = $('#header-num').val(); // 获取查询条件，表示表头的个数 var headers = generateTableHeaders(num); // 根据查询条件生成表头 table.destroy(); // 销毁原来的表格 $('#example thead').empty(); // 清空原来的表头 table = $('#example').DataTable({ "ajax": "data.json", // 表格数据的URL "columns": headers // 使用新的表头重新初始化表格 }); }); }); ``` 在上面的示例中，我们定义了一个查询条件，表示表头的个数，当用户点击搜索按钮时，根据查询条件重新生成表头，并重新初始化Datatables表格。注意，我们销毁了原来的表格，并清空了原来的表头，然后使用新的表头重新初始化表格。 希望这可以帮到您！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值