Laravel 7- How to use ajax to display data from database in a DataTable jQuery

Question

I have a jQuery DataTable which ought to show the Contact messages to the authenticated(logged in) users. I have a code and it works perfectly. But, I still want to fetch the data from a database using Ajax request in the DataTable. The problem is, I have no clue as to how to do it.

I am getting confused with the documentation. There is a data: and columns:. Not sure how to do it in Laravel.

Here are the codes (that are working fine, but without Ajax requests)

Blade

<div class="container m-5">
<table id="table_id" class="table table-striped table-bordered mydatatable m-5" style="width:100%">
    <thead>
        <tr>
            <th>ID</th>
            <th>Message</th>
            <th>Asked On</th>
            <th>Answered On</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
            @foreach($msg as $key => $message)
      <tr>
                  <th>{{$message->id}}</th>
                  <th>{{$message->message}}</th>
                  <th>{{$message->asked_on}}</th>
                  <th>{{$message->answered_on}}</th>
                  <th>{{$message->status}}</th>
              </tr>

            @endforeach
        
    </tbody>
    <tfoot>
        <tr>
            <th>ID</th>
            <th>Message</th>
            <th>Asked On</th>
            <th>Answered On</th>
            <th>Status</th>
        </tr>

    </tfoot>
</table>
</div>


@include('commonview.footer')


<script type="text/javascript">

    $('#table_id').DataTable( {

  });
</script>

Controller

<div class="container m-5">
<table id="table_id" class="table table-striped table-bordered mydatatable m-5" style="width:100%">
    <thead>
        <tr>
            <th>ID</th>
            <th>Message</th>
            <th>Asked On</th>
            <th>Answered On</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
            @foreach($msg as $key => $message)
      <tr>
                  <th>{{$message->id}}</th>
                  <th>{{$message->message}}</th>
                  <th>{{$message->asked_on}}</th>
                  <th>{{$message->answered_on}}</th>
                  <th>{{$message->status}}</th>
              </tr>

            @endforeach
        
    </tbody>
    <tfoot>
        <tr>
            <th>ID</th>
            <th>Message</th>
            <th>Asked On</th>
            <th>Answered On</th>
            <th>Status</th>
        </tr>

    </tfoot>
</table>
</div>


@include('commonview.footer')


<script type="text/javascript">

    $('#table_id').DataTable( {

  });
</script>

yajrabox.com/docs/laravel-datatables/master/installation

STA
– STA

2020-11-11 05:08:12 +00:00
Commented Nov 11, 2020 at 5:08 — STA
– STA, Commented Nov 11, 2020 at 5:08

Rushikesh Ganesh · Accepted Answer · 2020-11-11 05:10:52Z

1

Controller function for datatable

 public function getuser(Request $request){
    if (request()->ajax()) {
        $user = User::get();
    
        return Datatables::of($user)
            ->addColumn('username', function ($row) {
                if($row->first_name && $row->last_name ){
                 return $row->first_name.' '.$row->last_name;
                }else{
                    return "-";
                }
            }) ->addColumn('date_of_reg', function ($row) {
                if($row->created_at){
                  return date('d-m-Y', strtotime($row->created_at));
                }else{
                    return "-";
                }
            }) ->addColumn('last_login', function ($row) {
                if($row->last_login_at){
                    return   date('d-m-Y H:i:s', strtotime($row->last_login_at));
                }else{
                    return "-";
                }
            })->addColumn('group_name', function ($row) {
                if($row->group_name){
                 return $row->group_name->name->group_name;
                }else{
                    return "-";
                }
            })->rawColumns(['actions'])
            ->make(true);
           
    }
 }

blade file data table functionality

function loadDataTable(
  username ='',date_of_reg='',
  last_login = '',group_name=''
 ) {
  console.log("herer");
  var dataTable = $('#active_user').dataTable({
  processing: true,
  serverSide: true,
  ajax: {
      url: '{{ route("report.active") }}',
      type: 'post',
      data: {  username : username,date_of_reg:date_of_reg,
                last_login:last_login,group_name:group_name}
    },
   columns: [
    {data: 'username', name: 'username'},
    {data: 'date_of_reg', name: 'date_of_reg'},
    {data: 'last_login', name: 'last_login'},
    {data: 'group_name', name: 'group_name'},
    ],
   dom: 'lBfrtip',
      buttons: {
        buttons: [
          { extend: 'copy', className: 'copyButton', 
              exportOptions: {columns: [ 0, 1, 2,3] }},

          { extend: 'csv', className: 'csvButton', 
             exportOptions: {columns: [ 0, 1, 2,3] }},

          { extend: 'excel', className: 'excelButton', 
             exportOptions: {columns: [ 0, 1, 2,3] }},
          { extend: 'pdf', className: 'pdfButton', 
            exportOptions: {columns: [ 0, 1, 2,3] }},
          { extend: 'print', className: 'printButton',
              exportOptions: {columns: [ 0, 1, 2,3] }}
          ]
        }
     });

   Backend.DataTable.init(dataTable);  
 }

answered Nov 11, 2020 at 5:10

Rushikesh Ganesh

2902 silver badges18 bronze badges

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

4 Comments

Skumar Over a year ago

Can you please explain (in short) what you did? Specifically, the difference between data: and columns:. Probably update your answer with these info? And do I need to install this (yajrabox.com/docs/laravel-datatables/master/installation)

Skumar Over a year ago

Also, please edit your answer with respect to my variables. That is how I shall understand the working

Rushikesh Ganesh Over a year ago

@Skumar yes you have to install the package for data tables and your controller code not appropriate edit that unable figure out your variables

Rushikesh Ganesh Over a year ago

the data is basically data tables parameters which is you have to specified in controllers and name is your collection column name which is used for filter in datatables

Collectives™ on Stack Overflow

Laravel 7- How to use ajax to display data from database in a DataTable jQuery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related