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

And how you are deciding those colors, as there are different colors showing the image ? — Mayank Pandeyz
– Mayank Pandeyz, Commented Jan 23, 2019 at 10:07
I mean hover the line when click on checkbox just a color that differentiates the selected lines from the non-selected lines. — Sami
– Sami, Commented Jan 23, 2019 at 10:10
You did not implement any of the code from the link you provided. You need to add a select property to your config. — Jerodev
– Jerodev, Commented Jan 23, 2019 at 10:13

Nitish Patra · Accepted Answer · 2019-01-23 10:33:04Z

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

edited Jan 23, 2019 at 10:33

answered Jan 23, 2019 at 10:21

Nitish Patra

3391 gold badge5 silver badges21 bronze badges

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

10 Comments

Sami Over a year ago

Can you provide the working code, $('#pdr_table').DataTable({...

Sami Over a year ago

I am adding the checkboxes manually from the controller, this code will not work for me.

Nitish Patra Over a year ago

It will still work, $.each doesn't mind, whether you load data from controller or, the datatable loads it for you. It is just a script you need to put in your submit function, and form your data variable and pass into ajax function. Incase you are generating the checkboxes manually, don't refer to the datatable link, it wont help you much. For marking the row , you have to invoke an onclick function..and change the css attribute for the background-colour for the row.

Nitish Patra Over a year ago

After $('#pdr_form').on('submit', function(event){ and before $.ajax({

Nitish Patra Over a year ago

And for the "how" i have already wrote a sample items variable

|

Collectives™ on Stack Overflow

Laravel DataTables multiple select with checkboxes

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related