Question

我有一个现有的Laravel项目，最近才被引入DataTables，并且喜欢它的功能，所以我想将它实现到我的项目中。我已经按照指南进行了操作但由于某种原因搜索，分页和过滤器没有显示在我的表格上，但实际的表格会显示。

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

资源控制器

public function resource()
{
	$resources = Resource::with('locations')->get();

	return view('pages.resource', compact('resources'));
}

路线

Route::get('resource', array('as'=>'viewResource', 'uses' => '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

的输出

Answer 1

Leon很接近，但你真正需要做的是运行jQuery来初始化表格的 ID 上的DataTables，这是你目前没有的。考虑修改您的设置：

using System.Data.Entity.Spatial;

请注意，除了向表中添加ID之外，我还添加了<table class="display table table-hover table-bordered", id="TABLENAME">类，这是DataTables要求的一部分。除了该更改之外，您还必须将DataTable初始化更改为：

display

允许将其转换为DataTable。（使用您想要的任何内容填写$('#TABLENAME').DataTable({，只需确保它与HTML表格TABLENAME匹配）

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

Answer 2

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

所以

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

应该成为，

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

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

Answer 3

您知道Laravel Datatables项目http://datatables.yajrabox.com/吗？

我在Laravel项目中使用它并且效果很棒。

将DataTables实现到我的Laravel项目中。

3 个答案: