我正在为服务器端数据表使用yajra数据表 我的控制器是这个
public static function alleventsData(Request $request)
{
$limit = intVal($request->input('length'));
$start = $request->input('start');
$meta = EventsRepository::showMeta();
$totalRecords = $meta[1][1]['Value'];
$offset = intVal($start);
$allEvents = EventsRepository::allEvents($offset, $limit);
return Datatables::collection($allEvents)
->addColumn(
'parent',
function ($allEvents) {
return $allEvents['category_name'];
}
)
->addColumn(
'venueName',
function ($allEvents) {
return $allEvents['venue_name'];
}
)
->addColumn(
'venueLocation',
function ($allEvents) {
return $allEvents['location'];
}
)
->addColumn(
'occurs_at',
function ($allEvents) {
return $allEvents['occurs_at'];
}
)
->addColumn(
'hot_popular_main',
function ($allEvents) {
return '<input type="checkbox" name="hot_popular_main" class= "updatePopertyEvent" attr="hot_popular_main" id="'.$allEvents['id'].'" value="'.$allEvents['hot_popular_main'].'" '.($allEvents['hot_popular_main']==1?'checked="checked"':'').'/>';
}
)
->addColumn(
'synchronize',
function ($allEvents) {
return '<button value="'.$allEvents['id'].'" class="btn btn-info synchronize" >Synchronize</button>';
}
)
->addColumn(
'status',
function ($allEvents) {
$status = $allEvents['status']==1?"Active":"Deactive";
return '<button value="'.$allEvents['id'].'" class="btn btn-info status" data-attr="'.$allEvents['status'].'">'.$status.'</button>';
}
)
->with(['recordsTotal'=>$totalRecords, 'recordsFiltered'=>$totalRecords])
->make(true);
}
我的js就是这个
$(function() {
$('.eventTableAll').DataTable({
processing: true,
serverSide: true,
ajax: '{!! route('datatables.alleventsData') !!}',
columns: [
{ data: 'event_name', name: 'event_name' },
{ data: 'parent', name: 'parent', searchable: true },
{ data: 'venueName', name: 'venueName', searchable: true },
{ data: 'venueLocation', name: 'venueLocation', searchable: true },
{ data: 'occurs_at', name: 'occurs_at', searchable: true },
{ data: 'hot_popular_main', name: 'hot_popular_main' },
{ data: 'synchronize', name: 'synchronize' },
{ data: 'status', name: 'status' }
]
});
});
但问题是当我移动到下一页时,就像第二次它没有得到任何数据,我看到控制台它正在获取数据但没有嵌入数据表数据索引。
答案 0 :(得分:3)
我在2天前遇到了完全相同的问题。 在这里,您将获取带限制和记录的记录。手动偏移并使用Datatables :: collection()。
首先,如果您在laravel设置中为表单启用了csrf:
\App\Http\Middleware\VerifyCsrfToken::class
或者在数据表js函数
之前在ajax头中设置csrf$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
如果这样做了。仍然没有工作,然后继续前进。
解决方案1: 在将获取的数据传递给Datatables :: collection()之前,请使用:
$allEvents = collect(array_pad($allEvents->toArray(), -($iDisplayStart + count($allEvents->toArray())), 0));
这一行为您提供响应Datatables :: collection()的数据,如下所示: 对于第1页: data = [0 =&gt; [event_0],1 =&gt; [event_1],... limit =&gt; [event_limit]];
对于第n页: data = [0 =&gt; [],1 =&gt; [],... offset-1 =?[],offset =&gt; [event_0],offset + 1 =&gt; [event_1],... offset + limit-1 =&gt; [event_limit]];
除了在集合中的偏移量之前创建空索引之外什么都没有。 这是因为collection()或()[或任何其他预构建函数]考虑$ iDisplayStart并从index = $ iDisplayStart开始查找集合中的数据。
最后
return Datatable::of($allEvents)
->with(['recordsTotal' => $allEventsCount, 'recordsFiltered' => $allEventsCount, 'start' => $iDisplayStart])
->make();
解决方案2: 而不是手动实现分页使用yajra的预构建函数:
return Datatables::of($allEvents)
->filter(function ($allEvents) use ($request, $iDisplayLength, $iDisplayOffset) {
$allEvents->skip(($iDisplayOffset) * $iDisplayLength)
->take($iDisplayLength);
return $allEvents;
})
->with(['recordsTotal' => $allEventsCount, 'recordsFiltered' => $allEventsCount, 'start' => $iDisplayStart])
->make();
参考:https://datatables.yajrabox.com/eloquent/post-column-search
注意:如果上述解决方案无效,请注意以下所有事项:
$allEventsCount
是数据库中所有记录的计数。您需要使用->count()
解决方案3:
如果上述解决方案不起作用, 最后一个解决方案是使用datatables.js删除Yajra并使用客户端数据表和代码进行分页。 这并没有给你性能下降,但你需要做更多的客户端编码。 缓存也可用于客户端数据表。
参考:https://datatables.net/examples/server_side/pipeline.html
datatables.net/examples/data_sources/server_side.html