如何解决DataTables表头列宽度和表体列宽有时不匹配?

时间:2018-05-05 06:08:14

标签: javascript jquery datatables datatables-1.10

使用以下.js文件。

  • jquery.dataTables.min.js(DataTables 1.10.16)。
  • dataTables.bootstrap.min.js(DataTables Bootstrap 3集成)。
  • dataTables.responsive.min.js(响应式2.2.1)。
  • dataTables.scroller.min.js(Scroller 1.4.4)。

使用以下.css文件。

  • jquery.dataTables.min.css
  • dataTables.bootstrap.min.css
  • responsive.dataTables.min.css
  • scroller.dataTables.min.css

以下是表格布局:

<table class="table table-responsive table-bordered table-striped table-hover" id="tbl-cat-lvl-two" style="width:100%">
    <thead>
        <tr>
            <th>ID</th>
            <th>Code</th>
            <th>Icon</th>
            <th>Category Label</th>
            <th>Precedence</th>
            <th>Visibility</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

这是表脚本:

catLvl2table = $('#tbl-cat-lvl-two').DataTable( {
    "processing"    : true,
    "serverSide"    : true,
    "order"         : [[ 4, "asc" ]],
    "responsive"    : true,
    "scrollY"       : "236px",
    "scrollCollapse": true,
    "ajax"          : {
        "url"       : baseUrl+getCatLvl2DataUrl+lvl1CatId,
        "type"      : "POST"
    },
    "columnDefs"    : [
        { "visible"     : false, "targets": [0] },
        { "orderable"   : false, "targets": [0, 2, 5, 6] },
        { 
            className: "align-center check-align-center",
            "targets": [6],
            "render"    : function (data, type, full, meta){
                let id = full.id;
                return `<button href="" class="btn btn-sm btn-info dt-btn-view" data-id="${id}"><i class="fa fa-eye"></i></button><button href="" class="btn btn-sm btn-primary dt-btn-edit" data-id="${id}"><i class="glyphicon glyphicon-pencil"></i></button><button href="" class="btn btn-sm btn-danger dt-btn-del" data-id="${id}"><i class="glyphicon glyphicon-trash"></i></button>`;
            } 
        }
    ],
    "columns": [
        { "data": "id" },
        { "data": "code" },
        { "data": "icon" },
        { "data": "category" },
        { "data": "precedence" },
        { "data": "visibility" },
    ],
});

以下是输出:enter image description here

0 个答案:

没有答案