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