DataTables.net Ширина не работает с сортировкой - PullRequest
Новая
       11

DataTables.net Ширина не работает с сортировкой

0 голосов
/ 28 сентября 2018

Я использую 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 Как задать ширину столбца, но разрешить сортировку.

1 Ответ

0 голосов
/ 28 сентября 2018

Добавление стиля в качестве 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>'
                    }
                }
            ]
        });
...