jquery - How to check an iCheck on the second page -

i have following code:

$("#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 checkbox , radio inputs             $('input[type="checkbox"]').icheck({               checkboxclass: 'icheckbox_polaris',               radioclass: 'iradio_polaris'             });              $("#modalnewsizegrp").modal();         }     }); }); 

which, in nutshell, retrieves chunk of data , forms jquery datatable. returned , shoved div in calling page.

the section starts $('input[type="checkbox"]').icheck({ uses icheck plugin format checkboxes first column of table.

this works first page of data. however, when user moves page, or changes page length, newly displayed checkboxes not have formatting applied.

i have looked @ using page event apply formatting, can't work properly. code have tried follows:

$('#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'     });  }); 

what doing wrong?

-- edit --

as requested, here fiddle demonstrating problem. notice styled checkboxes on page 1, switch other page.

cause

jquery datatables removes non-visible elements dom. why when run icheck() affects first page elements.

solution

use drawcallback option define function called when table drawn.

var sizegrpsizestable = $('#tbl-sizegrp-sizes').datatable({    'drawcallback': function(settings){       //icheck checkbox , radio inputs       $('input[type="checkbox"]').icheck({          checkboxclass: 'icheckbox_polaris',          radioclass: 'iradio_polaris'       });    } }); 

demo

see this jsfiddle code , demonstration.

links

see jquery datatables: custom control not work on second page , after more examples , details.