what is error when i want to fetching data with paginate(10) the Vue js dosn't do it but when i use paginate(5) it working good this code of Controller with relationship in model files and the response status 200 ok working
$results = Posts::with(['comment'])
->orderBy('created_at', 'desc')
->paginate(5);
return response()
->json(['results' => $results]);
this code is actually worked for me but i want to make 10 results in my page Like this
$results = Posts::with(['comment'])
->orderBy('created_at', 'desc')
->paginate(10);
return response()
->json(['results' => $results]);
with ->paginate(10) or > 5 not giving any data and get error on console with Vue js but the response is ok 200 i make like this application without using vujs i used laravel from 3 years , sorry dd() and postman and all things used is done giving me the object json named results { 0{} 1{} 2{} } all working
SUGGESTIONS
for pagination i will suggest you use jquery datatable for proper pagination. Its quite okay and saves lots of time. see below the sample implementation:
//this section call the document ready event making sure that datatable is loaded
<script>
$(document).ready(function() {
$('#').DataTable();
} );
//this section display the datatable
$(document).ready(function() {
$('#mytable').DataTable( {
dom: 'Bfrtip',
"pageLength": 10, //here you can set the page row number limit
buttons: [
{
extend: 'print',
customize: function ( win ) {
$(win.document.body)
.css( 'font-size', '10pt' )
.prepend(
''
);
$(win.document.body).find( 'table' )
.addClass( 'compact' )
.css( 'font-size', 'inherit' );
}
}
]
} );
} );
</script>
//you can display record on the datatable after querying from your cntroller as shown below
<div class="table-responsive col-md-12">
<table id="mytable" class="table table-bordered table-striped table-highlight">
<thead>
<tr bgcolor="#c7c7c7">
<th>S/N</th>
<th>Name</th>
</tr>
</thead>
<tbody>
@php
$i=1;
@endphp
@foreach($queryrecord as $list)
<tr>
<td>{{ $i++ }}</td>
<td>{{ $list->name }}</td>
</tr>
@endforeach
</tbody>
</table>
<hr />
</div>