使用VUE+原生PHP完成搜索后分页的效果
html代码：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="../day18/js/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <link rel="stylesheet" href="../day13/bootstrap4.min.css"> </head> <body> <div id="app"> <input type="search" placeholder="请输入关键字" v-model="list.word" @keyup.enter="search()"> <table class="table"> <tr> <th>主键ID</th> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>班级</th> <th>操作</th> </tr> <tr v-for="(v,k) in list.data"> <th>{{v.uid}}</th> <th>{{v.name}}</th> <th>{{v.sex==1?'男':'女'}}</th> <th>{{v.age}}</th> <th>{{v.cname}}</th> <th> <a href="#" @click="del(k)">删除</a> </th> </tr> </table> <a href="#" @click="page(1)">首页</a> <a href="#" @click="page(2)">上一页</a> <a href="#" @click="page(3)">下一页</a> <a href="#" @click="page(4)">尾页</a> </div> </body> </html> <script> new Vue({ el:'#app', data:{ list:[] }, methods:{ //搜索 search(){ var obj = this; var word = obj.list.word;//关键字 axios.get('list.php?word='+word) .then(function (e) { obj.list = e.data;//cpage、data、last_page、next、prev console.log(e.data); }) }, //自定义方法/自定义函数 page(text){ var obj = this;//提前声明this函数 var word = obj.list.word; //判断页码p if(text==1){//首页 var p = 1; }else if(text==2){//上一页 var p = obj.list.prev; }else if(text==3){//下一页 var p = obj.list.next; }else if(text==4){//尾页 var p = obj.list.last_page; }else{ var p = 1;//其他情况 } axios.get('list.php?page='+p+'&word='+word) .then(function (e) { obj.list = e.data;//cpage、data、last_page、next、prev console.log(e.data); }) }, //ajax删除 del(k){ if(confirm('确定要删除吗？')){ var obj = this; var uid = obj.list['data'][k]['uid']; //ajax axios.get('del.php?uid='+uid) .then(function (e) { if(e.data!=3){ alert('删除失败'); return false; } // obj.list['data'].splice(k,1); axios.get('list.php?page='+obj.list.cpage) .then(function (e) { obj.list = e.data;//cpage、data、last_page、next、prev console.log(e.data); }) }) } } }, created(){ var obj = this; //页面加载后自定执行 axios.get('list.php') .then(function (e) { obj.list = e.data;//cpage、data、last_page、next、prev console.log(e.data); }) } }) </script>
php原生代码：
<?php $link = mysqli_connect('127.0.0.1','root','root','1906'); mysqli_set_charset($link,'utf8'); //逻辑操作 //接收关键字 $word = $_GET['word']; //1、接收当前页 $page = isset($_GET['page']) ? $_GET['page'] : 1; //2、设置每页显示的条数 $length = 3; //3、求出总条数 if(empty($word)){ $sql = "select a.*,b.cname from student as a join class as b on a.class_id=b.cid"; }else{ $sql = "select a.*,b.cname from student as a join class as b on a.class_id=b.cid where a.name like '%$word%'"; } $res = mysqli_query($link,$sql);//结果集 $count = mysqli_num_rows($res);//总条数 //4、总页数 $last_page = ceil($count/$length); //5、偏移量=（当前页-1）*每页显示的条数 $limit = ($page-1)*$length; //6、查询 if(empty($word)){ $sql = "select a.*,b.cname from student as a join class as b on a.class_id=b.cid limit $limit,$length"; }else{ $sql = "select a.*,b.cname from student as a join class as b on a.class_id=b.cid where a.name like '%$word%' limit $limit,$length"; } $res = mysqli_query($link,$sql);//结果集 $data = mysqli_fetch_all($res,1);//将结果集转化成二维关联数组 //释放结果集 mysqli_free_result($res); //关闭数据库 mysqli_close($link); //返回结果 $arr['last_page'] = $last_page;//最后一页 $arr['prev'] = $page-1<=1 ? 1 : $page-1;//上一页 $arr['next'] = $page+1>=$last_page ? $last_page : $page+1;//下一页 $arr['cpage'] = $page;//当前页 $arr['data'] = $data;//页面展示的数据 $arr['word'] = $word;//搜索的关键字 echo json_encode($arr);
