将tokenfield添加到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;
        });

我知道在使用draw.dt事件分页并在函数内部创建Tokenfield后，我可以让Tokenfield工作：

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

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

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

不幸的是，这会执行两次ajax调用，这是有道理的，因为我的代码中将tokenfield ajax调用列出两次。我的问题是：如果表重新绘制，没有ajax调用发生两次，我怎样才能让Tokenfield在分页后工作？

Answer 1

原因

如果{/ 1}}事件处理程序在表初始化后附加，则在初始绘制时不会调用它，仅用于后续事件。

解

您可以在表初始化之前附加事件处理程序，请参阅下文。您只需要在事件处理程序内初始化标记字段。

draw.dt

替代解决方案是使用drawCallback选项来处理绘制事件。

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

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

LINKS

有关更多示例和详细信息，请参阅jQuery DataTables: Custom control does not work on second page and after。