DOMを使用してデータを保存した後にチェックボックスが保存されない

Question

Im DataTablesスクリプトを使用して、それを自分のLaravelに統合します。私はチェックボックスと一緒にすべての私のユーザーをリストして、どちらがアクティブであるかを確認しました。私はいくつかの特定のユーザーをチェックするために行ったが、データを保存すると、最後のアクションだけが保存されたように見える。

例： ページあたり25人のユーザーリストがあります。私は＃2ユーザをチェックし、2ページ目に行き、＃26ユーザをチェックしてデータを保存します。ページ全体をリフレッシュした後、＃26ユーザーのみがチェックされ、＃2はチェックされていないように見えます。

追加のコマンドがありますか、または何か不足していますか？ここで

はプロペラデータ・テーブルから、私が使用してどのようなコードです：

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

}); 

** アップデート注意 **

$('#user-data-list').on('submit', function(e){ 
    var $form = $(this); 

    // Iterate over all checkboxes in the table 
    exampleDatatable.$('input[type="checkbox"]').each(function(){ 
     // If checkbox doesn't exist in DOM 
     if(!$.contains(document, this)){ 
     // If checkbox is checked 
     if(this.checked){ 
      // Create a hidden element 
      $form.append(
      $('<input>') 
       .attr('type', 'hidden') 
       .attr('name', this.name) 
       .val(this.value) 
     ); 
     } 
     } 
    });   
    }); 

私は、フォームを保存するたびに、私は、しかし、この解決策を見つけました。 ..チェックボックスは保存されておらず、チェックされていませんでした。How to submit checkboxes from all pages with jQuery DataTables

Answer 1

私の質問に対する正解はわかりました。 私はジャイロコードの答えからの提案を試みました。しかし、私はチェックボックスをクリックするたびにテーブルから自分のチェックボックスを隠し、＃隠しチェックボックスにそれを追加します...私はそれを自分の要素に追加する適切な方法を考え出しました。

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