关于ajax无刷新分页 vue
简单粗暴 直接上代码 细节点自己研究
html前台页面代码
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Bootstrap 实例 - 条纹表格</title>
6 <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
7 <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
8 <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
9 <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
10 <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
11
12 </head>
13 <body>
14 <!--挂载点-->
15 <div id="app">
16 <table class="table table-striped">
17 <caption>ajax无刷新分页</caption>
18 <thead >
19 <tr>
20 <th>编号</th>
21 <th>标题</th>
22 <th>内容</th>
23 <th>图片</th>
24 </tr>
25 </thead>
26 <tbody>
27 <tr v-for="site in sites">
28 <td>{{site.id}}</td>
29 <td>{{site.title}}</td>
30 <td>{{site.content}}</td>
31 <!-- <td><img src="{{site.img}}"></td>-->
32 </tr>
33 </tbody>
34 </table>
35 <ul class="pagination">
36 <li><a href="javascript:;" @click="page(1)">首页</a></li>
37 <li><a href="javascript:;" @click="page(i)" v-for="i in lastpage" >{{i}}</a></li>
38 <li><a href="javascript:;" @click="page(lastpage)">尾部</a></li>
39 </ul>
40
41 </div>
42 <script type ="text/javascript">
43 //绑定挂载点
44 new Vue({
45 el: '#app',
46 data:{
47 sites:[],
48 lastpage:""
49
50 },
51 mounted () {
52 //调用下面的方法
53 this.page(1)
54
55 },
56 methods: {
57 page:function(i){
58 // alert(i);
59 let that=this
60 axios
61 //接口地址
62 .get('http://www.xxx.com/index.php/xxx/ajax/lists?page='+i)
63 .then(function (response) {
64 that.sites=response.data.data.data,
65 that.lastpage=response.data.data.last_page
66 // console.log(response.data.data);
67 // console.log(response.data.data.data.last_page)
68 })
69 // .then(response => (this.sites = response.data.data.data))
70 .catch(function (error) { // 请求失败处理
71 console.log(error);
72 });
73 }
74 }
75
76 })
77 </script>
78
79 </body>
80 </html>
php后端代码
<?php
namespace app\caiji\controller;
use think\Controller;
use think\Db;
use think\Request;
//处理跨域
header("Access-Control-Allow-Origin:*");
class Ajax extends Controller
{
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'=>""]);
}
}
}
注：此处用了DB类，可以创建模型层，运用模型层来获取数据
