数据表 - 表头不滚动,但正文

时间:2017-03-21 13:33:37

标签: javascript jquery html css datatables

我有一个数据表,其中表体滚动,但表头不滚动。我想让表头也滚动。为此,我在jquery.dataTables.css文件中添加了一些代码:

div.dataTables_scrollHead{
    overflow: scroll !important;    
}

但是现在表格标题会自动滚动,当标题滚动时,表格主体不会滚动。

知道如何让标题滚动到正文吗?非常感谢您的帮助!

这是我的DataTable代码:

table = $('#dashboardDataTable').DataTable( {
                        data : dashBoardMainData,
                        "columns": dashboardColumns,
                        "destroy" : true,
                        "paging" : false,
                        "scrollY" : dashboardHeight,
                        "scrollX" : true,
                        "sScrollX": "100%",
                        "bScrollCollapse": true,
                        "searching" : false,
                        "info" : false,
                        "ordering" : true,
                        "fixedColumns": true,
                        dom : 'Zlfrtip',
                        "colResize": {"tableWidthFixed": false}, 
                        "autoWidth" : true,
                        "footerCallback": function ( row, data, start, end, display ) {

                            var api = this.api(), data;
                            var i=1;

                            if(!isNUllOrEmpty(dispData)){
                                for(var x in tableJson.totalRow){
                                    $(api.column(i++).footer()).html(dispTotalData[tableJson.totalRow[x]]);
                                }
                                $('#dashboardDataTable .dataTables_scrollFoot').css({"height":"auto"});
                                $('#dashboardDataTable .DTFC_LeftFootWrapper').css({"height":"auto"});
                            }else{
                                $('#dashboardDataTable .dataTables_scrollFoot').css({"height":"auto"});
                                $('#dashboardDataTable .DTFC_LeftFootWrapper').css({"height":"auto"});
                                $('#dashboardDataTable .dataTables_scrollBody').css({"height":"40"});
                                for(var x in tableJson.totalRow){
                                    $(api.column(i++).footer()).html('');
                                 }
                            }

                        },
                        "fnDrawCallback": function() {

                            var dataLength = dispData.length;

                            //This function is for appending child data when ever sort happening.
                            for(kp=0;kp<childRows.length;kp++){
                                var childKey = childRows[kp].key;
                                if(!isNUllOrEmpty(childKey)){
                                    var childStr = childDataMap[childKey]
                                    if(!isNUllOrEmpty(childStr)){
                                        childRows[kp].value.after(childStr);
                                    }
                                }
                            }
                        }       
                    });

0 个答案:

没有答案