DataTables + iCheck + pagination

Question

iCheck works with datatables only on the first page. When I navigate to any other page it shows checkboxes but they don't have iCheck applied. This code helps but doesnt' work 100%.

function turn_on_icheck(checkboxClass)
{
    $('input[type=checkbox]').iCheck({
        checkboxClass: checkboxClass
    });
}
$('.data-table').on('page', function() {
    turn_on_icheck();
});

When I go to the 2nd page it shows everything fine now, but if I go back to the page that was previously visited, the checkboxes are not there. It seems to me like it causes an error because there is already an instance of iCheck running there. Is there any way to check if there is one running or not?

Answer 1

I had the same issue with asp.net grid. Please use the on draw.dt event, that will help in paging and display menu as well

$('.data-table').on('draw.dt', function () {
    turn_on_icheck();
});

Answer 2

Here is a simpler way to do this:

$('.inputClass').iCheck({
        handle: 'checkbox',
        checkboxClass: 'icheckbox_flat-blue'
    });

source Good Luck

Answer 3

When datatables refresh the values, new inputs are render and the inputs need to apply again the icheck funtion.

$(document).ajaxComplete(function() {
    $('input[type=checkbox]').iCheck({
        checkboxClass: checkboxClass
    });
});

Answer 4

Do this (write your code in "drawCallback" function):

...
'drawCallback': function(settings) {
     $('.i-checks').iCheck({
         checkboxClass: 'icheckbox_square-green'
     });
 },
 ...

It solved my problem.

Answer 5

this is how i solved it... you should give the icheck some time until it finishes before calling the DataTable function... use the JQUERY's when function

function Typer(callback)
{    
    if ($("input.flat")[0]) 
    {
        $('input.flat').iCheck({
            checkboxClass: 'icheckbox_flat-green',
            radioClass: 'iradio_flat-green'
        });
    }
}


function enableDataTableMain()
    {
    var table = $('#tableWithData').DataTable({
     "aoColumnDefs": [
        {
            'bSortable': false,
            'aTargets': [0]
        } //disables sorting for column one
    ],
    "tableTools": {
        "sSwfPath": "swf/copy_csv_xls_pdf.swf"
    }});                    
    var tt = new $.fn.dataTable.TableTools( table );
    $( tt.fnContainer() ).insertBefore('div.functionDiv');
}


    $(document).ready(function() {
    $.when( Typer() ).done(function() {
       enableDataTableMain();
    });
});