Laravel 7-如何使用ajax在DataTable jQuery中显示数据库中的数据

Question

我有一个jQuery DataTable，它应该向经过身份验证的(登录)用户显示联系人消息。我有一个密码，它工作得很好。但是，我仍然希望使用中的 Ajax请求从数据库Ajax中获取数据。问题是，我不知道该怎么做。

我和文件搞混了。有一个data:和columns:。不知道在拉拉维尔怎么做。

下面是代码(这些代码运行良好，但没有Ajax请求)

叶片

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

控制器

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

Answer 1

数据表的控制器功能

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

刀片文件数据表功能

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