jquery - 如何删除 jQuery DataTables 中多余的空白

Question

我正在使用 jQuery DataTables 并遇到问题

在目标端口列中有很多额外的空间，与子客户端和产品类型列相同，我的初始化代码是:

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
    }
});

我尝试了许多来自不同来源的方法，但没有成功。我还尝试在 jQuery 代码和 PHP 代码中进行修剪，但对我来说不起作用。

Answer 1

CAUSE

与 HTML 表格一样，DataTables 尝试根据单元格中的数据以最佳格式布局表格。当内容不够长，无法填满页面时，某些列中会出现空白。

SOLUTION

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

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

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

DEMO

参见this jsFiddle用于代码和演示。