将令牌字段添加到数据表

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 事件分页并在函数内部创建令牌字段后，我可以让令牌字段工作：

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

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

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

不幸的是，这执行了两次 ajax 调用，这是有道理的，因为 tokenfield ajax 调用在我的代码中列出了两次。我的问题是：如何让 Tokenfield 在分页后工作，当 table 被重新绘制时，ajax 调用不会发生两次？

Answer 1

原因

如果 draw.dt 事件处理程序被附加在 table 初始化之后，它不会在初始绘制发生时被调用，仅用于后续事件。

解决方案

您可以在table初始化之前附加您的事件处理程序，见下文。您只需要在事件处理程序中初始化令牌字段一次。

$('#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: Custom control does not work on second page and after。

将令牌字段添加到数据表

Adding tokenfield to dataTables

jquery

datatables

bootstrap-tokenfield

原因

解决方案

链接