Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/76.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Jquery 需要获取复选框行的值_Jquery_Datatable - Fatal编程技术网

Jquery 需要获取复选框行的值

Jquery 需要获取复选框行的值,jquery,datatable,Jquery,Datatable,我正在尝试使用多选复选框实现Jquery Datatable。我已仿效以下例子: $(document).ready(function (){ var table = $('#example').DataTable({ 'ajax': 'logapi3.php?query=query_01', 'columnDefs': [{ 'targets': 0, 'searchable':false, 'ord

我正在尝试使用多选复选框实现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>

这很好,但我只得到ID的值。我需要得到接下来两列的值。可能。最接近的'tr'。查找'td:eq1'应该可以。但由于我不是Javascript/Jquery开发人员,因此无法修复这一部分。还想知道对于我的案例,action=/path/to/your/script应该是什么。

我刚刚在这里为表单提交添加了代码,并在checkbox元素中添加了类:

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

您需要将dtcheckbox类设置为checkbox

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