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