使用ajax实现无刷新分页

2021-04-06 20:33:18 阅读：90 来源： 互联网

标签：function 分页 site page ajax 刷新 data response

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'=>""]);
        }
    }

标签：function,分页,site,page,ajax,刷新,data,response
来源： https://blog.csdn.net/weixin_51095543/article/details/115469788

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

使用ajax实现无刷新分页