1

我有一个 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 调用。我的问题是：如何让 Tokenfield 在分页后工作，当重绘表格时，没有 ajax 调用发生两次？

4

1 回答 1

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：自定义控件在第二页及之后不起作用。

于 2016-03-09T12:21:17.800 回答