bootstrap固定table列


一、首先弄清楚你框架中是datatables.bootstrap 还是 bootstrap-table问题,因为各自对应固定列的文件是不一样的。

datatables.bootstrap 对应的 dataTables.fixedColumns.js文件

bootstrap-table 对应的 bootstrap-table-fixed-columns.js文件

我项目中用的datatables.bootstrap ,就以此为例,说明一下接下来遇到的问题。

二、css样式引入,注意顺序

    <link href="文件名/datatables.min.css" rel="stylesheet" type="text/css" />

        <link href="文件名/datatables.bootstrap.css" rel="stylesheet" type="text/css" />

        <link href="文件名/fixedColumns.dataTables.min.css" rel="stylesheet" type="text/css" />

三、js引入,注意顺序

        <script src="文件名/datatables.min.js" type="text/javascript"></script>

        <script src="文件名/datatables.bootstrap.js" type="text/javascript"></script>

        <script src="文件名/dataTables.fixedColumns.js"type="text/javascript"></script>

四、页面中加上js,根据需求加上需要固定的列

 $(function () {

            $('#tableId').DataTable({

                    destroy: true, 

                    scrollX: true, 

                    scrollY: "400px", 

                    scrollCollapse: true, 

              fixedHeader: true, 

                    fixedColumns: {

                        leftColumns: 3,//固定列

                        rightColumns: 1//固定列

                    }

                });

            })

五、页面中出现多条线,列表内容没有对齐,需要在样式中修改

 

 

 1、网上找的资料需要修改一下源码js:dataTables.fixedColumns.js,

内容:将that.s.aiInnerWidths.push( th.width() ); 中的内容区域改成that.s.aiInnerWidths.push( iWidth);

2、  但是我本地还是没有起作用(根据自己页面需要,如果上面内容不好使,就对table强制修改样式)

        table.dataTable{margin-top:0px !important; }

        .DTFC_LeftBodyLiner{top: -5px !important;}

        .DTFC_RightBodyLiner{top: -5px !important;}

 

大功告成!!!撒花撒花撒花~~~


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM