Here is the code snippet I am currently working with:
$("#add-new-size-grp").click( function (event) {
event.preventDefault();
$.ajax({
type: "get",
url:"ajax-get-sizes.php",
success: function(result){
$("#sizegrp-table").html(result);
var sizegrpSizesTable = $('#tbl-sizegrp-sizes').DataTable();
//iCheck for checkbox and radio inputs
$('input[type="checkbox"]').iCheck({
checkboxClass: 'icheckbox_polaris',
radioClass: 'iradio_polaris'
});
$("#modalNewSizeGrp").modal();
}
});
});
This piece of code fetches data and creates a jQuery DataTable. The DataTable is then inserted into a DIV element on the current page.
In the section that starts with
$('input[type="checkbox"]').iCheck({While this method works perfectly for the initial set of data, any new checkboxes displayed when switching pages or adjusting the page length do not retain the custom styling.
I have attempted to address this issue by applying the formatting upon the page.dt event using the following code:
$('#tbl-sizegrp-sizes').on( 'page.dt', function () {
var dtable = $('#tbl-sizegrp-sizes').DataTable();
var info = dtable.page.info();
$('input[type="checkbox"]').iCheck({
checkboxClass: 'icheckbox_polaris',
radioClass: 'iradio_polaris'
});
});
However, I seem to be missing something. Any guidance on what could be causing this issue?
-- EDIT --
Upon request, here is a demonstration of the problem in a JSFiddle. Take note of the styled checkboxes on the first page and observe how they change when navigating to other pages.