Laravel: DataTable Multiple checkboxes

Question

Im fetching my data in my server side and I put checkbox.

I need some clarification, do I need to put checkbox here or it will be automatically added?

Controller

$result[]  = array(
        '#'                     => '<span style="font-size: 12px; color: gray">'.$counter++.'</span>',
        'number'                => '<p>'.$value->number.'</p>',
        'vendor'                =>  '<p>'.$vendor->name .'</p>',
        'document_reference'    => '<p>'.$value->document_reference.'</p>',
        'date_needed'           => '<p>'.$value->date_needed.'</p>',
        'requesting_department' => '<p>'.$department->name.'</p>',
        'amount'                => '<p align="right">'.number_format($value->total_amount,2).'</p>',
        'status'                => '<p>'.$status.'</p>',
        'approval_status'       => '<p id="'.$value->id.'">'.$approval.'</p>',
        'created_by'            => '<p id="created_at'.$value->id.'">'.$user->name.'</p>',
        'action'                => '<a href="/requests/request-for-payment?id='.$value->id.'#view-request-for-payment-modal" class="btn btn-primary btn-sm" title="View"><i class="fa fa-eye"></i></a>',
        'checkbox'                 => '<input type="checkbox" name="checkbox[]" value="'.$value->id.'">'

In my view page I used route to call this method. In here I have now my data.

My View

var table3 = $('#get-rfp-for-approval-table').DataTable({
   'processing': true,
   'serverSide': true,
    ajax: {
        url: '/requests/request-for-payment/getRFPforApproval',
        dataSrc: ''
    },
    columns: [ 
        { 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' },
        { data: 'checkbox' },
    ],
    columnDefs: [
        {
            targets: 11,
            checkboxes: {
                selectRow: true
            }
        }
    ],
    select: {
        style: 'multi'
    },
    order: [[1,'desc']]
});

Example I have 15 data, I checked data 5 and data 14. then I submit the form.

My form

if ( $('#approved-selected-form').length > 0 ) {
    $('#approved-selected-form').submit(function(e){
        var form = this;  

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

        var formData = $(this).serialize();
        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;
    })
}

NOTE: I tried to dd it in my controller it gives me this

array:1 [
  "get-rfp-for-approval-table_length" => "10"
]

I also noticed that in my th, I dont have checkbox(when I clicked this, everything will be checked). Im using this as a guide. https://jsfiddle.net/snqw56dw/3182/.

Question: How can I get those values in my controller?

Gyrocode.com · Accepted Answer · 2019-07-22 12:02:49Z

1

You should be returning ID in your controller.

$result[]  = array(
    // ... skipped ...    
    'checkbox' => $value->id
);

Also since checkbox in column with index 11, you should be using that index when retrieving the data.

var rows_selected = table3.column(11).checkboxes.selected();

On the side note, I see that you're using server-side processing mode ('serverSide': true). Make sure your controller returns proper response.

answered Jul 22, 2019 at 12:02

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Laravel: DataTable Multiple checkboxes

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related