tp5+element分页

视图

引入

<!-- 引入样式 -->
<link rel="stylesheet" href="/static/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="/static/vue/dist/vue.js"></script>
<script src="/static/axios/dist/axios.min.js"></script>
<script src="/static/element-ui/lib/index.js"></script>
<script src="/static/js/jquery/2.0.2/jquery-2.0.2.min.js">

html

<div id = "app" >
    <div>
        <el-input v-model="title" placeholder="关键词"></el-input>
        <el-button type="primary" @click="search()">查询</el-button>
    </div>
    <table>
        <thead>
        <tr>
            <th>编号</th>
            <th>标题</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in fans_data">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td><a @click="showChick(item.id)">查看</a></td>
        </tr>
        <tr v-if="fans_data.length == 0">
            <td colspan="12"><h3 class="text-center">暂无数据</h3></td>
        </tr>
        </tbody>
    </table>
    <div>
        <el-pagination
            background
            @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :page-count="page_count">
        </el-pagination>
    </div>
</div>

script

    new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue.js!',
            fans_data:[],
            page: 1,
            page_count: 0,
            title:'',
        },
        methods:{
            getdata:function () {
                var that = this;

                $.ajax({
                    url:'/index.php/index/index/lists',
                    type:'post',
                    data:{
                        page:that.page,
                        title:that.title
                    },
                    success:(response)=>{
                        console.log(response);
                        that.fans_data = response.data;
                        that.page = response.page;
                        that.page_count = response.page_count;
                    }
                })
            },
            search: function () {
                this.getdata()
            },
            handleCurrentChange(val) {
                this.page = val;
                this.getdata();
            },
            showChick:function (id) {
                $.ajax({
                    url: '/index.php/index/index/item',
                    type: 'post',
                    data: {
                        id: id
                    },
                    success: (response) => {
                        console.log(response)
                    }
                });
            }
        },
        mounted: function(){
            this.getdata();
        }
    })

控制器

<?php
namespace app\index\controller;

use think\Controller;
use think\facade\Request;

class Index extends Controller
{
    public function index()
    {
        return $this->fetch('index');
    }

    public function lists(){
        $request = Request::instance();
        $post = $request->post();

        $page = $post['page'] ? : '1';

        $pageSize = 3;
        $title = $post['title'] ? : '';

        $data = [
            ["id"=>1,"name"=>"111"],
            ["id"=>2,"name"=>"222"],
            ["id"=>3,"name"=>"333"],
            ["id"=>4,"name"=>"444"],
            ["id"=>5,"name"=>"555"],
            ["id"=>6,"name"=>"666"],
            ["id"=>7,"name"=>"777"],
            ["id"=>8,"name"=>"888"],
        ];
        $count = count($data);

        $new_data = array_slice($data,($page-1)*$pageSize,$pageSize);

        return [
            'data'=>$new_data,
            'page_count'=>ceil($count/$pageSize),
            'per_page'=>$pageSize,
            'page'=>$page
        ];

    }

    public function item()
    {
        $request = Request::instance();
        $post = $request->post();
        $id = $post['id'] ?: "";
        $data = [
            'id'=>1,
            'title'=>'123'
        ];
        return [
            'message'=>'ok',
            'data'=>$data
        ];
    }

}