Laravel 5.8：Bootstrap 数据表的雄辩分页

Question

我找不到任何这样的问题。所有其他问题都没有像我一样使用 Bootstrap 数据表 - 他们构建了自己的表。

我的 Laravel 5.8 应用程序当前返回可搜索数据表中的用户列表。问题是，它一次返回所有用户，因此页面加载速度非常慢，因为应用程序有很多用户。

我的routes\web.php：

Route::get('/admin/customers', 'Admin\CustomerController@renderPage')->name('admin.customers');

我的app\Http\Controllers\Admin\CustomerController.php：

<?php

namespace App\Http\Controllers\Admin;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller;

use ConsoleTVs\Charts\Facades\Charts;

use App\User;

class CustomerController extends Controller

{

    public function renderPage() {

        $customers = User::get();

        return view('pages.admin.customers')->with([

                'customers' => $customers

            ]);

    }

}

我在视图中的表格是这样resources\views\pages\admin\customers.blade.php生成的（我已经删除了不相关的 HTML 代码）：

<!-- Bootstrap -->

<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<!-- Datatables -->

<link rel="stylesheet" href="/css/dataTables.bootstrap.min.css">

<div class="table-responsive">

    <table class="table table-condensed table-hover" id="customers-table">

        <thead>

            <tr>

                <th>#</th>

                <th>First name</th>

                <th>Last Name</th>

                <th>Email Address</th>

            </tr>

        </thead>

        <tbody>

            @foreach($customers as $customer)

            <tr>

                <td>{{ $customer->id }}</td>

                <td>{{ $customer->first_name }}</td>

                <td>{{ $customer->last_name }}</td>

                <td>{{ $customer->email }}</td>

            </tr>

            @endforeach

        </tbody>

    </table>

</div>

<!-- Datatables -->

<script src="/js/jquery.dataTables.min.js"></script>

<script src="/js/dataTables.bootstrap.min.js"></script>

                }

            }

        });

    } );

</script>

所以问题是：为了添加对分页的支持，我需要更新什么？

Answer 1

尝试通过 Ajax 加载 DataTable，而不是在服务器上呈现 html。HTML<table id="data-table" class="table table-striped table-bordered dt-responsive nowrap dataTable no-footer dtr-inline collapsed">&nbsp; &nbsp; <thead>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <th>ID</th>&nbsp; &nbsp; &nbsp; &nbsp; <th>First name</th>&nbsp; &nbsp; &nbsp; &nbsp; <th>Last name</th>&nbsp; &nbsp; &nbsp; &nbsp; <th>E-Mail</th>&nbsp; &nbsp; &nbsp; &nbsp; <th>Action</th>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tfoot></tfoot></table>JavaScriptconst table = $('#customer-table').DataTable({&nbsp; &nbsp; 'processing': true,&nbsp; &nbsp; 'serverSide': true,&nbsp; &nbsp; 'ajax': {&nbsp; &nbsp; &nbsp; &nbsp; 'url': 'customers/list',&nbsp; &nbsp; &nbsp; &nbsp; 'type': 'POST'&nbsp; &nbsp; },&nbsp; &nbsp; 'columns': [&nbsp; &nbsp; &nbsp; &nbsp; {'data': 'id'},&nbsp; &nbsp; &nbsp; &nbsp; {'data': 'first_name'},&nbsp; &nbsp; &nbsp; &nbsp; {'data': 'last_name'},&nbsp; &nbsp; &nbsp; &nbsp; {'data': 'email'},&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'orderable': false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'searchable': false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'data': null,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'render': function (data, type, row, meta) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // render custom html&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return '<button type="button" class="btn btn-info">Edit</button>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; ],});PHP在服务器端获取 POST 请求参数并构建一个动态查询（使用 QueryBuilder）。然后将结果集映射到 DataTable 兼容的 JSON 响应中：控制器动作// Build dynamic query// ...// Fetch result set// ...return response()->json([&nbsp; &nbsp; 'recordsTotal' => $count,&nbsp; &nbsp; 'recordsFiltered' => $count,&nbsp; &nbsp; 'draw' => $draw,&nbsp; &nbsp; 'data' => $rows,];

Answer 2

public function renderPage() {&nbsp; &nbsp; $customers = DB::table('users')->paginate(15);&nbsp; &nbsp; return view('pages.admin.customers')->with([&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'customers' => $customers&nbsp; &nbsp; &nbsp; &nbsp; ]);}