如何在不刷新页面的情况下进行 Laravel 分页
How to make Laravel pagination without refresh page
我正在做一个在线考试,我想在不同的页面中对问题进行分页,但问题是当我转到下一页时,之前的答案消失了,因为页面刷新了所以我怎样才能使 Laravel分页不刷新?
运行 Laravel 5.8
控制器代码:
$questions = $exam->questions()->paginate(1);
return view('exam.exam',compact('questions','exam'));
$questions = $exam->questions()->paginate(1);
return view('exam.exam',compact('questions','exam'));
查看代码
{!! $questions->render() !!}
遗憾的是,如果没有一点异步就无法实现这一点 javascript - 除非您想预加载所有页面。
您最好的选择是创建一个 API returns 分页条目 json 格式,然后用 javascript.
加载它
最后我用 vue.js 和 axios
做到了
app.js 代码:
data: {
posts: {},
pagination: {
'current_page': 1
}
},
methods: {
fetchPosts() {
axios.get('posts?page=' + this.pagination.current_page)
.then(response => {
this.posts = response.data.data.data;
this.pagination = response.data.pagination;
})
.catch(error => {
console.log(error.response.data);
});
}
},
mounted() {
this.fetchPosts();
}
//and i added the pagination in a Component:
<template>
<nav class="pagination is-centered" role="navigation" aria-label="pagination">
<a class="pagination-previous" @click.prevent="changePage(1)" :disabled="pagination.current_page <= 1">First page</a>
<a class="pagination-previous" @click.prevent="changePage(pagination.current_page - 1)" :disabled="pagination.current_page <= 1">Previous</a>
<a class="pagination-next" @click.prevent="changePage(pagination.current_page + 1)" :disabled="pagination.current_page >= pagination.last_page">Next page</a>
<a class="pagination-next" @click.prevent="changePage(pagination.last_page)" :disabled="pagination.current_page >= pagination.last_page">Last page</a>
<ul class="pagination" style="display:block">
<li v-for="page in pages">
<a class="pagination-link" :class="isCurrentPage(page) ? 'is-current' : ''" @click.prevent="changePage(page)">{{ page }}</a>
</li>
</ul>
</nav>
</template>
<style>
.pagination {
margin-top: 40px;
}
</style>
<script>
export default {
props: ['pagination', 'offset'],
methods: {
isCurrentPage(page) {
return this.pagination.current_page === page;
},
changePage(page) {
if (page > this.pagination.last_page) {
page = this.pagination.last_page;
}
this.pagination.current_page = page;
this.$emit('paginate');
}
},
computed: {
pages() {
let pages = [];
let from = this.pagination.current_page - Math.floor(this.offset / 2);
if (from < 1) {
from = 1;
}
let to = from + this.offset - 1;
if (to > this.pagination.last_page) {
to = this.pagination.last_page;
}
while (from <= to) {
pages.push(from);
from++;
}
return pages;
}
}
}
</script>
<!-- begin snippet: js hide: false console: true babel: false -->
并制定一条路线,将分页信息放入:
注意:此路由仅用于将分页数据return转换为json
Route::get('/posts', 'postContoller@pagination');
并在控制器中对 return 分页信息创建一个函数:
public function pagination(\App\post $post){
$posts = $post->paginate(1);
$response = [
'pagination' => [
'total' => $posts->total(),
'per_page' => $posts->perPage(),
'current_page' => $posts->currentPage(),
'last_page' => $posts->lastPage(),
'from' => $posts->firstItem(),
'to' => $posts->lastItem()
],
'data' => $posts
];
return response()->json($response);
}
现在创建一个新视图并将其粘贴到
<div id="app">
<div v-for="post in posts">
<div class="font-weight-bold p-4"> @{{post.qname}}</div>
</div>
</div>
并为其创建路线
Route::get('/', 'postController@index');
我正在做一个在线考试,我想在不同的页面中对问题进行分页,但问题是当我转到下一页时,之前的答案消失了,因为页面刷新了所以我怎样才能使 Laravel分页不刷新?
运行 Laravel 5.8
控制器代码:
$questions = $exam->questions()->paginate(1);
return view('exam.exam',compact('questions','exam'));
$questions = $exam->questions()->paginate(1);
return view('exam.exam',compact('questions','exam'));
查看代码
{!! $questions->render() !!}
遗憾的是,如果没有一点异步就无法实现这一点 javascript - 除非您想预加载所有页面。
您最好的选择是创建一个 API returns 分页条目 json 格式,然后用 javascript.
加载它最后我用 vue.js 和 axios
做到了app.js 代码:
data: {
posts: {},
pagination: {
'current_page': 1
}
},
methods: {
fetchPosts() {
axios.get('posts?page=' + this.pagination.current_page)
.then(response => {
this.posts = response.data.data.data;
this.pagination = response.data.pagination;
})
.catch(error => {
console.log(error.response.data);
});
}
},
mounted() {
this.fetchPosts();
}
//and i added the pagination in a Component:
<template>
<nav class="pagination is-centered" role="navigation" aria-label="pagination">
<a class="pagination-previous" @click.prevent="changePage(1)" :disabled="pagination.current_page <= 1">First page</a>
<a class="pagination-previous" @click.prevent="changePage(pagination.current_page - 1)" :disabled="pagination.current_page <= 1">Previous</a>
<a class="pagination-next" @click.prevent="changePage(pagination.current_page + 1)" :disabled="pagination.current_page >= pagination.last_page">Next page</a>
<a class="pagination-next" @click.prevent="changePage(pagination.last_page)" :disabled="pagination.current_page >= pagination.last_page">Last page</a>
<ul class="pagination" style="display:block">
<li v-for="page in pages">
<a class="pagination-link" :class="isCurrentPage(page) ? 'is-current' : ''" @click.prevent="changePage(page)">{{ page }}</a>
</li>
</ul>
</nav>
</template>
<style>
.pagination {
margin-top: 40px;
}
</style>
<script>
export default {
props: ['pagination', 'offset'],
methods: {
isCurrentPage(page) {
return this.pagination.current_page === page;
},
changePage(page) {
if (page > this.pagination.last_page) {
page = this.pagination.last_page;
}
this.pagination.current_page = page;
this.$emit('paginate');
}
},
computed: {
pages() {
let pages = [];
let from = this.pagination.current_page - Math.floor(this.offset / 2);
if (from < 1) {
from = 1;
}
let to = from + this.offset - 1;
if (to > this.pagination.last_page) {
to = this.pagination.last_page;
}
while (from <= to) {
pages.push(from);
from++;
}
return pages;
}
}
}
</script>
<!-- begin snippet: js hide: false console: true babel: false -->
Route::get('/posts', 'postContoller@pagination');
并在控制器中对 return 分页信息创建一个函数:
public function pagination(\App\post $post){
$posts = $post->paginate(1);
$response = [
'pagination' => [
'total' => $posts->total(),
'per_page' => $posts->perPage(),
'current_page' => $posts->currentPage(),
'last_page' => $posts->lastPage(),
'from' => $posts->firstItem(),
'to' => $posts->lastItem()
],
'data' => $posts
];
return response()->json($response);
}
现在创建一个新视图并将其粘贴到
<div id="app">
<div v-for="post in posts">
<div class="font-weight-bold p-4"> @{{post.qname}}</div>
</div>
</div>
并为其创建路线
Route::get('/', 'postController@index');