3

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

另一个问题是分页。我正在寻找分页样式，例如分页示例，但我的表格中没有相同的样式。请帮助我。

另一个请求将给出示例（主题 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": "<<",
                    "sLast": ">>",
                    "sNext": ">",
                    "sPrevious": "<" 
                },
                "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]
    }]

});
4

4 回答 4

3

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

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

<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%"/>

检查更新更新小提琴

于 2013-07-05T05:41:11.110 回答
1

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

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

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

于 2014-10-10T15:26:35.207 回答
1

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

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

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

于 2017-06-13T22:15:44.063 回答
0

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

带有以下CSS

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

于 2017-12-07T17:52:06.567 回答