帶有服務器端的 Laravel 5 數據表

Question

我正在嘗試將datatables插件與 laravel 一起使用，因為我需要管理大表，而 laravel 分頁不夠好。

我正在使用yajra/laravel-datatables組件，但我無法讓它工作，它拋出一個錯誤：

數據表警告：表 id=project-table - Ajax 錯誤。 有關此錯誤的更多信息，請參閱http://datatables.net/tn/7

看了之后不知道怎么解決，很確定跟我的路由有關系，因為不太明白ajax是怎么獲取結果的。

這就是我所做的：

路由文件

Route::controllers([
'projects'       => 'ProjectController'

]);

ProjectController.php（只是獲取數據的函數）

    public function getDataTable()
{
    $projectes = Project::select(['id', 'nom', 'desc', 'preu', 'hores', 'created_at']);

    return Datatables::of($projectes)->make(true);
}

風景：

<table id="project-table" class="table table-condensed table-bordered table-striped">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Titol</th>
                        <th>Desc</th>
                        <th>Preu</th>
                        <th>Hores</th>
                        <th>Data Alta</th>
                    </tr>
                </thead>
            </table>

最后，js：

$(function() {
$('#project-table').DataTable({
    processing: true,
    serverSide: true,
    ajax: '{{ url("projects/getDataTable") }}',
    columns: [
        {data: 'id', name: 'id'},
        {data: 'nom', name: 'nom'},
        {data: 'desc', name: 'desc'},
        {data: 'preu', name: 'preu'},
        {data: 'hores', name: 'hores'},
        {data: 'created_at', name: 'created_at'}
    ]
});

});

Answer 1

在ProjectController.php getDatatable函數更改為getDatatable （將 T getDatatable小寫）。 然后將 ajax 請求中的 url 更改為projects/datatable （沒有get 。由於您使用了控制器路由，控制器將在projects/datatable偵聽 GET 請求）。

如果沒有這樣做，請在您直接在瀏覽器中打開projects/datatable頁面時發布響應。

Answer 2

Laravel 5.1 必須安裝在數據表 6.0 版上：

composer require yajra/laravel-datatables-oracle:~6.0

Answer 3

Laravel 中的 DataTables 服務器端處理

在本教程中，我將向您展示在 Laravel 中使用遠程服務器端處理實現 DataTables jQuery 插件的最簡單方法。 在這里我將向您展示如何在 Laravel 中通過 ajax 從遠程 MySQL 數據庫中獲取數據。 對於那些不了解 Datatables 的人來說，DataTables 是一個用於 jQuery Javascript 庫的表格增強插件，它有助於以最少的努力為純 HTML 表格添加排序、分頁和過濾功能。 主要目標是增強普通 HTML 表格中數據的可訪問性。

現在在我們開始編碼之前，在您的視圖頁面中包含 Datatables CSS 文件和來自 CDN 的 Javascript 文件，如下所示。

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.css"/>

<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.js"></script>

現在讓我們了解我們需要做的所有任務

1. 我們需要限制表的大小。 （默認為 10、25、50 或 100 個條目）
2. 現在實現搜索功能。
3. 分頁任務。

以上所有任務都將在控制器中完成，本教程稍后將對此進行解釋。

現在讓我們開始編碼。

下面給出了 HTML 表格的視圖頁面代碼。

 <div class="row">
<div class="col-md-12">
           <table class="table table-bordered" id="posts">
                <thead>
                       <th>Id</th>
                       <th>Title</th>
                       <th>Body</th>
                       <th>Created At</th>
                       <th>Options</th>
                </thead>                
           </table>
    </div>

下面給出了 javascript 代碼。

script>
$(document).ready(function () {
    $('#posts').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax":{
                 "url": "{{ url('allposts') }}",
                 "dataType": "json",
                 "type": "POST",
                 "data":{ _token: "{{csrf_token()}}"}
               },
        "columns": [
            { "data": "id" },
            { "data": "title" },
            { "data": "body" },
            { "data": "created_at" },
            { "data": "options" }
        ]    

    });
});

注意：不要忘記將 CSRF 令牌與 ajax POST 請求一起傳遞，如上所述。 否則，將出現內部服務器錯誤 500。 這是因為 Laravel 默認在所有 POST 控制器函數中檢查 CSRF 令牌以確保最大程度的保護。

現在在 routes/web.php 中發布路由的代碼

Route::post('allposts', 'PostController@allPosts' )->name('allposts');


<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{

}

現在是 PostController 中 allPost 函數的代碼。

public function allPosts(Request $request)
    {

        $columns = array( 
                            0 =>'id', 
                            1 =>'title',
                            2=> 'body',
                            3=> 'created_at',
                            4=> 'id',
                        );

        $totalData = Post::count();

        $totalFiltered = $totalData; 

        $limit = $request->input('length');
        $start = $request->input('start');
        $order = $columns[$request->input('order.0.column')];
        $dir = $request->input('order.0.dir');

        if(empty($request->input('search.value')))
        {            
            $posts = Post::offset($start)
                         ->limit($limit)
                         ->orderBy($order,$dir)
                         ->get();
        }
        else {
            $search = $request->input('search.value'); 

            $posts =  Post::where('id','LIKE',"%{$search}%")
                            ->orWhere('title', 'LIKE',"%{$search}%")
                            ->offset($start)
                            ->limit($limit)
                            ->orderBy($order,$dir)
                            ->get();

            $totalFiltered = Post::where('id','LIKE',"%{$search}%")
                             ->orWhere('title', 'LIKE',"%{$search}%")
                             ->count();
        }

        $data = array();
        if(!empty($posts))
        {
            foreach ($posts as $post)
            {
                $show =  route('posts.show',$post->id);
                $edit =  route('posts.edit',$post->id);

                $nestedData['id'] = $post->id;
                $nestedData['title'] = $post->title;
                $nestedData['body'] = substr(strip_tags($post->body),0,50)."...";
                $nestedData['created_at'] = date('j M Y h:i a',strtotime($post->created_at));
                $nestedData['options'] = "&emsp;<a href='{$show}' title='SHOW' ><span class='glyphicon glyphicon-list'></span></a>
                                          &emsp;<a href='{$edit}' title='EDIT' ><span class='glyphicon glyphicon-edit'></span></a>";
                $data[] = $nestedData;

            }
        }

        $json_data = array(
                    "draw"            => intval($request->input('draw')),  
                    "recordsTotal"    => intval($totalData),  
                    "recordsFiltered" => intval($totalFiltered), 
                    "data"            => $data   
                    );

        echo json_encode($json_data); 

    }