jquery - Checkbox is not saving after saving data via DOM -

im using datatables script , integrate laravel. have listed of users along checkbox see active , not. went check users when saved data, appears last action saved.

for example: have 25 list of users per page. check #2 user , go page 2 check #26 user save data. after whole page refresh, appears #26 user checked , not #2.

is there additional command this, or missing something?

here's code use propeller data-table:

$(document).ready(function() {     var exampledatatable = $('#example').datatable({         responsive: {             details: {                 type: 'column',                 target: 'tr'             }         },         /* columndefs: [ {             classname: 'control',             orderable: false,             targets:   1         } ], */         order: [ 1, 'asc' ],         bfilter: true,         blengthchange: true,         pagingtype: "simple",         "paging": true,         "searching": true,         "language": {             "info": " _start_ - _end_ of _total_ ",             "slengthmenu": "<span class='custom-select-title'>rows per page:</span> <span class='custom-select'> _menu_ </span>",             "ssearch": "",             "ssearchplaceholder": "search",             "paginate": {                 "snext": " ",                 "sprevious": " "             },         },         dom:             "<'pmd-card-title'<'data-table-title-responsive'><'search-paper pmd-textfield'f>>" +             "<'row'<'col-sm-12'tr>>" +             "<'pmd-card-footer' <'pmd-datatable-pagination' l p>>",     });      /// select value     $('.custom-select-info').hide();      $("div.data-table-title").html('<h2 class="pmd-card-title-text">table card</h2>');     $("div.data-table-title").html('<h2 class="pmd-card-title-text">table responsive</h2>');     $(".custom-select-action").html('<button class="btn btn-sm pmd-btn-fab pmd-btn-flat pmd-ripple-effect btn-primary" type="button"><i class="material-icons pmd-sm">delete</i></button><button class="btn btn-sm pmd-btn-fab pmd-btn-flat pmd-ripple-effect btn-primary" type="button"><i class="material-icons pmd-sm">more_vert</i></button>');  } ); 

** update note **

  $('#user-data-list').on('submit', function(e){     var $form = $(this);      // iterate on checkboxes in table     exampledatatable.$('input[type="checkbox"]').each(function(){       // if checkbox doesn't exist in dom       if(!$.contains(document, this)){         // if checkbox checked         if(this.checked){           // create hidden element            $form.append(             $('<input>')               .attr('type', 'hidden')               .attr('name', this.name)               .val(this.value)           );         }       }      });             }); 

i found solution however, whenever save form... no checkbox saved nor checked... how submit checkboxes pages jquery datatables

ok, figured out correct answer question. tried suggestion gyrocode answer. however, whenever click checkbox hides checkbox table , append #hidden-checkbox... figured out proper way append element.

$(document).ready(function() {     var table = $('#example').datatable({         responsive: {             details: {                 type: 'column',                 target: 'tr'             }         },     /* columndefs: [ {             classname: 'control',             orderable: false,             targets:   1         } ], */         order: [ 2, 'asc' ],         bfilter: true,         blengthchange: true,         pagingtype: "simple",         "autowidth": false,     "pagelength": 25,         "paging": true,         "searching": true,         "language": {             "info": " _start_ - _end_ of _total_ ",             "slengthmenu": "<span class='custom-select-title'>rows per page:</span> <span class='custom-select'> _menu_ </span>",             "ssearch": "",             "ssearchplaceholder": "search user",             "paginate": {                 "snext": " ",                 "sprevious": " "             },         },         dom:             "<'pmd-card-title'<'data-table-title-responsive'><'search-paper pmd-textfield'f>>" +             "<'row'<'col-sm-12'tr>>" +             "<'pmd-card-footer' <'pmd-datatable-pagination' l p>>",     });    $('#user-data-list').on('submit', function(e) {     var $form = $(this);      table.$(':checkbox').each(function() {       if(!$.contains(document, this)) {         if($(this).is(':checked')) {           $(this).clone().appendto('#hidden-checkbox').attr('checked','checked').attr('type','hidden');         }       }      });             });       /// select value     $('.custom-select-info').hide();      $("div.data-table-title").html('<h2 class="pmd-card-title-text">table card</h2>');     $("div.data-table-title").html('<h2 class="pmd-card-title-text">table responsive</h2>');     $(".custom-select-action").html('<button class="btn btn-sm pmd-btn-fab pmd-btn-flat pmd-ripple-effect btn-primary" type="button"><i class="material-icons pmd-sm">delete</i></button><button class="btn btn-sm pmd-btn-fab pmd-btn-flat pmd-ripple-effect btn-primary" type="button"><i class="material-icons pmd-sm">more_vert</i></button>'); }); 

wiki