Контроллер:
use Datatables;
public function index(Request $request)
{
$services = Service::select(['id', 'name_en', 'name_ar', 'color', 'duration', 'friday', 'saturday', 'sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'created_at']);
return Datatables::eloquent($services)->addColumn('action','
<div class="card-action">
<button type="button" class="background-green edit-service" data-toggle="tooltip" data-placement="top" data-original-title="Edit">
<i class="fa fa-edit" data-toggle="modal" data-target="#edit-service"></i>
</button>
<button type="button" class="sweet-5 background-red remove-service" data-toggle="tooltip" data-placement="top" data-original-title="Delete">
<i class="fa fa-trash"></i>
</button>
</div>
')->make(true);
}
Маршрут:
Route::get('servicesAPI' , [
'uses' => 'ServiceController@index',
'as' => 'servicesAPI.index',
'middleware' => 'roles',
'roles' => ['Admin', 'View Services'],
]);
AJAX:
$(function() {
$('#services_table').DataTable({
processing : true,
serverSide : true,
responsive : true,
stateSave : true,
autoWidth : true,
lengthMenu : [[5, 10, 15, 25, 50, 100], [5, 10, 15, 25, 50, 100]],
paging : true,
pagingTypeSince : 'numbers',
pagingType : 'full_numbers',
ajax : 'servicesAPI',
deferRender: true,
order: [[ 10, "asc" ]],
columns : [
{ data: 'name_en', name: 'name_en',
"render": function ( data, type, row ) {
return '<b style="color:'+row['color']+'">' + data + '</b>';
}
},
{ data: 'color', name: 'color' , visible: false},
{ data: 'duration', name: 'duration' ,
"render": function ( data, type, row ) {
return data + ' Min';
}
},
{ data: 'saturday', name: 'saturday',
"render": function ( data, type, row ) {
switch (data) {
case '0':
return '<i class="fa fa-close text-red"></i>';
break;
case '1':
return '<i class="fa fa-check text-blue"></i>';
break;
}
}
},
{ data: 'sunday', name: 'sunday',
"render": function ( data, type, row ) {
switch (data) {
case 0:
return '<i class="fa fa-close text-red"></i>';
break;
case '1':
return '<i class="fa fa-check text-blue"></i>';
break;
}
}
},
{ data: 'monday', name: 'monday',
"render": function ( data, type, row ) {
switch (data) {
case 0:
return '<i class="fa fa-close text-red"></i>';
break;
case '1':
return '<i class="fa fa-check text-blue"></i>';
break;
}
}
},
{ data: 'tuesday', name: 'tuesday',
"render": function ( data, type, row ) {
switch (data) {
case 0:
return '<i class="fa fa-close text-red"></i>';
break;
case '1':
return '<i class="fa fa-check text-blue"></i>';
break;
}
}
},
{ data: 'wednesday', name: 'wednesday',
"render": function ( data, type, row ) {
switch (data) {
case 0:
return '<i class="fa fa-close text-red"></i>';
break;
case '1':
return '<i class="fa fa-check text-blue"></i>';
break;
}
}
},
{ data: 'thursday', name: 'thursday',
"render": function ( data, type, row ) {
switch (data) {
case 0:
return '<i class="fa fa-close text-red"></i>';
break;
case '1':
return '<i class="fa fa-check text-blue"></i>';
break;
}
}
},
{ data: 'friday', name: 'friday',
"render": function ( data, type, row ) {
switch (data) {
case 0:
return '<i class="fa fa-close text-red"></i>';
break;
case '1':
return '<i class="fa fa-check text-blue"></i>';
break;
}
}
},
{ data: 'id', name: 'id' , visible: false},
{ data: 'action', name: 'action', orderable: false, searchable: false}
]
});
});
Вид:
<table id="services_table" class="table table-bordered table-center table-striped">
<thead>
<tr>
<th>@lang('services.service_name')</th>
<th>@lang('services.color')</th>
<th>@lang('services.duration')</th>
<th>@lang('services.sat')</th>
<th>@lang('services.sun')</th>
<th>@lang('services.mon')</th>
<th>@lang('services.tue')</th>
<th>@lang('services.wed')</th>
<th>@lang('services.thu')</th>
<th>@lang('services.fri')</th>
<th>@lang('services.service_created')</th>
<th>@lang('clients.action')</th>
</tr>
</thead>
</table>
Сеть:
ничья: 5, recordsTotal: 12, recordsFiltered: 12, data: [,…]
{draw: "5", столбцы: [{data: "name_en", name: "name_en", searchable: "true" orderable: "true",…},…],…}
recordsFiltered: 12
recordsTotal: 12
Сортировка работает и возвращает новые данные и исправляет их.
изменение длины (на страницу) работает.
но нумерация страниц не работает из-за
recordsFiltered: 12
recordsTotal: 12
так должно быть:
recordsFiltered: 5 или 10 (за страницу)
recordsTotal: 12
в чем причина?
ОБНОВЛЕНИЕ: Наконец-то это сработало! .. я обновил jquery.datatables.min.js
с v1.10.7 до v1.10.19 без понижения Yajra Datatable или
обновление jquery.datatables.min.css