lundi 21 août 2017

Can not submit selected values in datatable

I am trying to implement multiple select checkboxes in datatable. But when I submit the form, I got this error

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

I am using the following code:

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

Here is my html table:

 <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>

Where could the code go wrong? When I hit the submit button the it could not get the table variable. I could not figure it out where the code goes wrong. Please help.




Aucun commentaire:

Enregistrer un commentaire