【问题标题】:Laravel 5 datatables with server-side带有服务器端的 Laravel 5 数据表
【发布时间】: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 方法。它具有许多功能,例如排序和过滤,可以对所有记录进行开箱即用

标签: php ajax laravel datatable


【解决方案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>

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

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

    【讨论】:

      猜你喜欢
      • 2015-04-16
      • 2018-12-30
      • 1970-01-01
      • 2016-06-21
      • 2016-02-26
      • 1970-01-01
      • 1970-01-01
      • 2018-04-01
      • 2016-08-29
      相关资源
      最近更新 更多