dataTables — как сделать все столбцы упорядоченными в «draw.dt»

У меня есть набор данных, который извлекается в dataTable через Ajax, и есть временная задержка, которая означает, что пользователь может выполнять действия до его загрузки. Мне нужно загрузить этот набор данных сразу, поэтому на этот раз я не могу использовать обработку на стороне сервера, чтобы обслуживать его по частям.

Я использую кнопки dataTables для загрузки xls, которые я отключаю до тех пор, пока не прибудет набор данных, а затем снова включаю. Если бы я этого не сделал, пользователь мог бы загрузить пустую электронную таблицу до завершения запроса ajax. Итак, для кнопок я закодировал это так:

buttons: [
        {
            extend: 'excel',
            text: '<i class="fa fa-file-excel-o"></i>',
            titleAttr: 'Download to Excel',
            enabled: false
        },
    ],

тогда:

table.on( 'draw.dt', function () {
    table.buttons().enable();
});

Мне нужно сделать то же самое с упорядоченными столбцами, потому что, если упорядоченные столбцы щелкнуты до загрузки данных, отображаемое сообщение изменится с «Загрузка» на «Нет доступных данных в таблице» (по понятным причинам), но это не очень удобно для пользователя.

Я устанавливаю каждый столбец как orderable: false следующим образом:

columns: [
        {
            data: 'myData', 
            orderable: false, // all columns are set to false like this
        },

Это работает, он устанавливает все столбцы, чтобы их нельзя было заказать. Чего я не могу сделать, так это сделать их доступными для заказа после загрузки данных.

Я надеялся, что это будет возможно, что-то вроде этого, но это / ничего, что я пытаюсь, сработает:

table.on( 'draw.dt', function () {
    table.columns().orderable().enable();
});

Любые идеи? Если мне нужно включить каждый столбец по отдельности, это тоже нормально, я тоже не могу найти способ сделать это.

Заранее спасибо.


person user783322    schedule 24.05.2018    source источник


Ответы (1)


Причина, по которой установка orderable: false во время инициализации, а затем изменение ее позже с помощью table.columns().orderable().enable(); не сработает, заключается в том, что orderable: false является параметром инициализации. Из-за того, как работает DataTables, вы не можете изменить параметры инициализации после завершения инициализации. Это означает, что вам нужно найти другой способ отключить упорядочение во время загрузки данных.

Лично, если это только начальная загрузка, я бы просто скрыл таблицу с style="display: none;", пока вы не сможете вызвать обратный вызов initComplete, а затем просто вызовите $(...).show();. Если вы не хотите просто скрывать всю таблицу, вы можете выборочно скрыть заголовок (возможно, $.("#table thead").hide();) и показать их после загрузки.

С сайтом, который я разрабатываю, у нас аналогичная ситуация, когда одновременно загружается около 50 тысяч строк. Я использую $.blockUI(), чтобы поместить собственный блокировщик всплывающих окон поверх таблицы во время выполнения ajax. вызов. Я думаю, что это решение имеет лучший пользовательский интерфейс. Вы можете использовать $.blockUI() для выборочного применения модального режима блокировки к таблице с пользовательским сообщением о загрузке.

person Rich    schedule 25.05.2018