jQuery datatable 表頭表體生成滾動條
一、場景介紹
在實際開發作業中，前端會使用“jQuery datatable” 表格插件來做資料的展示，但是遇到如下2種場景就很難受了
（1） 資料列 過多的情況下：表格的列標題（如圖一）；
（2）資料過多 ：頁面會自動生成垂直方向的滾動條，當資料滾動到頁面偏下一點，就看不到表頭，無法清晰的區分這些資料是啥作用（如圖二），因此需要做類似 Excel，東京表單的功能；
二、解決方案
-
針對圖一 的場景：資料列過多
（1）表頭名稱，禁止自動換行
<table id="sample_4" style="white-space: nowrap; ">
? 給
標簽，加上禁止自動換行的樣式：style="white-space: nowrap;? （2）給表格加上X軸方向的滾動條，添加如下配置
"scrollX": "auto" // 開啟X軸方向的滾動條
? （3）最終效果展示
-
針對圖二 的場景：資料過多
（1）給表格加上Y軸方向的滾動條，同時固定表頭，添加如下配置
//表頭固定
"fixedHeader": true,
"scrollX": "auto",
"scrollY": "500px",
"scrollCollapse": true,
? （2）最終效果展示
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/498873.html
標籤：jQuery
上一篇：jQuery筆記