我找不到任何這樣的問(wèn)題。所有其他問(wèn)題都沒(méi)有像我一樣使用 Bootstrap 數(shù)據(jù)表 - 他們構(gòu)建了自己的表。我的 Laravel 5.8 應(yīng)用程序當(dāng)前返回可搜索數(shù)據(jù)表中的用戶列表。問(wèn)題是，它一次返回所有用戶，因此頁(yè)面加載速度非常慢，因?yàn)閼?yīng)用程序有很多用戶。我的routes\web.php：Route::get('/admin/customers', 'Admin\CustomerController@renderPage')->name('admin.customers');我的app\Http\Controllers\Admin\CustomerController.php：<?phpnamespace 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生成的（我已經(jīng)刪除了不相關(guān)的 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>所以問(wèn)題是：為了添加對(duì)分頁(yè)的支持，我需要更新什么？
2 回答
拉丁的傳說(shuō)
TA貢獻(xiàn)1789條經(jīng)驗(yàn) 獲得超8個(gè)贊
嘗試通過(guò) Ajax 加載 DataTable，而不是在服務(wù)器上呈現(xiàn) html。
HTML
<table id="data-table" class="table table-striped table-bordered dt-responsive nowrap dataTable no-footer dtr-inline collapsed">
<thead>
<tr>
<th>ID</th>
<th>First name</th>
<th>Last name</th>
<th>E-Mail</th>
<th>Action</th>
</tr>
<tfoot></tfoot>
</table>
JavaScript
const table = $('#customer-table').DataTable({
'processing': true,
'serverSide': true,
'ajax': {
'url': 'customers/list',
'type': 'POST'
},
'columns': [
{'data': 'id'},
{'data': 'first_name'},
{'data': 'last_name'},
{'data': 'email'},
{
'orderable': false,
'searchable': false,
'data': null,
'render': function (data, type, row, meta) {
// render custom html
return '<button type="button" class="btn btn-info">Edit</button>';
}
}
],
});
PHP
在服務(wù)器端獲取 POST 請(qǐng)求參數(shù)并構(gòu)建一個(gè)動(dòng)態(tài)查詢（使用 QueryBuilder）。
然后將結(jié)果集映射到 DataTable 兼容的 JSON 響應(yīng)中：
控制器動(dòng)作
// Build dynamic query
// ...
// Fetch result set
// ...
return response()->json([
'recordsTotal' => $count,
'recordsFiltered' => $count,
'draw' => $draw,
'data' => $rows,
];
慕妹3146593
TA貢獻(xiàn)1820條經(jīng)驗(yàn) 獲得超9個(gè)贊
public function renderPage() {
$customers = DB::table('users')->paginate(15);
return view('pages.admin.customers')->with([
'customers' => $customers
]);
}
- 2 回答
- 0 關(guān)注
- 163 瀏覽
添加回答
舉報(bào)
0/150
提交
取消