通过DOM

Question

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

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

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

这是我在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 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>');
});