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