select2 не работает должным образом с Datatables - PullRequest
Новая
       14

select2 не работает должным образом с Datatables

0 голосов
/ 18 октября 2018

Я пытаюсь использовать select2 с Datatables для рендеринга опции множественного выбора в таблице.Однако, похоже, что он не ведет себя хорошо даже после следования базовому примеру, как описано здесь .

    import $ from 'jquery';
    import 'datatables.net';
    import 'datatables.net-dt/css/jquery.dataTables.css';
    import 'select2';

    var table = $('#failTable').DataTable({
          destroy: true,
          paginate: false,
          scrollY: 300,
          data: fail,
          columns: [{
            title: "Example",
            render: function(data, type, row) {
              var depts = getCurrentMapping('departments');
              let content = "<select class='form-control' name='' id='' placeholder='Select a dept...' multiple='multiple'>";
              for (var dept in depts) {
                content += "<option value='" + depts[dept] + "'>" + dept + "</option>";
              }
              content += "</select>";
              return content
            }
          }],
          initComplete: function(settings, json) {
            $('.form-control').select2();
          }
        });

Результат отображается следующим образом:

screenshot 1

И это то, что происходит при выборе значений

screenshot2

Как видите, значения по-прежнему все показаны, и кнопка x для отмены выбора не работает.Что я делаю не так?

1 Ответ

0 голосов
/ 18 октября 2018

Вы должны использовать имя класса, отличное от form-control для элемента управления Select2.Этот универсальный класс используется для всех элементов управления Bootstrap, и его использование может привести к нежелательному поведению.

Если в DataTables страницы, отличные от first, отсутствуют в DOM, то ваш код инициализирует элементы управления только на первой странице.

Например, используйте класс select2-control для идентификации элементов управления Select2 и попробуйте использовать следующий код: 

initComplete: function(settings){
    var api = new $.fn.dataTable.Api( settings );

    // Initialize Select2 control
    $('.select2-control', api.rows().nodes()).select2();
}

См. Пользовательский элемент управления не работает на второй странице и после для получения дополнительной информации.подробности.

...