Question

我正在寻找帮助jquery数据表标题和列宽度大小不匹配。我的意思是列大小根据文本长度（数据表值）而变化。如何修复列应该是标准宽度并与故事标题匹配。

另一个问题是分页。我正在寻找像Example of pagination一样的分页风格，但我的表格并没有相同的风格。请帮助我。

另一个请求将相同的主题应用于数据表的主题（主题redmond）。

请在jsfiddle JSFIDDLE

中找到我的数据表

$("#products1").dataTable({
       "aaData": newarray,
       "bProcessing": true,
       "bDeferRender": true,
       "bFilter": false,
       "bJQueryUI": true,
       "sPaginationType": "full_numbers",
       "bRetrieve": true,
       "bPaginate": true,
       "bSort": true,
       "aaSorting": [[4, "desc"]],
       "iDisplayLength": 5,
       "oLanguage":{
                "sInfo":"_START_-_END_ of _TOTAL_",
                "oPaginate":{
                    "sFirst": "&lt;&lt;",
                    "sLast": "&gt;&gt;",
                    "sNext": "&gt;",
                    "sPrevious": "&lt;" 
                },
                "sLengthMenu":"Show _MENU_"
            },
       "aoColumns": [{"sWidth": "100%","sClass": "center","bSortable": false},
             {
            "sWidth": "150%","sClass": "center","bSortable": false},
             {
            "sWidth": "150%","sClass": "center","bSortable": false},
             {
            "sWidth": "150%","sClass": "center","bSortable": false}


            ],
        "aoColumnDefs": [{ "fnRender": function (o, val) {
            return o.aData[0];
        },
            "sClass": "HEADER","aTargets": [0]
    }, {
        "fnRender": function (o, val) {

            return o.aData[1];
        },
            "sClass": "list","aTargets": [1]
    }, {
    "fnRender": function (o, val) {

            return o.aData[2];
        },
            "sClass": " Number","aTargets": [2]
    },{
    "fnRender": function (o, val) {

            return o.aData[3];
        },
            "sClass": "Name","aTargets": [3]
    }]

});

Answer 1

您需要将其放在固定大小列的表中

编辑：您错过了以表格样式写表格宽度和布局，希望以下内容对您有用

<table border="1" cellspacing="0" cellpadding="0" id="products" style="clear:both;layout:fixed;width:400px;">
    <col style="width: 40%"/>
        <col style="width: 30%"/>
        <col style="width: 10%"/>
        <col style="width:20%"/>

检查更新已更新fiddle

Answer 2

这只是codeomnitrix的一个小错字，但答案是正确的。而不是布局，它应该是表格布局：

style="clear:both;table-layout:fixed;width:400px;"

这将覆盖导致标题和正文列不匹配的bootstrap CSS设置。

Answer 3

在任何上下文中使用的此语句都会将标题与列匹配。我建议将其绑定到绑定到UI更改的函数中。

$($.fn.dataTable.tables(true)).DataTable().columns.adjust();

https://www.gyrocode.com/articles/jquery-datatables-column-width-issues-with-bootstrap-tabs/

Answer 4

$('table.dataTable').wrap('<div class="datatableWrapperdiv"></div>')

以下css

.datatableWrapperdiv{ overflow-x:auto; width:100%; }

Jquery数据表 - 表头和列宽不匹配

4 个答案: