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 ??