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

Jquery 通过DOM保存数据后,复选框未保存,jquery,dom,datatables,Jquery,Dom,Datatables,我正在使用DataTables脚本并将其集成到我的Laravel中。我已经列出了我的所有用户以及复选框,以查看哪些是活动的,哪些不是。我去检查了一些用户,但当我保存数据时,似乎只保存了最后一个操作 例如: 我每页有25个用户列表。我检查2个用户并转到第二页检查26个用户,然后保存数据。在整个页面刷新之后,似乎只选中了26个用户,而没有选中2个用户 是否有额外的命令,或者我遗漏了什么 下面是我从螺旋桨数据表中使用的代码: $(document).ready(function() { var

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

例如: 我每页有25个用户列表。我检查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>');

} );
**更新说明**


然而,每当我保存表单时,我发现了这个解决方案。。。未保存或选中任何复选框

好的,我找到了问题的正确答案。 我试着从Gyrocode的答案中得到这个建议。但是,每当我单击复选框时,它都会从表中隐藏我的复选框,并将其附加到我的隐藏复选框中。。。我找到了将其附加到元素的正确方法

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