一、首先弄清楚你框架中是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;}
大功告成!!!撒花撒花撒花~~~