ajax无刷新分页

html代码 使用vue的ajax

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 条纹表格</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

</head>
<body>
<!--挂载点-->
<div id="app">
    <table class="table table-striped">
        <caption>ajax无刷新分页</caption>
        <thead >
        <tr>
            <th>编号</th>
            <th>标题</th>
            <th>内容</th>
            <th>图片</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="site in sites">
            <td>{{site.id}}</td>
            <td>{{site.title}}</td>
            <td>{{site.content}}</td>
            <!--        <td><img src="{{site.img}}"></td>-->
        </tr>
        </tbody>
    </table>
    <ul class="pagination">
        <li><a href="javascript:;" @click="page(1)">首页</a></li>
        <li><a href="javascript:;" @click="page(i)" v-for="i in lastpage" >{{i}}</a></li>
        <li><a href="javascript:;" @click="page(lastpage)">尾部</a></li>
    </ul>

</div>
<script type ="text/javascript">
    //绑定挂载点
    new Vue({
        el: '#app',
        data:{
            sites:[],
            lastpage:""

        },
        mounted () {
            //调用下面的方法
            this.page(1)

        },
        methods: {
            page:function(i){
                // alert(i);
                let that=this
                axios
                    //接口地址
                    .get('http://www.tpshop2.com/index.php/caiji/ajax/lists?page='+i)
                    .then(function (response) {
                        that.sites=response.data.data.data,
                        that.lastpage=response.data.data.last_page
                        // console.log(response.data.data);
                        // console.log(response.data.data.data.last_page)
                    })
                    // .then(response => (this.sites = response.data.data.data))
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            }
        }
        
    })
</script>

</body>
</html>

 

 

控制器层代码

控制器层负责查询数据，写接口

 public function lists(){
        $data=Db::table('news')->paginate(5);
        if ($data){
//            return view('lists',['data'=>$data]);
            return json(['code'=>200,'msg'=>'success','data'=>$data]);
        }else{
            return json(['code'=>500,'msg'=>'error','data'=>""]);
        }
    }

 

posted @ 2021-02-19 21:13  Conqueror·  阅读(64)  评论(0)  编辑  收藏  举报