位置: IT常识 - 正文
jQuery datatable 表头表体生成滚动条(jquery ui table)
发布时间：2024-01-26jQuery datatable 表头表体生成滚动条 一、场景介绍 在实际开发工作中，前端会使用“jQuery datatable” 表格插件来做数据的展示，但是遇到如下2种场景就很难受了 （1） 数据列 过多的情况下：表格的列标题（如图一）； （2）数据过多 ：页面会自动生成垂直方向的滚动条，当数 ... jQuery datatable 表头表体生成滚动条一、场景介绍
本文链接地址:https://www.jiuchutong.com/zhishi/310891.html
转载请保留说明！
推荐整理分享jQuery datatable 表头表体生成滚动条(jquery ui table)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:jquery ui table,datatable.js,jquery datatable分页,datatable.js,jquery.table,jquery.datatable,jquery.datatable,jquery.datatable,内容如对您有帮助，希望把文章链接给更多的朋友！
在实际开发工作中，前端会使用“jQuery datatable” 表格插件来做数据的展示，但是遇到如下2种场景就很难受了
（1） 数据列 过多的情况下：表格的列标题（如图一）；
（2）数据过多 ：页面会自动生成垂直方向的滚动条，当数据滚动到页面偏下一点，就看不到表头，无法清晰的区分这些数据是啥作用（如图二），因此需要做类似 Excel，东京窗体的功能；
图一
图二
二、解决方案针对图一 的场景：数据列过多
（1）表头名称，禁止自动换行
<table class="table table-striped table-bordered table-hover" id="sample_4"> 给
标签，加上禁止自动换行的样式：style="white-space: nowrap;
（2）给表格加上X轴方向的滚动条，添加如下配置
"scrollX": "auto" // 开启X轴方向的滚动条 （3）最终效果展示
针对图二 的场景：数据过多
（1）给表格加上Y轴方向的滚动条，同时固定表头，添加如下配置
//表头固定"fixedHeader": true,"scrollX": "auto","scrollY": "500px","scrollCollapse": true,（2）最终效果展示
上一篇：织梦模板Dedecms织梦文件目录结构全面解析教程(织梦模板如何安装)
下一篇：python中使用reload重载(PYTHON中使用什么符号表示单行注释)
