Laravel DataTables multiple select with checkboxes

Question

I am developing an application in Laravel with DataTables where i display data form Mysql database. How to do multiple selection with line color for each selection ? like this link but with multiple selection and how to get values from the selected line not just the line id and how to get the current line values when click on the corresponding button of that line ?

Each button of the last column open a form with a submit button, the submit function is for all the blue buttons.

This is a screenshot of the app:

Here is code:

$(document).ready(function() {
 $('#pdr_table').DataTable({
    "processing": true,
    "serverSide": true,
    "ajax": "{{ route('ajaxdata.getdata') }}",
    "columns":[
        { "data": "checkbox", orderable:false, searchable:false},
        { "data": "ID_Piece" },
        { "data": "Designation" },
        { "data": "Status" },
        { "data": "action"}
    ],
    //"order": [[ 0, "asc" ]],
    'rowCallback': function(row, data, index){ 
        if(data.Status == 'Disponible'){ 
            $(row).find('td:eq(3)').css('background-color', 'green').css('color', 'white'); 
        }
        if(data.Status == 'Indisponible'){ 
            $(row).find('td:eq(3)').css('background-color', 'red').css('color', 'white'); 
        } 
    }
 });    

$(document).on('click', '.Ajouter_au_panier', function(){
    $('#pdrModal').modal('show');
    $('#pdr_form')[0].reset();
    $('#form_output').html('');
    $('#piece').text('PDR'); 
});

$(document).on('click', '.pdr_checkbox', function(){//How to color the entire line and get all the values of that line

});

$('#pdr_form').on('submit', function(event){//How to get all the values for the line of that button
    event.preventDefault();
    var form_data = $(this).serialize();
    $.ajax({
        url:"{{ route('ajaxdata.postdata') }}",
        method:"get",
        data:form_data,
        dataType:"json",
        success:function(data)
        {
            if(data.error.length > 0)
            {
                var error_html = '';
                for(var count = 0; count < data.error.length; count++)
                {
                    error_html += '<div class="alert alert-danger">'+data.error[count]+'</div>';
                }
                $('#form_output').html(error_html);
            }
            else
            {                            
                $('#form_output').html(data.success);
                $('#pdr_form')[0].reset();
                $('#pdr_table').DataTable().ajax.reload();
            }
        }
    })
});

Controller:

function getdata()
    {
     $pdrs = Pdrs::select('ID_Piece', 'Designation', 'Status');
     return DataTables::of($pdrs)
            ->addColumn('checkbox', '<input type="checkbox" name="pdr_checkbox[]" class="pdr_checkbox" value="{{$ID_Piece}}" />')
            ->rawColumns(['checkbox','action'])
            ->addColumn('action', function($pdr){
                return '<a href="#" class="btn btn-xs btn-primary Ajouter_au_panier" id="'.$pdr->ID_Piece.'"><i class="glyphicon glyphicon-shopping-cart"></i> Ajouter au panier</a>';})
            ->make(true);            
    }

Answer 1

You can use

select: {
   style:'multi',
},

if you don't intend to use style:'multi' use CTRL+Select for multiple selection under style:'os', as given in the documentation in the link provided by you. Check Here

Then, you can do a $.each on the selected checkboxes within the ajax click function and form the data variable that you want to submit to the controller. Also, please follow the code of the documentation.

$('#someSubmitButton').on('submit', function(e){
  //Place submit button within the form
  var form = this;
  //Define your dataTable to a variable - here it is table
  var rows_selected = table.column(0).checkboxes.selected();

  // Iterate over all selected checkboxes
  $.each(rows_selected, function(index, rowId){.... Your other code goes 
  here based on how you want to handle.....}