在我的 Laravel 项目中实现 DataTables。答案

【问题标题】：Implementing DataTables into my Laravel project.在我的 Laravel 项目中实现 DataTables。
【发布时间】：2016-08-02 17:48:54
【问题描述】：

我有一个现有的 Laravel 项目，最近才被介绍给 DataTables，并且喜欢它的功能，所以我想在我的项目中实现它。我已按照指南进行操作，但由于某种原因，搜索、分页和过滤器未显示在我的表格中，但实际表格确实显示。

我认为我在主视图中错误地安装了资产，这是我能想到的唯一原因，任何帮助都会很棒。

资源控制器

public function resource()
{
	$resources = Resource::with('locations')->get();

	return view('pages.resource', compact('resources'));
}

路线

Route::get('resource', array('as'=&gt;'viewResource', 'uses' =&gt; 'ResourceController@resource'));

主视图 (app.blade.php)

<!doctype html>
<html lang="en">
  
......

@yield('scripts')
<!-- Bootstrap Based Data Table Plugin Script-->
  
<script src="code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>

<script src="cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css"></script>
        
<script src="cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
  
</body>
</html>

resource.blade.php

div class="wrapper">
    <section class="panel-primary">
        <div class="panel-heading">
            <b> Resource Info</b>
        </div>
        <div class="panel-body">
            <table class="table table-hover table-bordered">
                <thead>
                    <th>Name</th>
                    <th>Description</th>
                    <th>Address</th>
                    <th>City</th>
                    <th>Zip Code</th>
                    <th>County</th>
                </thead>
                <tbody>
                @foreach($resources as $resource)
                    @foreach ($resource->locations as $location)
                        <tr>
                            <td> {{ $resource->Name }}</td>
                            <td> {{ $resource->Description }}</td>
                            <td> {{ $location->Address }}</td>
                            <td> {{ $location->City }}</td>
                            <td> {{ $location->Zip_Code }}</td>
                            <td> {{ $location->County }}</td>
                        </tr>
                    @endforeach
                @endforeach
                </tbody>
            </table>
        </div>
    </section>
    </div>
    @section('scripts')
     <script>
        $('.resource').DataTable({
            select:true,
            "order": [[0, "desc"]],
            "scrollY"   :"380px",
            "scrollCollapse": true,
            "paging"    :true,
            "bProcessing"   :true
        });
    </script>
    
    @stop

输出

【问题讨论】：

作为不相关的说明，您应该将bProcessing替换为processing；前者是 v1.10 之前的符号。它会起作用，但与您的其他符号不一致。

标签： php laravel datatables

【解决方案1】：

Leon 很接近，但您实际需要做的是运行 jQuery 来初始化当前没有的表的 ID 上的 DataTables。考虑像这样修改您的设置：

<table class="display table table-hover table-bordered", id="TABLENAME">

请注意，除了向表添加 ID 之外，我还添加了 display 类，这是 DataTables 要求的一部分。除了该更改之外，您还必须将 DataTable 初始化更改为：

$('#TABLENAME').DataTable({

允许它变成一个DataTable。（随便填TABLENAME，只要确保它与HTML表格id匹配）

从您的输出看来，您得到的只是一个纯 HTML 表格，没有任何 DataTables 功能。这两个更改应该会为您提供正确的 DataTable。

【讨论】：

谢谢！这似乎是我所缺少的，但现在每当我尝试对表格执行任何操作时，我都会收到 DataTables warning: table id=resource - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1 的警报。
@ph0bolus 检查发送到服务器和从服务器发送的 JSON（使用开发人员工具或 Fiddler）。格式有问题（这与您最初的问题无关）。查看该 datatables.net 页面以获取有关诊断的更多信息。很奇怪，你得到了这个，因为我没有看到你使用 ajax 来处理通常导致它的数据。
我检查了 datatables.net 页面，但它对找出问题并没有太大帮助，所以通过反复试验，我能够通过删除我之前添加的一行来解决问题发帖时，DataTable 声明中是serverSide: true,。
@ph0bolus 哦，那肯定会导致该错误。 ServerSide 要求您的服务器对数据进行所有处理/排序/过滤，而不是由插件自动执行，并且它将 JSON 数据发送/接收到处理程序以执行此操作。由于您没有适当的处理程序，因此您得到了invalid JSON。

【解决方案2】：

看起来您需要将用作数据表句柄的类添加到实际表中。

所以

<table class="table table-hover table-bordered">

应该变成，

<table class="table table-hover table-bordered resource">

如果您使用的是 Laravel，以下包也可以很好地集成通过 ajax 获取内容：https://github.com/yajra/laravel-datatables

【讨论】：

谢谢，我已将resource 添加到表类中，但没有任何改变。

【解决方案3】：

你知道 Laravel 数据表项目 http://datatables.yajrabox.com/ 吗？

我在我的 Laravel 项目中使用它并且效果非常好。

【讨论】：

是的，这就是我目前正在使用的。