weixin_33712881
weixin_33712881
2019-07-21 13:35
采纳率: 0%
浏览 46

Laravel:DataTable复选框

Im fetching my data in my server side and I put checkbox. Example I have 15 data. When I checked data 1 and data 13 then I submit it. Im only getting the data 13.

View

<form id="approved-selected-form">

<table id="get-rfp-for-approval-table" class="table table-striped table-bordered table-sm">
    <thead class="thead-global">
        <tr>
            <th></th>
            <th>#</th>
            <th>RFP#</th>
            <th>Payee</th>
            <th>Doc Ref</th>
            <th>Date Needed</th>
            <th>Requesting Department</th>
            <th>Amount</th>
            <th>Status</th>
            <th>Created By</th>
            <th>Approval Status</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>
<button type="submit" class="btn btn-success btn-sm">Approved</button>
</form>

Fetching my data using js

$(document).ready(function(){

        setTimeout(
          function() 
          {
            // getRFPforApproval();
            //search each column datatable
            $('#get-rfp-for-approval-table thead th').each(function(e) {
                var title = $(this).text();
                $(this).html( '<input type="text" placeholder="'+title+'" class="form-control" style="font-size: 9px;"/><br><p style="font-size: 11px; font-weight:bolder">'+title+'</p>' );
            });
            $('#get-rfp-for-approval-table').DataTable().columns().every(function() {
                var that = this;
                $( 'input', this.header() ).on('keyup change', function () {
                    if ( that.search() !== this.value ) {
                    that
                        .search( this.value )
                        .draw();
                    }
                });
            });
          }, 2000);
       var table3 = $('#get-rfp-for-approval-table').DataTable({
           ajax: {
               url: '/requests/request-for-payment/getRFPforApproval',
               dataSrc: ''
           },
           columns: [ 
               { data: 'checkbox' },
               { data: '#' },
               { data: 'number' },
               { data: 'vendor' },
               { data: 'document_reference' },
               { data: 'date_needed' },
               { data: 'requesting_department' },
               { data: 'amount' },
               { data: 'status' },
               { data: 'created_by' },
               { data: 'approval_status' },
               { data: 'action' },
           ],
           columnDefs: [
               {
                   targets: 0,
                   checkboxes3: {
                       selectRow: true
                   }
               }
           ],
           select: {
               style: 'multi'
           },
           order: [[1,'desc']]
       });

My form after I selected some checkboxes

if ( $('#approved-selected-form').length > 0 ) {
                $('#approved-selected-form').submit(function(e){
                    var form = this;  
                    console.log(table3.column(0).checkboxes3.selected());
                    return false;
                    var rows_selected = table3.column(0).checkboxes.selected();
                    // Iterate over all selected checkboxes
                    $.each(rows_selected, function(index, rowId){
                       // Create a hidden element 
                       $(form).append(
                           $('<input>')
                              .attr('type', 'hidden')
                              .attr('name', 'checkbox[]')
                              .val(rowId)
                       );
                    });
                    swal({
                        title: "Are you sure?",
                        text: "Transaction will be approved.",
                        icon: "warning",
                        buttons: true,
                        dangerMode: true,
                    })
                    .then((willSave) => {
                        if (willSave) {
                            $.ajaxSetup({
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                }
                            })
                            $.ajax({
                                url: '/requests/request-for-payment/approvedTransaction',
                                type: "POST",
                                data: formData,
                                beforeSend: function() {
                                    var span = document.createElement("span");
                                    span.innerHTML = '<span class="loading-animation">LOADING...</span>';
                                    swal({
                                        content: span,
                                        icon: "warning",
                                        buttons: false,
                                        closeOnClickOutside: false
                                    });
                                    $('.request-for-payment-finish').attr('disabled', 'disabled');
                                },
                                success: function(response) {
                                    if (response != '') {
                                        $('#get-request-for-payment-table').DataTable().destroy();
                                        getRequestForPaymentTable();

                                        $('#add-request-for-payment-form').trigger("reset");
                                        swal("Transaction has been saved!", {
                                            icon: "success",
                                        });
                                        setTimeout(
                                            function() 
                                            {
                                                window.location.href = "/requests/request-for-payment?id="+response+"#view-request-for-payment-modal";
                                            }, 1500);
                                    }
                                },
                                complete: function() {
                                     $('.request-for-payment-finish').removeAttr('disabled');
                                }
                            });
                        } else {
                            swal("Save Aborted");
                        }
                    });

                    e.preventDefault();
                    return false;
                })
            }

I'm encountering error: Uncaught TypeError: Cannot read property 'selected' of undefined into this line. "table3.column(0).checkboxes3.selected()".

Question: I think when I checked the other data that is not on the same page(Example data 1 is in page 1, data 13 is in page 2). I can't get the second data. How can I get all the data even though it is not in the same page?

UPDATE:

I managed to fix the error by adding these

<link type="text/css" href="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.11/css/dataTables.checkboxes.css" rel="stylesheet" />
<script type="text/javascript" src="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.11/js/dataTables.checkboxes.min.js"></script>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • weixin_33744854
    weixin_33744854 2019-07-21 17:52

    There is only checkboxes option available in jQuery DataTables Checkboxes plugin, see Options page.

    Use the following initialization options:

    columnDefs: [
        {
            targets: 0,
            checkboxes: {
                selectRow: true
            }
        }
    ],
    

    Use the following code to get the data:

    var rows_selected = table3.column(0).checkboxes.selected();
    
    点赞 评论

相关推荐