jQuery datatable 表头表体生成滚动条

一、场景介绍

在实际开发工作中，前端会使用“jQuery datatable” 表格插件来做数据的展示，但是遇到如下2种场景就很难受了

（1） 数据列 过多的情况下：表格的列标题（如图一）；

（2）数据过多 ：页面会自动生成垂直方向的滚动条，当数据滚动到页面偏下一点，就看不到表头，无法清晰的区分这些数据是啥作用（如图二），因此需要做类似 Excel，东京窗体的功能；

jQuery datatable 表头表体生成滚动条

图一

jQuery datatable 表头表体生成滚动条

图二

二、解决方案

  1. 针对图一 的场景：数据列过多

    （1）表头名称，禁止自动换行

 <table class="table table-striped table-bordered table-hover" id="sample_4">

​ 给

标签，加上禁止自动换行的样式：style="white-space: nowrap;

​ （2）给表格加上X轴方向的滚动条，添加如下配置

    "scrollX": "auto" // 开启X轴方向的滚动条

​ （3）最终效果展示

jQuery datatable 表头表体生成滚动条

  1. 针对图二 的场景：数据过多

    （1）给表格加上Y轴方向的滚动条，同时固定表头，添加如下配置

//表头固定
"fixedHeader": true,
"scrollX": "auto",
"scrollY": "500px",
"scrollCollapse": true,

​ （2）最终效果展示

jQuery datatable 表头表体生成滚动条

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。