Вы можете использовать https://github.com/yajra/laravel-datatables Я работаю с 50-метровыми данными, но я не использую данные Яджры. Если вы хотите создать свои коды:
Метод данных
public function indexDataTable ( Request $request )
{
$aColumns = [
'checkbox',
'id',
'title',
'description',
'created_at',
'options',
];
$limit = $request->input ( 'length' );
$start = $request->input ( 'start' );
$orderColumn = "id";
$dir = $request->input ( 'order.0.dir' ) ?? 'desc';
$posts = null;
//For starting query
$posts = Post::where ( 'id', '>', 0 );
$totalData = $posts->count ();
if ( ! empty( $request->input ( 'columns.1.search.value' ) ) )
{
$postId = $request->input ( 'columns.1.search.value' );
$posts = $posts->where ( 'id', $postId );
}
//other filters
if ( $limit == -1 )
$limit = 100000;
$totalFiltered = $posts->count ();
$posts = $posts->offset ( $start )
->limit ( $limit );
$requestAll = $request->all();
if (isset($requestAll['order'][0]['column']))
{
$orderColumn = $aColumns[$requestAll['order'][0]['column']];
}
$posts = $posts->orderBy ( $orderColumn, $dir );
$posts = $posts->get();
$data = [];
if ( ! empty( $posts ) )
{
foreach ( $posts as $post )
{
$edit = route ( 'posts.edit', $post->id );
$nestedData['checkbox'] = "<div class=\"custom-control custom-checkbox\"><input type=\"checkbox\" id='order_ids{$post->id}' name='post_ids[]' value='{$post->id}' class=\"custom-control-input order-checkbox\"><label class=\"custom-control-label\" for=\"order_ids{$post->id}\"></label></div>";
$nestedData['id'] = $post->id;
$nestedData['title'] = $post->title;
$nestedData['description'] = $post->description;
$nestedData['created_at'] = $post->created_at->format ( "Y-m-d H:i:s");
$nestedData['options'] = "<a href='{$edit}'><i class='mdi mdi-pencil font-16'></i></a>";
$data[] = $nestedData;
}
}
$json_data = [
"draw" => intval ( $request->input ( 'draw' ) ),
"recordsTotal" => intval ( $totalData ),
"recordsFiltered" => intval ( $totalFiltered ),
"data" => $data
];
echo json_encode ( $json_data );
}
На маршруте:
Route::post ( 'posts/datatable', 'PostController@indexDatatable' )->name ( 'posts.datatable' );
На блейде:
<form id="datatable_form" target="_blank" method="post" action="#">
@csrf
<table class="table table-striped table-bordered table-hover" id="posts">
<thead>
<th scope="col">@lang('posts.index.columns.checkbox')</th>
<th scope="col">@lang('posts.index.columns.id')</th>
<th scope="col">@lang('posts.index.columns.title')</th>
<th scope="col">@lang('posts.index.columns.description')</th>
<th scope="col">@lang('posts.index.columns.created_at')</th>
<th scope="col">@lang('posts.index.columns.action')</th>
</thead>
<thead>
<tr>
<th></th>
<th>
<input type="text" data-column="1"
class="data-table-search-input-text form-control"
style="width: 100%">
</th>
<th>
<input type="text" data-column="2"
class="data-table-search-input-text form-control"
style="width: 100%">
</th>
<th>
<input type="text" data-column="3"
class="data-table-search-input-text form-control"
style="width: 100%">
</th>
<th>
<input type="text" data-column="4"
class="data-table-search-input-text form-control"
style="width: 100%">
</th>
<th></th>
</tr>
</thead>
</table>
</form>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.4/js/dataTables.buttons.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.4/js/buttons.bootstrap4.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script>
$.ajaxSetup ({
headers: {
'X-CSRF-TOKEN': $ ('meta[name="csrf-token"]').attr ('content')
}
});
var postsTable = $ ('#posts').dataTable ({
"ordering": true,
"processing": true,
"serverSide": true,
"ajax": {
"url": "{{ route('panel.posts.datatable') }}",
"dataType": "json",
"type": "POST"
},
"columns": [
{"data": "checkbox"},
{"data": "id"},
{"data": "title"},
{"data": "description"},
{"data": "created_at"},
{"data": "options"}
],
"order": [[1, "desc"]],
"language": {
"processing": "@lang('pagination.datatable.processing')",
"lengthMenu": "@lang('pagination.datatable.lengthMenu')",
"zeroRecords": "@lang('pagination.datatable.zeroRecords')",
"info": "@lang('pagination.datatable.info')",
"infoEmpty": "@lang('pagination.datatable.infoEmpty')",
"infoFiltered": "@lang('pagination.datatable.infoFiltered')",
"paginate": {
"first": "@lang('pagination.datatable.paginate.first')",
"previous": "@lang('pagination.datatable.paginate.previous')",
"next": "@lang('pagination.datatable.paginate.next')",
"last": "@lang('pagination.datatable.paginate.last')"
}
},
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Hepsi"]],
stateSave: false,
});
$ ('.data-table-search-input-text').on ('keyup change', function () {
var inputElement = $ (this);
ojoDelay (function () {
var i = inputElement.attr ('data-column');
var v = inputElement.val ();
postsTable.api ().columns (i).search (v).draw ();
//usersTable.api ().ajax.reload ();
}, 1000, this);
});
</script>
<script>
ojoDelay = (function () {
var timer = 0;
return function (callback, ms, that) {
clearTimeout (timer);
timer = setTimeout (callback.bind (that), ms);
};
}) ();
</script>