jquery table 行列固定 插件

于 2024-06-13 14:55:05 发布
阅读量370 收藏 3
点赞数 4
文章标签： jquery 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40341527/article/details/139654420
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed Columns Example</title>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/4.0.1/css/fixedColumns.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/fixedcolumns/4.0.1/js/dataTables.fixedColumns.min.js"></script>
</head>

<style>
        /* 强制表格撑满容器 */
        .dataTables_wrapper {
            width: 100%;
        }
		/* 表头和单元格居中 */
        th, td {
            text-align: center;
        }
    </style>
<body>

<table id="example" class="display dataTables_wrapper nowrap" >
    <thead>
        <tr>
		<th width="100"><input type="checkbox"></th>
            <th width="100">Name</th>
            <th width="300">Position</th>
            <th width="100">Office</th>
            <th width="300">Age</th>
            <th width="100"> Start date</th>
            <th width="300">Salary</th>
			 <th width="300">Salary</th>
			  <th width="300">Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
		<td><input type="checkbox"></td>
            <td>Tiger NixonTiger</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
			<td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
		<tr>
		<td><input type="checkbox"></td>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
			<td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
		<tr>
		<td><input type="checkbox"></td>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
			<td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
		<tr>
		<td><input type="checkbox"></td>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
			<td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
		<tr>
		<td><input type="checkbox"></td>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
			<td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
		<tr>
		<td><input type="checkbox"></td>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
			<td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
		<tr>
		<td><input type="checkbox"></td>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
			<td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
		<tr>
		<td><input type="checkbox"></td>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
			<td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
		<tr>
		<td><input type="checkbox"></td>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
			<td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
		<tr>
		<td><input type="checkbox"></td>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
			<td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
		<tr>
		<td><input type="checkbox"></td>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
			<td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
		<tr>
		<td><input type="checkbox"></td>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
			<td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
		
    </tbody>
</table>

<script>
$(document).ready(function() {
    $('#example').DataTable({
        scrollY: '300px',
        scrollX: true,
        scrollCollapse: true,
        paging: false,
        fixedColumns: {
            leftColumns: 2 // 固定左侧的两列
        },
		"dom": 'rt'   ,
		ordering: false
    });
});
</script>

</body>
</html>

懒得起名字的小白
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery datatables 所需文件 官方下载的
11-19
官方下载 datatables所需包文件
jQuery插件冻结行列、固定列固定行，html、table实现
06-05
该插件名为"jQuery-Plugin-To-Freeze-Table-Columns-Rows-On-Scroll"，其主要功能是在表格滚动时保持顶部行和左侧列固定，以便用户在浏览长表格时仍能清晰地看到表头和关键列。以下我们将深入探讨这个插件的工作原理...
Datatables表格固定列 dataTable.fixedColumns.js的使用和修复 - 完美解决ICheck不能勾选问题
hsany330的专栏
07-15 780
https://blog.csdn.net/lhmyy521125/article/details/86549317
dataTable 固定列
秋风伴落叶
03-04 1845
效果展示： $(document).ready(function() { var table = $('#example').DataTable( { scrollY: "300px", scrollX: true, scrollCollapse: true, paging: false, fixedColumns: { left: 1,
jQuery table插件锁定表头和首列
ICode联盟
07-18 217
无法兼容所有浏览器，理论上支持H5的浏览器应该都可以（见谅）。在IE8（H5的效果无效）、IE11、Edge、Chrome62、firefox57、360浏览器8.1（内核45）内测试均正常，其他浏览器没装就没再查看。
Jquery Table 固定行和列
05-03
本项目涉及的主题是“jQuery Table 固定行和列”，这是一个常见需求，特别是对于那些展示大量数据的网页应用，它能帮助用户在滚动时保持表头和侧边栏可见，提高可读性和用户体验。 首先，`superTables.css`是样式表...
table表格固定行和列
05-11
有许多现成的JavaScript库和jQuery插件，如`FixedHeaderTable`、`datatables.net`等，可以帮助我们轻松实现固定行和列的功能。这些库通常会处理各种浏览器兼容性问题，提供更高级的定制选项，并且在响应式设计中...
datatable的固定列插件
09-06
里面有一些样例，就是样例里的链接可能有问题，只能参考代码，样例或者下载可以去官网：https://datatables.net/releases/FixedColumns-3.2.2.zip
dataTable.fixedColumns.js修复版
03-07
该版本为dataTable.fixedColumns.js修复版，解决固定列出现滚动条的问题，以及一些显示的处理，详见博客：https://blog.csdn.net/lhmyy521125/article/details/86549317
表格固定列插件修复版本 - dataTable.fixedColumns.js
01-19
改版本为dataTable.fixedColumns.js修复版，解决固定列出现滚动条的问题，以及一些显示的处理
jQuery 表格插件整理
12-08
jQuery 表格插件 Flexigrid – Web 2.0 Javscript Grid for jQuery – 可变列宽，自动适应表头宽度，可通过 Ajax 连接 XML 数据源，类似 Ext Grid，但基于 jQuery 因此更轻量小巧。 Chromatable JQuery Plugin – ...
jQuery简单仿Excel表格功能插件.zip
最新发布
09-22
本篇将介绍一个基于jQuery的仿Excel表格功能插件，它可以帮助开发者快速构建具有Excel特色的交互式表格。 首先，jQuery代码在网页中的应用主要体现在DOM操作、事件处理以及动画效果上。在这个仿Excel插件中，jQuery...
css 固定列头,表格头部固定和表格列固定
weixin_39893728的博客
08-04 610
我不是前端大神，只是偶尔在开发系统时，需要用到表格。如果表格只需要单独的用来展现数据，那就很简单了，那如果需要实现复杂的样式呢？比如说表头固定，当网页滚动的时候，表头自动固定到网页顶部，这样很客观的展现了每列的内容。表头固定和列固定，需要用到jQuery DataTables(我不是前端大神，就懒一点，用下框架，偶尔用下框架，开发时间也节省了嘛，嘿嘿 ^_^)，没错，又是我前面介绍的DataTab...
datatables基本使用（含固定列，导出）
慢慢来的博客
04-12 1695
因工作需要，做一个统计列表，要实现表头固定，可以通过点击表头进行排序，还有内容导出； 本来是考虑用layui 的table，但是系统里用了require.js ，在用layui感觉有点重复，所以采用了datatables。 主要优点：功能强大，可选择扩展功能也算全面了。 基本用法： $("#table").dataTable({ "searching": ...
datatables插件fixedColumns小问题解决
qq_15081901的博客
08-28 5747
在使用datatables时需要固定几列，使用了fixedColumns插件，但加载完成的列出现一个滚动条，实现是不美观，见图： 通过测试，是生成的固定列列宽不正确导致的，于是使用回调函数手工进行修改，解决此问题： 代码如下： $(document).ready(function () { $('#example').dataTable({ ...
Jquery datatables 列过多,固定前两列保持不动
热门推荐
你好邱林和的专栏
10-31 3万+
1.由于表格中列比较多,拖动的时候,就会导致用户体验不好,需要冻结前几列,滚动的时候始终看到这几个列,  JQuery datatables 插件固定几列,可以使用datatables扩展的插件FixedColumns: 下载链接如下:https://datatables.net/releases/FixedColumns-3.2.2.zip,  一个国外的很好例子网站:http://jsfi
jquery固定table表头
06-10
您可以使用以下CSS和JavaScript代码来固定表头： CSS代码： ``` table { table-layout: fixed; width: 100%; } thead { display: table-header-group; } tbody { display: table-row-group; } ``` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值