Question

我在这里有一些关于jquery数据表的问题。

我的桌子正在使用多个标头，并且第一列将被冻结。

我总共有25列，这是我的表格的例子：

<table cellpadding="0" cellspacing="0" border="0" class="display" id="tabel_daftar_all" align="center" style="text-align: center;">
        <thead>
            <tr>
                <!--<th rowspan="4">No</th>-->
                <th rowspan="4">Categories1</th>
                <th colspan="3">Categories2</th>
                <th colspan="14">Categories3</th>
                <th colspan="5">Categories4</th>
                <th rowspan="4">Remark</th>
            </tr>
            <tr>
                <th rowspan="3">X</th>
                <th rowspan="3">X 1</th>
                <th rowspan="3">X 2</th>
                <th colspan="3">X</th>
                <th rowspan="3">X</th>
                <th colspan="3">X</th>
                <th rowspan="3">X</th>
                <th colspan="6">X</th>
                <th colspan="2">X</th>
                <th rowspan="2">X</th>
                <th rowspan="2">X</th>
                <th rowspan="2">X</th>
                </tr>
                <tr>
                <th rowspan="2">X</th>
                <th rowspan="2">X</th>
                <th rowspan="2">X</th>
                <th rowspan="2">X</th>
                <th rowspan="2">X</th>
                <th rowspan="2">X</th>
                <th rowspan="2">X</th>
                <th rowspan="2">X</th>
                <th>X</th>
                <th>X</th>
                <th colspan="2">X</th>
                <th>X</th>
                <th>X</th>
            </tr>

            <tr>
                <th>Y/N</th>
                <th>X</th>
                <th>X</th>
                <th>X</th>
                <th>X</th>
                <th>X</th>
                <th>X</th>
                <th>X</th>
                <th>X</th>
            </tr>
        </thead>
        <tbody>
            <!--PHP select from database-->
        </tbody>
</table>

当我试图只设置一列时，它是成功的，

然而，当我将其更改为4时，我遇到了一些问题，

为什么冻结列上具有多行标题的顶部标题的样式似乎不同，

这是截图： screenshot 1

除此之外，在Firefox上，行似乎也被操纵了

截图： rigged

不仅如此，我也想使用固定标题，但在滚动模式下似乎不支持，对此有什么解决方案吗？

至于我的数据表的脚本在这里：

<script type="text/javascript" charset="utf-8">
$(document).ready( function () {

//Auto column resize for datatable inside tab
    $("#kontenTab").tabs( {
        "show": function(event, ui) {
            var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
            if ( oTable.length > 0 ) {
                oTable.fnAdjustColumnSizing();
            }
        }
    } );

    var oTable = $('#tabel_daftar_all').dataTable( {
        "bJQueryUI": true,
        "bSort": false,
        "bPaginate": false,
        "sScrollX": "100%",
        //"sScrollXInner": "150%",
        "bScrollCollapse": true,
        "bFilter": false
    } );    

    new FixedColumns( oTable, {
        "iLeftColumns": 4
    } );

    //new FixedHeader( oTable );
} );
</script>
<style>
table.display thead th {
    border-bottom: 1px solid black;
    cursor: pointer;
    font-weight: bold;
    padding: 3px 18px 3px 10px;
}
</style>

对不起，如果我问得太多，

我希望有人能帮我解决这个问题XD

使用jquery数据表设置多标题，冻结列和固定标题

0 个答案: