表格头部固定和表格列固定

Petrochor

发布于 2022-06-07 15:26:33

3.3K0

发布于 2022-06-07 15:26:33

文章被收录于专栏：StephenStephen

我不是前端大神，只是偶尔在开发系统时，需要用到表格。如果表格只需要单独的用来展现数据，那就很简单了，那如果需要实现复杂的样式呢？比如说表头固定，当网页滚动的时候，表头自动固定到网页顶部，这样很客观的展现了每列的内容。

表头固定和列固定，需要用到jQuery DataTables（我不是前端大神，就懒一点，用下框架，偶尔用下框架，开发时间也节省了嘛，嘿嘿 ^_^），没错，又是我前面介绍的DataTables，我对这框架是情有独钟啊，我觉得是万能是表格插件，从简单到复杂，从客户端到服务器，从数据到Excel导入，平时我们基本上会用到的，它都能实现，并且不需要你些繁琐的javascript和后端代码，它都轻松搞定。

表头固定和列固定是jQuery DataTables里的两个独立的扩展插件，下面我们就分别说说：

表头固定

1.下载并引入js和css样式扩展

dataTables.fixedHeader.min.js
fixedHeader.dataTables.min.css

2.javascript

$(document).ready(function() {
    $('#example').DataTable( {
        fixedHeader: true
    } );
} );

表列固定

1.下载并引入js和css样式扩展

dataTables.fixedColumns.min.js
fixedColumns.dataTables.min.css

2.javascript

$(document).ready(function() {
    var table = $('#example').DataTable( {
        scrollY:        "300px",//表格高度，可实现Y轴滚动
        scrollX:        true,//表格X轴滚动
        scrollCollapse: true,
        fixedColumns:   {
            leftColumns: 1,//表格左边固定列数
            rightColumns: 1//表格右边固定列数
        }
    } );
} );

大功告成，是不是特别简单啊？但是有一点要记住，引入这些扩展之前，比如先引入DataTables框架哦！！！

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017-09-24 ，如有侵权请联系 cloudcommunity@tencent.com 删除

java