jquery datatables当固定列时，去掉固定列下回出现滚动条

原创已于 2024-01-19 13:23:45 修改 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #前端 #javascript

于 2022-07-22 13:22:20 首次发布

本文介绍如何在使用DataTables插件时，通过在drawCallback中设置CSS隐藏固定列下的滚动条。只需几步操作，即可实现如图所示的无滚动效果，提升表格呈现的整洁性。

1、当固定列时，固定列下会多一个滚动条，如下图所示：
在这里插入图片描述
2、只需要在drawCallback中添加

"drawCallback": function( settings ) {
				$($('.DTFC_RightBodyLiner')).css('overflow-y','hidden');
			}

如：
在这里插入图片描述

3、最后结果如下图所示：
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

sxjlinux

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

实例讲解DataTables固定表格宽度(设置横向滚动条)

08-30

下面小编就为大家带来一篇实例讲解DataTables固定表格宽度(设置横向滚动条)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

datatables表格分页、检索、排序、滚动条

04-18

个人整理的datatables表格分页、检索、排序、滚动条demo，简单易懂，适合初学者

参与评论您还未登录，请先登录后发表或查看评论

关于jquery datatable 设置垂直滚动条 表头布局异常的问题

C_hydar的博客

04-15

2587

datatable 设置滚动条后表头布局异常问题

DataTable 横向滚动条

爱吃胡萝卜的小帆船

07-05

8803

DataTable 横向滚动条 接上一篇文章固定table 中每列的宽度，当页面宽度小于table 总宽度时出滚动条。效果图如下： JS 第一步： // 表头的标题栏，给他一个宽度 var columns=[ {title:"编号"，sWidth:"130px"}， {title:"来源"，sWidth:"130px"}， {title:"客户名称...

jQuery Datatables 动态列+跨列合并实现代码

10-15

在本教程中，我们将探讨如何在jQuery DataTables中实现动态列和跨列合并。动态列是指表格列的数量可以根据数据或者用户需求进行动态调整。在给出的代码示例中，动态列的实现主要依赖于`thead_key`和`thead_num`两...

jQuery插件dataTables添加序号列的方法

11-23

官网方法实例： $(document).ready(function() { var t = $('#example').DataTable({ "columnDefs": [{ "searchable": false, "orderable": false, "targets": 0 }], "order": [[1, 'asc']] ...}).nodes().each...

jQuery Datatables表头不对齐的解决办法

10-18

在使用jQuery Datatables进行网页数据展示时，可能会遇到表头（thead）与表格内容（tbody）对齐问题，尤其是在浏览器窗口大小变化或者响应式布局中。这个问题通常表现为表头与内容列宽不一致，造成视觉上的错位。...

jquery datatables X轴滚动、scrollX设置水平滚动无效、cannot reinitialise datatable、带参数获取数据、刷新数据

liyongjian12的博客

03-06

6980

目录 1、datatables X轴滚动、scrollX设置水平滚动无效 2、给datatables设置高度 3、cannot reinitialise datatable 4、datatables获取数据时，前台向后台传递参数 5、datatables排序、datatables部分列排序 6、DataTable刷新 1、datatables X轴滚动、scrollX设置水平滚动...

给datatable添加滚动条

qq_39098505的博客

09-17

5345

给datatable添加滚动条，如下图红框部分：给table添加样式 style="white-space: nowrap;" 如下： <table id="personRosterSearch_table" class="ui-table ui-table-border-row ui-table-border col table_datatable" width="10...

Jquery表格添加滚动条插件，固定表头

01-07

非常好用，可以给表格添加滚动条，固定表头，支持冻结列，简单实用. 使用方法： $(document).ready(function() { $("#tblReceiptsSalesDay").toSuperTable({ width: "950px", height: "350px", fixedCols:3, headerRows: 2,cssSkin:"sDark"}); }); tblReceiptsSalesDay:需要滚动表格的ID fixedCols：需要固定的列号 headerRows：需要固定的行号 cssSkin：表格的样式。目前有：sDefault，sSky，sOrange，sDark，可以通过修改superTables.css自定义样式

datatables固定头与滚动条适配文件

12-28

解决datatables出现FixedHeader 2 is not supported with DataTables' scrolling mode at this time的问题

JS Datatables超出自动添加滚动条

followwwind的博客

10-10

5103

th, td { white-space: nowrap; } 头像姓名联系电话性别创建时间浏览次数认证类型认证状态操作 $('#tbl').DataTable({ "ajax" : function (data, callback, settings) { //封装

Jquery datatables插件实现表头固定内容可滚动列表

Vakin - 在路上

09-04

4182

迷你音箱淘宝入口：http://item.taobao.com/item.htm?id=13440256831 最近用Jquery datatables Plugin+freemarker+Struts2开发一个数据列表的组件.由于在整个系统要用到这个组件的功能模块所涉及的数据量不大，为了便于直观，统一不做分页，而是通过滚动条来显示超出显示区域的内容。但是datatabl...

DataTables在手机上固定第一列后导致行排列错乱，以及第一列表头重叠导致无法正确显示表头名称

blackei的博客

07-25

1388

在手机上固定第一列后，行排列错乱，数据对不齐，我的原因是引入了dataTables.bootstrap.min.js和dataTables.bootstrap.min.css这两个文件造成了兼容性问题，引起了排列错乱，移除这两个文件即可。如果用不到其他的功能，datatables有jquery.dataTables.min.js，jquery.dataTables.min.css及jquery...

jq实现网页table水平滚动固定指定列

lxslxs的博客

03-28

509

jq实现table固定列

bootstrap中自定义table 表头固定表体出现滚动条

c15162的博客

05-21

1949

先上一张图看下最终效果：上代码  <table class="table tableHead"> <thead> <tr> <th id="changeName" style="width: 169px;"></th> <th style="width: 250px;">id</th> <th style

Table表格头部固定和列固定，内容滚动

qq_45669178的博客

11-06

2888

注：在移动端上有问题。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> table { table-layout: fixed; /*使用fixed实现th固定宽度*/ width: 100%;

解决 table固定行和列，导致滚动条显示

weixin_30696427的博客

02-19

966

实现了列固定，头部行固定左侧，右侧两个div，左侧滚动，右着滚动，但是左侧会出现滚动条 使用鼠标滚动事件监听左侧 //滚动事件 var scrollFunc = function (e) { e = e || window.event; if (e.wheelDelta == 120 || e.de...

jQuery DataTables列过滤插件OrbiaColumnFilter

而“jquery_datatables_orbiacolumnfilter”作为一个扩展插件，专注于为 jQuery DataTables 提供更加精细化的列过滤（Column Filtering）能力，极大地提升了用户在处理复杂数据表格时的交互体验和操作效率。...