php + vue + element-ui 實現分頁功能--頁面不刷新

利用的是 Yii2.0 框架做的，下面直接上代碼：

前臺頁面： 

<div class="email-list">
    <el-table :data="tableData" border style="width: 100%">
        <el-table-column label="郵件" prop="email_domain" width="200"></el-table-column>
        <el-table-column label="創建時間" prop="created_time" width="200"></el-table-column>
    </el-table>
    <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total">
    </el-pagination>
</div>
<script>
    var emailListVue = new Vue({
        el: '.email-list',
        data: {
            currentPage: 1,
            total: <?= $total ?>,
            pageSize: <?= $pageSize ?>,
            tableData: <?= json_encode($domains)?>,
        },
        methods: {
            handleCurrentChange: function (currentPage) {
                var vm = this;
                $.get('/index/get-email-list?page=' + currentPage, function (res) {
                    vm.tableData = res.domains;
                });
            },
        },
    })
</script>

後臺頁面：

public $pageSize = 3;
public function actionEmailList()
{
    $email = EmailDomain::find();
    $total = $email->count();
    $domains = $email->offset(0)->limit($this->pageSize)->asArray()->all();
    return $this->render('email-list', [
        'total' => $total,
        'pageSize' => $this->pageSize,
        'domains' => $domains,
    ]);
}

public function actionGetEmailList()
{
    Yii::$app->response->format = Response::FORMAT_JSON;
    $page = Yii::$app->request->get('page');
    return ['domains' => EmailDomain::find()->offset(($page - 1) * $this->pageSize ? ($page - 1) * $this->pageSize : 0)->limit($this->pageSize)->asArray()->all()];
}

這個版本是利用ajax異步請求分頁，刷新頁面後會回到首頁，不會保留着在當前頁。

可以看刷新頁面分頁，解決了上述問題，刷新頁面會停留在當前頁：php + vue + element-ui 實現分頁功能--頁面刷新

個人做了一個博客，裏面有更多分享，歡迎點擊：www.caohongyuan.cn