分页,条件查找后再分页
js
//全局变量,page为1,最大页数为0,条件查找,条件为空 var page = 1; var maxsno = 0; var keyword = ""; $(function(){ ajaxEvent(); }) //页面显示函数,传参条件默认为空,页数默认为1,加载分页 function ajaxEvent(){ //获取条件 keyword = $('#ss').val(); $.ajax({ type:"post", url:"chuli.php", data:{type:'selectData',keyword:keyword,page:page}, dataType:'json', success:function(data){ //console.log(data[2]); chuliData(data[0],data[1]); fenye(); } }); } function chuliData(data,maxSno){ var str = `<tr> <th width='10%'>学号</th> <th width='15%'>姓名</th> <th width='10%'>性别</th> <th width='30%'>生日</th> <th width='15%'>班级</th> <th width='20%'><button class='btn btn-primary btn-sm' onclick='add()'>添加</button></th> </tr>`; for(var i = 0; i < data.length; i++){ str += "<tr>"; for(var j = 0; j <data[i].length; j++){ str += "<td>"+data[i][j]+"</td>"; } str += "<td><button onclick='revise(this)' class='btn btn-primary btn-sm' style='height:27px'>编辑</button><button onclick='del("+data[i][0]+")' class='btn btn-primary btn-sm' style='height:27px'>删除</button></td>" str += "</tr>"; } maxsno = maxSno; //console.log(snoArr[xb][0]); $('#table').html(str); $('tr:even').css('background-color','#F1F9FB'); } //分页函数 function fenye(){ //条件查找框中的内容 keyword = $('#ss').val(); //用来拼接的空字符串 var str =""; //工具条的页数显示 var num = 0; //最大页数 var maxpage = 0; //后台传入条件查找的内容,返回天花板数为最大页数 $.ajax({ type:"post", url:"chuli.php", data:{type:'selpage',keyword:keyword}, dataType:'text', async:false, success:function(data){ //console.log(data); maxpage = data; } }); //字符串拼接,上一页,循环添加页数,下一页 str += "<li class='pre'>上一页</li>"; for(var i = 0; i < maxpage; i ++){ num++; str += "<li class='btn_ye' bs="+num+">"+num+"</li>"; } str += "<li class='next'>下一页</li>"; $('#fenye').html(str); //每一页添加点击函数,把按钮的显示页数数字赋值给page,重新执行页面显示函数 $('.btn_ye').click(function(){ page = parseInt($(this).attr('bs')); ajaxEvent(); }) //上一页,page减1,如果page小于1则等于1重新执行页面显示函数 $('.pre').click(function(){ page --; if(page < 1){ page = 1; } ajaxEvent(); }) //下一页,page加1,若page大于最大页数,则为最大页数重新执行页面显示函数 $('.next').click(function(){ page ++; if(page > maxpage){ page = maxpage; } ajaxEvent(); }) } //模糊查找搜索按钮,为重新加载页面数据 function sousuo(){ ajaxEvent(); }
php的switch中对应的两条case语句
//页面显示函数,获取条件,页数 case 'selectData': $keyword =$_POST['keyword']; $page = $_POST['page']; //页数-1 *5 为起始页数, $page = ($page-1)*5; //后面的5为每页显示5条数据 $sql = "select * from student where sname like'%{$keyword}%' limit $page,5"; $res = $db->query($sql); $attr = $res->fetch_all(); //此为查找最大学号 $sql = "select max(sno) from student"; $res = $db->query($sql); $max = $res->fetch_all(); $arr = array($attr,$max); echo json_encode($arr); break; //分页,查找条件下的所有数据个数,除以5(每页显示条数),取天花板数即为最大页 case 'selpage': $keyword =$_POST['keyword']; $sql = "select count(*) from student where sname like'%{$keyword}%' "; $res = $db->query($sql); $attr = $res->fetch_row(); echo ceil($attr[0]/5); break;
以后要注意的地方:
这里采用的是搜索和页面加载是一体的,当条件为空时,传值为空,sql语句查找出来的数据就是全部数据