分页,条件查找后再分页

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语句查找出来的数据就是全部数据

posted @ 2018-06-28 00:58  ❉SSs  阅读(727)  评论(0编辑  收藏  举报