Jquery tagsinput not working with datatables

457 Views Asked by At

I have created a page where I have a table with few column. I have used datatables and initially shown 10 records. On the second column I have a input box with class ".inittags" and I have added jquery tagsinput to all the input boxes on the second column.

I have initialized the datatables like this

var oDataTable = $('#recordstable').dataTable();

and I have intialized the jquery tags input this way

$('.inittags').tagsInput({
    width              : 'auto',
    'placeholder'      : 'Type Client Name',
    'placeholderColor' : '#e2e2e2',
    onAddTag           : function(){
        // 
    },
    onRemoveTag        : function(){
        //
    },
    maxTags            : 1,
    autocomplete_url   : function(request, response) {
        if(request.term.length > 1){
            $.ajax({
                url      : 'fetchDetails.php',
                data     : {'term' : request.term, 'fetchfor' : 'clients'},
                type     : 'POST',
                dataType : 'json',
                success  : function(data){
                    response(data);
                }
            });
        }
    }
});

The problem is, on the first page it is working fine since all the 10 records are visible, then when I click the next button it shows up the next 10 record which were initially hidden. So the tags input is not getting initialized on the initially hidden elements.

How can I solve it ??

0

There are 0 best solutions below