Laravel DataTables带有复选框的多重选择

时间:2019-01-23 10:05:01

标签: php mysql laravel checkbox datatables

我正在使用DataTables在Laravel中开发一个应用程序,其中我从Mysql数据库显示数据。如何对每个选择使用线条颜色进行多重选择?像这样的link,但是有多个选择项,以及如何从选定的行中获取值,而不仅仅是行ID,以及如何在单击该行的相应按钮时获取当前行的值?

最后一列的每个按钮都打开一个带有提交按钮的表单,该提交功能适用于所有蓝色按钮。

这是该应用程序的屏幕截图:

enter image description here

这是代码:

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

控制器:

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

1 个答案:

答案 0 :(得分:1)

您可以使用

select: {
   style:'multi',
},

如果您不想使用style:'multi' 使用 CTRL +选择style:'os',下进行多项选择 根据您提供的链接中的文档中的说明。 Check Here

然后,您可以在ajax click函数中的选定复选框上执行$ .each,并形成要提交给控制器的数据变量。 另外,请遵循文档中的代码。

$('#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.....}