带有服务器端的 Laravel 5 数据表

Posted 2023-03-14

【中文标题】带有服务器端的 Laravel 5 数据表

【英文标题】：Laravel 5 datatables with server-side

【发布时间】：2015-09-09 13:55:57

【问题描述】：

我正在尝试将 datatables 插件与 laravel 一起使用，因为我需要管理大表，而 laravel 分页不够好。

我正在使用yajra/laravel-datatables 组件，但我无法让它工作，它会引发错误：

DataTables 警告：table id=project-table - Ajax 错误。 有关此错误的更多信息，请参阅http://datatables.net/tn/7

看了之后不知道怎么解决，我很确定和我的路由有关系，因为我不太明白ajax是怎么获取结果的。

这就是我所做的：

routes.php

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'
    ]
);

);

【问题讨论】：

您是否按照帮助页面中的调试步骤进行操作？你得到什么错误代码？

是的，我忘了说，我收到错误代码 500

“……因为我需要管理大表，而 laravel 分页不够好。”为什么？这正是分页的用途。

是的，确实，但我更喜欢带有数据表插件的 ajax 方法。它具有许多功能，例如排序和过滤，可以对所有记录进行开箱即用

【参考方案1】：

Laravel 中的 DataTables 服务器端处理

在本教程中，我将向您展示在 Laravel 中使用远程服务器端处理实现 DataTables jQuery 插件的最简单方法。在这里，我将向您展示如何在 Laravel 中通过 ajax 从远程 mysql 数据库中获取数据。对于那些不了解 Datatables 的人，DataTables 是一个用于 jQuery javascript 库的表格增强插件，它有助于以最小的努力为纯 html 表格添加排序、分页和过滤功能。主要目标是增强普通 HTML 表格中数据的可访问性。

现在在我们开始编码之前，在您的视图页面中包含来自 CDN 的 Datatables CSS 文件和 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>

现在让我们了解我们需要完成的所有任务

我们需要限制表的大小。 （默认为 10、25、50 或 100 条目） 现在实现搜索功能。 分页任务。

以上所有任务都将在控制器中完成，本教程稍后会解释。

现在让我们开始编码吧。

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 Token 与 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); 

    

【参考方案2】：

将ProjectController.php 中的函数更改为getDatatable（使T 小写）。然后将您的 ajax 请求中的 url 更改为 projects/datatable（没有 get。由于您使用了控制器路由，控制器将在 projects/datatable 处侦听 GET 请求）。

如果不行，请在浏览器直接打开projects/datatable页面时发布回复。

【讨论】：

你能把你的整个controller.php文件贴出来吗？还有整个刀片文件。

嗯，显然我做了更改，但没有注意到。您指出的命名是问题所在。谢谢贝克街！

【参考方案3】：

Laravel 5.1 必须安装在数据表版本 6.0：

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