Adding tokenfield to dataTables

Question

I have a DataTable and I would like to use the Tokenfield autocomplete library in one of the columns. My problem is that when the DataTable is redrawn due to pagination, the Tokenfield doesn't work.

DataTable initialized / Tokenfield initialized

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;
        });

I know that I can get the Tokenfield to work after pagination with the draw.dt event and creating the Tokenfield inside of the function:

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

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

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

Unfortunately this performs the ajax calls twice, which makes sense because the tokenfield ajax call is listed twice in my code. My question is: How can I get the Tokenfield to work after pagination, when the table is redrawn, without the ajax call occurring twice?

Answer 1

CAUSE

If draw.dt event handler is attached after table initialization, it doesn't get called when initial draw occurs, only for subsequent events.

SOLUTION

You can attach your event handler before table initialization, see below. You only need to initialize token fields once inside event handler.

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

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

Alternative solution is to use drawCallback option to handle draw event.

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

LINKS

See jQuery DataTables: Custom control does not work on second page and after for more examples and details.