如何删除 jQuery DataTables 中多余的白色 space

Question

我正在使用 jQuery DataTables 但遇到了问题

在 Dest Port 列中有很多额外的 space 并且与 Sub Client 和 Prod Type列，我的初始化代码是：

function calcDataTableHeight() {
    return $(document).height() - 320;
}

var browserScrollPercentage = function () {
     if($.browser.chrome) {
        return '178%';
     }else{
        return '228%';
     }
}

var oTable = new Datatable();
oTable.init({
    src: $("#tableOrder"),
    onSuccess: function (oTable) {
        // execute some code
    },
    onError: function (oTable) {
        // execute some code
    },
    loadingMessage: 'Loading...',
    dataTable: {
        "bStateSave": false,
        "bScrollAutoCss": true,
        "lengthMenu": [
            [30, 60, 90, 120, -1],
            [30, 60, 90, 120, "All"]
        ],
        "aoColumnDefs": [ { "bSortable": false, "aTargets": [ 31 ]}],
        "pageLength": 30,
        "ajax": {
            "url": "order-ajax" // ajax source
        },
        "order": [
            [1, "desc"]
        ], // set first column as a default sort by desc
        scrollY: calcDataTableHeight(),
        "sScrollX": "100%",
        "sScrollXInner": browserScrollPercentage(),
        "bScrollCollapse": true,
        "sDom": '<"top">rt<"bottom"pi><"clear">',
        "bInfo": true
    }
});

我尝试了很多来自不同来源的东西，但没有成功我.

Answer 1

CAUSE

与 HTML 表格一样，DataTables 尝试根据单元格中的数据以最佳格式布置表格。当内容不够长，无法填满页面时，部分栏目会出现白色space。

SOLUTION

您可以使用 columnDefs.width 通过 targets 定位特定列，并通过 width 选项强制确定宽度。

例如，要设置第五列和第六列的宽度，请使用以下代码：

var table = $('#example').DataTable({
   columnDefs: [
       { targets: [4,5], width: '10%' }
   ]
});

DEMO

有关代码和演示，请参阅 this jsFiddle。

如何删除 jQuery DataTables 中多余的白色 space

How to remove extra white space in jQuery DataTables

jquery

datatables