Question

我正在使用DataTables.net填充表，但是，我无法使Width选项起作用。我尝试了几个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>'
                    }
                }
            ]
        });

DataTables.net宽度不适用于排序

1 个答案: