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