jquery - DataTables.net 宽度不适用于排序

Question

我正在使用 DataTables.net 来填充表格，但是，我无法使“宽度”选项起作用。我已经尝试了几个 DataTables 选项来做到这一点，但都没有成功，所以我创建了一个 CSS 函数来手动控制宽度并且有效。

然而，为了应用我的 CSS 函数，我需要在 <td> 上添加一个类用<div>这需要我做一个 render: function() .

一旦我这样做了，现在我的排序就不起作用了。所以我需要找到一种方法让 DataTable 正确设置我的宽度，或者让它根据 <div> 中的数据进行排序。

这是我的表格:

mobileTable = $('#MobileTable #mobileTransaction').DataTable({
            data: mobileData,
            cache: false,
            retrieve: true,
            order: [0, "desc"],
            lengthMenu: [25, 50, 75, 100],
            columnDefs: [
                { type: 'date', targets: 0 },
                //{ width: "1%", targets: 0 }
            ],
            columns: [
                {
                    data: null,
                    title: 'Date',
                    render: function (data, type, full, meta) {
                        return '<div class="text-wrap width-date">' + full.settledate + '</div>'
                    }
                },
                {
                    data: null,
                    title: "Description",
                    render: function (data, type, full, meta) {
                        return '<div class="text-wrap width-narr">' + full.narratives + '</div>'
                    }
                },
                {
                    data: null,
                    orderable: false,
                    render: function (data, type, full, meta) {
                        return '<td><div id="ExpandTransaction" data-id="' + full.id + '" class="btn btn-warning btn-anim btn-square width-exp"><i></i><span class="btn-text fa fa-search-plus pt-10"></span></div></td>'
                    }
                }
            ]
        });

和 CSS

.text-wrap {
        white-space: normal;
    }

    .width-narr {
        width: 150px;
    }

    .width-date {
        width: 50px;
    }

此外，如果有一种方法可以设置整个表格宽度以适合您的屏幕尺寸，那将是理想的，因为这基本上就是我通过手动设置列宽所做的事情。

TL;DR 如何设置列宽同时仍允许排序。

Answer 1

将样式添加为 columnDef 而不是单独的 CSS 函数就可以了:

mobileTable = $('#MobileTable #mobileTransaction').DataTable({
            data: mobileData,
            cache: false,
            retrieve: true,
            order: [0, "desc"],
            lengthMenu: [25, 50, 75, 100],
            columnDefs: [
                {
                    "targets": 0,
                    "createdCell": function (td, cellData, rowData, row, col) {
                        $(td).css('max-width', '50px')
                    }
                },
                {
                    "targets": 1,
                    "createdCell": function (td, cellData, rowData, row, col) {
                        $(td).css('max-width', '150px')
                        $(td).css('white-space', 'normal')
                    }
                },
                { type: 'date', targets: 0 }
            ],
            columns: [
                {
                    data: 'settleDate',
                    title: 'Date'
                },
                {
                    data: 'narratives',
                    title: "Description"
                },
                {
                    data: null,
                    orderable: false,
                    render: function (data, type, full, meta) {
                        return '<div id="ExpandTransaction" data-id="' + full.id + '" class="btn btn-warning btn-anim btn-square width-exp"><i></i><span class="btn-text fa fa-search-plus pt-10"></span></div>'
                    }
                }
            ]
        });