zoukankan      html  css  js  c++  java
  • 分页,条件查找后再分页

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

  • 相关阅读:
    [CF] Final Exam Arrangement
    [原创]9宫格填数字
    第二次结对编程作业
    第11组 团队展示
    第一次结对编程作业
    第一次个人编程作业
    第一次博客作业
    第二次结对编程作业
    第10组 团队展示
    第一次个人编程作业
  • 原文地址:https://www.cnblogs.com/SSs1995/p/9236725.html
Copyright © 2011-2022 走看看