通过 DOM 保存数据后复选框未保存

Question

我正在使用 DataTables 脚本并将其集成到我的 Laravel。我列出了我的所有用户以及复选框，以查看哪些是活动的，哪些是不活动的。我去检查了一些特定的用户，但是当我保存数据时，似乎只保存了最后一个操作。

例如： 我每页有 25 个用户列表。我检查#2 用户并转到第二页检查#26 用户然后保存数据。整个页面刷新后，似乎只检查了#26 用户而不是#2。

是否有额外的命令，或者我错过了什么？

这是我从 Propeller 数据表中使用的代码：

$(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

好的，我找到了问题的正确答案。 我尝试了 Gyrocode 答案的建议。但是，每当我单击复选框时，它都会从表中隐藏我的复选框并将其附加到我的#hidden-checkbox...我想出了将其附加到我的元素的正确方法。

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