Question

我正在尝试使用多选复选框实现Jquery Datatable。我遵循以下示例-

$(document).ready(function (){   
   var table = $('#example').DataTable({
      'ajax': 'logapi3.php?query=query_01',  
      'columnDefs': [{
         'targets': 0,
         'searchable':false,
         'orderable':false,
         'className': 'dt-body-center',
         'render': function (data, type, full, meta){
             return '<input type="checkbox" name="id[]" value="' 
                + $('<div/>').text(data).html() + '">';
         }
      }],
      'order': [1, 'asc']
   });

   // Handle click on "Select all" control
   $('#example-select-all').on('click', function(){
      // Check/uncheck all checkboxes in the table
      var rows = table.rows({ 'search': 'applied' }).nodes();
      $('input[type="checkbox"]', rows).prop('checked', this.checked);
   });

   // Handle click on checkbox to set state of "Select all" control
   $('#example tbody').on('change', 'input[type="checkbox"]', function(){
      // If checkbox is not checked
      if(!this.checked){
         var el = $('#example-select-all').get(0);
         // If "Select all" control is checked and has 'indeterminate' property
         if(el && el.checked && ('indeterminate' in el)){
            // Set visual state of "Select all" control 
            // as 'indeterminate'
            el.indeterminate = true;
         }
      }
   });

   $('#frm-example').on('submit', function(e){
      var form = this;

      // Iterate over all checkboxes in the table
      table.$('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)
               );
            }
         } 
      });

      // FOR TESTING ONLY

      // Output form data to a console
      $('#example-console').text($(form).serialize()); 
      console.log("Form submission", $(form).serialize()); 

      // Prevent actual form submission
      e.preventDefault();
   });
});

    <form id="frm-example" action="/path/to/your/script" method="POST">
        <table id="example" class="table table-bordered table-hover table-striped" style="width:100%">
        <thead>
            <tr>
                <th><input name="select_all" value="1" id="example-select-all" type="checkbox" /></th>
                <th>Schema</th>
                <th>Table Name</th>
                <th>BI Service</th>
                <th>Business Owner</th>
                <th>Solution Owner</th>
                <th>Last Update Time</th>
            </tr>
        </thead>
        </table>
        <p><button>Submit</button></p>
        </div>
        <b>Data submitted to the server:</b><br>
<pre id="example-console">
</pre>
</form>

JSFIDDLE

这工作得很好，但是我只得到ID的值。我需要获取接下来的2列的值。可能应该使用“ .closest（'tr'）。find（'td：eq（1）'）”。但是由于我不是Javascript / Jquery开发人员，因此无法修复此部分。另外，我想知道我的情况下的“ action =“ / path / to / your / script”应该是什么。

Answer 1

我刚刚在此处为表单提交添加了代码，并在复选框元素中添加了类：

var table = $('#example').DataTable({
      'ajax': 'https://api.myjson.com/bins/1us28',  
      'columnDefs': [{
         'targets': 0,
         'searchable':false,
         'orderable':false,
         'className': 'dt-body-center',
         'render': function (data, type, full, meta){
             return '<input type="checkbox" name="id[]" value="' 
                + $('<div/>').text(data).html() + '" class="chk_bx">';
         }
      }],
      'order': [1, 'asc']
   });

    $('body').on('submit', '#frm-example', function(e){
        var form = $(this);
        e.preventDefault();
        $('.chk_bx:checked').each(function(ind, ele){
            form.append(
                  $('<input>')
                     .attr('type', 'hidden')
                     .attr('name', $(ele).attr('name'))
                     .val($(ele).val())
            );
            form.append(
                  $('<input>')
                     .attr('type', 'hidden')
                     .attr('name', 'name[]')
                     .val($(ele).closest('tr').find('td:eq(1)').html())
            );
            form.append(
                  $('<input>')
                     .attr('type', 'hidden')
                     .attr('name', 'position[]')
                     .val($(ele).closest('tr').find('td:eq(2)').html())
            );
        });
        console.log(form.serialize());
    });

Answer 2

您需要将dt-checkboxes类设置为复选框

<input type="checkbox" class="dt-checkboxes"...

var submitBtn = $('#submit');

            if (submitBtn) {
                submitBtn.on('click', function (e) {
                    e.preventDefault();

                    var matches = [],
                        checkedcollection = table.$(".dt-checkboxes:checked", { "page": "all" });

                    checkedcollection.each(function (index, elem) {
                        matches.push($(elem)[0].value));
                    });

                    if (matches.length) {
                        alert(matches.join());
                    }
                });
            }

需要获取复选框行的值

2 个答案: