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

发布日期: 2017-09-24 19:20:12 作者: Stephen 评论: 0

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

表头固定和列固定,需要用到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框架哦!!!

快来抢沙发