Пожалуйста, внимательно ознакомьтесь с документацией здесь
Вам необходимо вернуть объект JSON с двумя свойствами:
data : array
- Массив объектов строк с одинаковыми ключами.
count: number
- Общее количество до лимита.
Например, ваш JSON должен выглядеть так:
[
"data": [
{
"name": "Name1",
"created_at": "01-01-2019 00:00:01,
"updated_at": "02-01-2019 10:12:13",
"pushed_at" : "01-01-2019 00:00:05"
},
{
"name": "Name2",
"created_at": "01-01-2019 00:00:01,
"updated_at": "02-01-2019 10:12:13",
"pushed_at" : "01-01-2019 00:00:05"
},
{
"name": "Name3",
"created_at": "01-01-2019 00:00:01,
"updated_at": "02-01-2019 10:12:13",
"pushed_at" : "01-01-2019 00:00:05"
}
],
"count":100
]
В вашем контроллере вы не возвращаете общее количество строк для vue-table-2
нумерации страниц. Добавьте количество в вашем ответе, чтобы решить вашу проблему
Измените код контроллера с помощью следующего кода:
public function findObjects(Request $request)
{
$objects = Objects::withTrashed();
$sort = $request->get('sort');
$direction = $request->get('direction');
$name = $request->get('name');
$created_by = $request->get('created_by');
$type = $request->get('type');
$limit = (int)$request->get('limit');
$page = (int)$request->get('page');
$created_at = $request->get('created_at');
if ($sort !== null && $direction !== null) {
$objects->orderBy($sort, $direction);
}
if ($name !== null) {
$objects->where('name', 'like', '%' . $name . '%');
}
if ($created_by !== null) {
$objects->where('created_by', 'like', '%' . $created_by . '%');
}
if ($type !== null) {
$objects->where('type', 'like', '%' . $type . '%');
}
if ($created_at !== null) {
$date_range = json_decode($created_at);
$objects->whereBetween('created_at', [Carbon::parse($date_range->start), Carbon::parse($date_range->end)]);
}
$count = $objects->count();
$objects->offset($limit * ($page - 1))->limit($limit);
$data = $objects->get()->toArray();
return response()->json([
'data' => $data,
'count' => $count
]);
}
И измените свой код vuejs следующим образом
<template>
<div>
<v-server-table :columns="columns" url="/object/find" :options="options">
</v-server-table>
</div>
</template>
<script>
export default {
data () {
return {
columns: ['name', 'type', 'created_by', 'created_at'],
options: {
perPage: 5,
perPageValues: [5, 10, 15, 25, 50, 100],
pagination: {chunk: 5},
dateColumns: ['created_at'],
dateFormat: 'DD-MM-YYYY HH:mm',
datepickerOptions: {
showDropdowns: true,
autoUpdateInput: true,
}
filterable: ['name', 'type','created_by', 'created_at'],
sortable: ['name', 'type', 'created_by', 'created_at'],
requestAdapter (data) {
return {
sort: data.orderBy ? data.orderBy : 'name',
direction: data.ascending ? 'asc' : 'desc',
limit: data.limit ? data.limit : 5,
page: data.page,
name: data.query.name,
created_by: data.query.created_by,
type: data.query.type,
created_at: data.query.created_at
}
}
}
}
},
}
</script>