如何在不刷新页面的情况下进行 Laravel 分页

Question

我正在进行在线考试，我想在不同页面中对问题进行分页，但问题是当我转到下一页时，以前的答案因为页面刷新而消失了，所以我怎样才能在没有刷新的情况下进行 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() !!}

Answer 1

遗憾的是，如果没有一点异步 javascript，就无法实现这一点 - 除非您想预加载所有页面。

最好的办法是创建一个以 json 格式返回分页条目的 API，然后使用 javascript 加载它。

Answer 2

最后我使用了 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 -->

并制定一条路线将分页信息转换为： 注意：此路由仅用于将分页数据返回到 json 中

Route::get('/posts', 'postContoller@pagination');

并在控制器中创建一个函数来返回分页信息：

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');