2017-08-21 18 views
0

データテーブルに複数の選択チェックボックスを実装しようとしています。データテーブルで選択した値を送信できません

<form id="frm-example" action="model/unapprove.php" method="POST">    
<table id="pendingInvoice" class="table table-striped table-bordered table-hover" width="100%"> 
    <thead> 
     <tr> 
      <th data-hide="phone">ID</th> 
      <th data-class="expand">Customer Name</th> 
      <th data-hide="phone,tablet">Group Name</th> 
      <th data-hide="phone,tablet">Pay Amount</th>        
      <th data-hide="phone,tablet">Pay Date</th> 
      <th data-hide="phone,tablet">Action</th> 
     </tr> 
     </thead> 
     <tbody> 
     <?php while($row = $app->fetch(PDO::FETCH_OBJ)): ?> 
      <tr> 
       <td><?php echo $row->id; ?></td> 
       <td><?php echo $row->hming; ?></td> 
       <td><?php echo $row->groupname; ?></td> 
       <td><?php echo $row->payamount; ?></td> 
       <td><?php echo $row->paydate; ?></td> 
       <td><?php if($row->status=='Approved'){ 
       echo '<a href="ajax/forms/approvepayment.php?id='.$row->id.'" data-toggle="modal" data-target="#approvePending"class="label label-success">Approved</a>'; 
       }else if($row->status=='Pending'){ 
       echo '<a href="ajax/forms/approvepayment.php?id='.$row->id.'" data-toggle="modal" data-target="#approvePending" class="label label-warning">Pending</a>'; 
       }else{ 
       echo '<a href="ajax/forms/approvepayment.php?id='.$row->id.'" data-toggle="modal" data-target="#approvePending" class="label label-danger">Rejected</a>'; 
       } ?></td> 
       </tr> 
       <?php endwhile; ?> 
      </tbody>        
     </table> 
     <p><button type="submit" class="btn btn-success">Approve</button></p> 
     </form> 

コードが行くことができる:ここで

pageSetUp(); 
var pagefunction = function() { 
    var table = $('#pendingInvoice').dataTable({    
"sDom": "<'dt-toolbar'<'col-xs-12 col-sm-6'f> 
      <'col-sm-6 col-xs-6 hidden-xs'T>r>"+"t"+ 
       "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 
       hidden-xs'i><'col-sm-6 col-xs-12'p>>", 
     "oLanguage": { 
      "sSearch": '<span class="input-group-addon"> 
      <i class="glyphicon glyphicon-search"></i></span>' 
     },   
     "oTableTools": { 
      "aButtons": [ 
      "copy", 
      "xls", 
       { 
        "sExtends": "pdf", 
        "sTitle": "Techmj_PDF", 
        "sPdfMessage": "Techmj PDF Export", 
        "sPdfSize": "A4" 
       }, 
       { 
        "sExtends": "print", 
        "sMessage": "Generated <i>(press Esc to close)</i>" 
       } 
      ], 
      "sSwfPath": "js/plugin/datatables/swf/copy_csv_xls_pdf.swf" 
     }, 

     "columnDefs": [ 
       { 
        'targets': 0, 
        'checkboxes': { 
         'selectRow': true 
        } 
       } 
     ], 
     order: [[ 0, 'desc' ]], 
     'select': { 
      'style': 'multi' 
      }  
    }); 
    $('#frm-example').on('submit', function(e){ 
     e.preventDefault(); 
     var rows_selected = table.column(0).checkboxes.selected(); 
     $.each(rows_selected, function(index, rowId){ 
      $(form).append($('<input>') 
       .attr('type', 'hidden') 
       .attr('name', 'id[]') 
       .val(rowId)); 
     }); 
    }); 
    }; 
    loadScript("js/plugin/datatables/jquery.dataTables.min.js", function(){ 
    loadScript("js/plugin/datatables/dataTables.colVis.min.js", function(){ 
     loadScript("js/plugin/datatables/dataTables.tableTools.min.js", function(){ 
      loadScript("js/plugin/datatables/dataTables.bootstrap.min.js", function(){ 
       loadScript("js/plugin/datatables/dataTables.checkboxes.min.js", function(){ 
       loadScript("js/plugin/datatable-responsive/datatables.responsive.min.js", pagefunction); 
       }); 
      }); 
     }); 
    }); 
}); 

が私のHTMLテーブルです:私はフォームを送信する場合でも、私は次のコードを使用してい

TypeError: table.column is not a function[Learn More]

このエラーを得ました違う?送信ボタンを押すと、テーブル変数を取得できませんでした。コードがどこに間違っているのか分かりませんでした。助けてください。

答えて

0

dataTable()の代わりにDataTable()を使用してテーブルを初期化します。例:

var table = $('#pendingInvoice').DataTable({ 
    // ... skipped ... 
}); 

さらに多くの例と詳細については、を参照してください。