Добавление токенового поля в dataTables

Question

У меня есть DataTable, и я хотел бы использовать библиотеку автозаполнения Tokenfield в одном из столбцов. Моя проблема в том, что когда DataTable перерисовывается из-за нумерации страниц, Tokenfield не работает.

DataTable инициализирован / Tokenfield инициализирован

App.datatables();

        /* Initialize Datatables */
        $('#memberTable').dataTable({
            columnDefs: [{ searchable: false, targets: 3 }],
            processing: true,
            pageLength: 20,
            lengthMenu: [[10, 20, 50, -1], [10, 20, 50, 'All']]
        });

        /* Add placeholder attribute to the search input */
        $('.dataTables_filter input').attr('placeholder', 'Search');


/* create tokenfield */
$('.addCategory').tokenfield({
      autocomplete: {
        source: (baseURL+"/directory/autocomplete"),
        delay: 100,
        min:2
      },
      showAutocompleteOnFocus: true
    })

$('.addCategory').on('tokenfield:createdtoken', function(e) {
                var id = $(this).attr('id');
            $.post(baseURL+'/directory/add_skill', {
                tag : e.attrs.value,
                tagId : e.attrs.id,
                contractorId : id
            }, function(response) {
                if (response.success == 200) {
                     /* ... */
                } else if (response.error == 400) {
                    /* ... */
                }
            }, 'json');
            return false;
        });

Я знаю, что могу заставить Tokenfield работать после разбивки на страницы с событием draw.dt и создания поля Token внутри функции:

$('#memberTable').on( 'draw.dt', function () {

   $('.addCategory').tokenfield({  ...continue as written above.

   $('.addCategory').on('tokenfield:createdtoken', function(e) { ...continue as written above. 
});

К сожалению, это выполняет вызовы ajax дважды, что имеет смысл, потому что вызов ajax tokenfield указан дважды в моем коде. Мой вопрос: как я могу заставить Tokenfield работать после нумерации страниц, когда таблица перерисовывается, без вызова ajax дважды?

Answer 1

ПРИЧИНА

Если draw.dt Обработчик событий присоединяется после инициализации таблицы, он не вызывается при начальном отображении, только для последующих событий.

РЕШЕНИЕ

Вы можете прикрепить ваш обработчик событий до инициализации таблицы, см. Ниже. Вам нужно только инициализировать поля токенов внутри обработчика событий.

$('#memberTable').on( 'draw.dt', function () {
   $('.addCategory').tokenfield({  /* skipped */ });.
   $('.addCategory').on('tokenfield:createdtoken', function(e) {  /* skipped */ });
});

$('#memberTable').dataTable({ /* skipped */ });

Альтернативное решение заключается в использовании drawCallback возможность обрабатывать событие рисования.

$('#memberTable').dataTable({ 
   drawCallback: function(){
       $('.addCategory').tokenfield({  /* skipped */ });.
       $('.addCategory').on('tokenfield:createdtoken', function(e) {  /* skipped */ });
   },
   /* skipped */
});

ССЫЛКИ

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