由于我正在显示大数据的输出,因此我尝试使用laravel雄辩的paginate()对它进行分页。我成功进行了分页,但是当我尝试显示其他页面时却没有显示。我的代码或我要访问的链接有问题吗?
我的javascript方法和url:'/ getUsers'
getUsers() {
let $this = this
this.axios.post(this.url).then((response) => {
this.users = response.data.data
$this.makePagination(response.data)
})
}
makePagination(data){
let pagination = {
firstPageUrl: data.first_page_url,
currentPage: data.current_page,
lastPageUrl: data.last_page_url,
lastPage: data.last_page,
nextPageUrl: data.next_page_url,
prevPageUrl: data.prev_page_url
}
this.pagination = pagination
}
fetchPaginatedUsers(url){
this.url = url
this.getUsers()
}
Vue
<ul class="pagination">
<li class="page-item" v-on:click="fetchPaginatedUsers(pagination.prevPageUrl)" :disabled = "!pagination.prevPageUrl"><a class="page-link" href="#"> < </a></li>
<li class="page-item active">
<a class="page-link" href="#">{{pagination.currentPage}}</a>
</li>
<li class="page-item" v-on:click="fetchPaginatedUsers(pagination.nextPageUrl)" :disabled = "!pagination.nextPageUrl" ><a class="page-link" href="#"> > </a></li>
</ul>
<table class="table" style="text-align: left;">
<!--<thead>-->
<tr>
<th scope="col">Image</th>
<th scope="col">Username</th>
<th scope="col">User Type</th>
</tr>
<!--</thead>-->
<tbody>
<tr v-for="data in filteredList">
<td><a v-bind:href=data.profile_picture><img v-bind:src= data.profile_picture style="width: 50px; height: auto;"/></a></td>
<td>{{data.userName}}</td>
<td>{{data.userType}}</td>
<td><b-button variant="primary" v-on:click="editUser(data.id)">View</b-button> </td>
</tr>
</tbody>
</table>
控制器看起来像
public function getUsers() {
$users = User::orderBy('id', 'desc')->paginate(10);
return response()->json($users);
}
路线
Route::post('/getUsers', 'UserController@getUsers');
我可以访问所有的分页数据,但无法在我创建的表中显示它们。