Datatables with jQuery-toggles not working on pages other than page 1

Answer 1

Initialise the toggles plugin dynamically, so you also "toggles" elements injected when changing page, sorting etc :

jQuery('#example').on('draw.dt', function() {
    jQuery('.toggle').each(function() {
        $(this).toggles({
           on: $(this).data('toggle-on')
        });
    });
}); 

You must also use a delegated event handler. As it is now, you only have a click-handler for the toggles on the first page :

$('#example').on('click', '.toggle', function () {
    console.log($(this).data('toggle-on'));
    if ($(this).data('toggle-on') == true) {
        $(this).data('toggle-on', false)
        console.log('Turning off ' + $(this).data('contact-id'));
    } else {
        $(this).data('toggle-on', true)
        console.log('Turning on ' + $(this).data('contact-id'));
    }
});

demo -> http://jsfiddle.net/gmptpbqg/ where all .toggle elements become "toggled" and on / off state is remembered correctly across the pages.

Answer 2

Just sharing my answer since I am working with Bootstrap Toggle and not JQuery Toggle, but I used some of the accepted answer above:

$('#tblMyTable').on('draw.dt', function () {
            $('.myInputCheckBoxClass').bootstrapToggle();

            fncAdditionalBindingLogicForBoostrapToggle(); //In case you need any logic when you click the toggle button

        });

Below code doesn't work since whenever I click the pagination of DataTable, the bindings become erratic, so I used the modified version code above:

$('#tblCFRMode').on('draw.dt', function () {

              $('.myInputCheckBoxClass').each(function () {

              if ($(this).prop('checked') == true) {
                $(this).bootstrapToggle('on');
              } else {
                $(this).bootstrapToggle('off');
              }
          });
      });

Answer 3

You can use a DataTable callback function like this:

$('#email_alerts').DataTable( {

    "scrollCollapse": true,
    "paging":         true,
    "fnDrawCallback": function() {
        jQuery('.toggle').bootstrapToggle();
    }

} );

It works fine for me. Good luck!!!