• Bootstrap的jq匿名函数,实现分页技术--博客园老牛大讲堂


    我自己设计界面就遇到了这个问题,也在网上查了,但是没搜到,就干脆自己写了一个。-博客园老牛大讲堂

    1、为什么要用H5分页?

      首先H5如果做前端,后端肯定也能分页,但是这样就会导致前端多次访问后端,而且用户体验不好。如果H5请求服务器一次,把分页技术放在前端,不仅能减轻服务器压力。还能

    实现想要的效果。

    首先分页技术是:接收到数据后一个界面显示不完数据,之后需要显示下一面的技术就是分页技术。

    2、分页的类别,分页的优缺点? 

      分页技术分为:假分页,真分页,真假混合分页。

      假分页:就是请求服务器一次而得到所有数据,但是如果数据庞大,就会解析较慢。优点是:能够前端能够随心所欲的得到想要的数据(灵活性强)。

      真分页:就是每次请求一个页面的数据,点击下一页再次请求数据。但是会造成服务器访问次数过多,用户使用量大,就会造成用户等待。

      真假混合分页:就是请求一次服务器得到3-4页的数据,也能显示出想要的数据,当超出4页的数据就再次请求数据。优点突出,但是前台操作麻烦。

    我这里用来bootstrap框架。下面的例子有一个小bug,如果细心的人能找到(不过不影响结果)博客园老牛大讲堂

    方法一:博客园老牛大讲堂

      思路:

        1、首先显示下面的小标,让下面的小标能够根据内容多少而增减,

        2、之后让小标增加上点击事件,并能够触发。

        3、实现一个方法,遍历小标,获取点击的下标,根据下标显示内容。

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
            <link rel="stylesheet" href="../../css/bootstrap.min.css">//这里是相对路径-博客园老牛大讲堂
           
            <script type="text/javascript" src="../../js/jquery-3.0.0.min.js"></script>
            <script type="text/javascript" src="../../js/bootstrap.min.js"></script>
        </head>
    
        <body>
            <div  class="text-center">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <td>名称</td>
                            <td>年龄段</td>
                            <td>年龄</td>
                        </tr>
                    </thead>
                    <tbody id="contant">
                        
                    </tbody>
                </table>
            </div>
            
            
            <div class="container">
                <ul class="pagination">
                    <li onclick="first()"><a href="#">«</a></li>
                </ul>
            
                <ul class="pagination" id="fenye">
                
                </ul>
            
                <ul class="pagination">
                    <li onclick="end()"><a href="#">»</a></li>
                </ul>
            </div>
            
            
    
            <script type="text/javascript">
                var All = [{
                    "name": "林柯",
                    "sex": "少女",
                    "age": "21岁"
                }, {
                    "name": "林柯",
                    "sex": "少女",
                    "age": "21岁"
                }, {
                    "name": "林柯",
                    "sex": "少女",
                    "age": "21岁"
                }, {
                    "name": "周菲",
                    "sex": "少女",
                    "age": "22岁"
                }, {
                    "name": "周菲",
                    "sex": "少女",
                    "age": "22岁"
                }, {
                    "name": "周菲",
                    "sex": "少女",
                    "age": "22岁"
                }, {
                    "name": "叶问天",
                    "sex": "男生",
                    "age": "19岁"
                }, {
                    "name": "叶问天",
                    "sex": "男生",
                    "age": "19岁"
                }, {
                    "name": "叶问天",
                    "sex": "男生",
                    "age": "19岁"
                }, {
                    "name": "444",
                    "sex": "男生",
                    "age": "19岁"
                }]
                
                
                var rows=4;//这个是页面显示的条数(可以修改该)
                var pages = Math.ceil(All.length / rows);
                init(pages);//初始化页面
                pagesClick();//添加点击事件
                fuzhi();//遍历出选中的内容
                
                //初始化下面的图标
                function init(pages){
                    for(var i = 0; i < pages; i++) {
                        $("#fenye").append("<li><a href='#'>"+(i+1)+"</a></li>");
                    }
                    $("#fenye li").eq(0).addClass("active");
                    
                }
                //为下面的小图标增加监听事件
                function pagesClick(){
                    $("#fenye li").click(function(){
                        var index=$(this).index();
                        $(this).siblings().removeClass("active");
                        $(this).addClass("active");
                        fuzhi();
                    });
                }
                //点击前一个
                function first(){
                    var a=$("#fenye .active").index();
                    var b=a-1;
                    if(a>0)
                    {
                        $("#fenye li").eq(a).removeClass("active");
                        $("#fenye li").eq(b).addClass("active");
                        fuzhi();
                    }
                }
          //点击后一个
                function end(){
                    var a=$("#fenye .active").index();
                    var b=$("#fenye li").length;
                    if(a<b-1)
                    {
                        $("#fenye li").eq(a).removeClass("active");
                        $("#fenye li").eq(a+1).addClass("active");
                        fuzhi();
                    }
                }
                
          //遍历小下标,得到后显示内容
                function fuzhi(){
                    $("#contant").empty();//首先清空contant的内容为空
                    var a=$("#fenye .active").index();
                    var b=rows*a;
                    
                    for(var i=b;i<b+rows;i++){
                        $("#contant").append("<tr><td>"+All[i].name+"</td><td>"+All[i].sex+"</td><td>"+All[i].age+"</td></tr>");//这个是内容区域(可以修改)
                    }
                }
                
            </script>
        </body>
    </html>
    View Code

      

    方法二:--博客园老牛大讲堂

      1、当然上面的方法固然能够实现,但是!对于我这个小神来说这是远远不够的。

      2、想了解更多,看看下面例子:

      3、思路:和上面相同。但是!用了js里面的匿名函数

    代码:

    (function(window){//博客园老牛大讲堂
        
        
        var data;
        var rows;
        
        
        
        slide.prototype.first = function(){
            var a=$("#fenye .active").index();
            var b=a-1;
            if(a>0)
            {
                $("#fenye li").eq(a).removeClass("active");
                $("#fenye li").eq(b).addClass("active");
                fuzhi();
            }
        }
        
        slide.prototype.end= function(pages){//博客园老牛大讲堂
             var a=$("#fenye .active").index();
            var b=$("#fenye li").length;
            if(a<b-1)
            {
                $("#fenye li").eq(a).removeClass("active");
                $("#fenye li").eq(a+1).addClass("active");
                fuzhi();
            }
        }
         
        slide.prototype.init = function(pages){
            
             for(var i = 0; i < pages; i++) {
                $("#fenye").append("<li><a href='#'>"+(i+1)+"</a></li>");
            }
            $("#fenye li").eq(0).addClass("active");
            fuzhi();
        }
         
        slide.prototype.pagesClick = function(){
            
             $("#fenye li").click(function(){
                var index=$(this).index();
                $(this).siblings().removeClass("active");
                $(this).addClass("active");
                fuzhi();
            });
        }
        
        function slide(all,num){
            
            data=all;
            rows=num;
            
            var pages = Math.ceil(data.length / rows);
            this.init(pages);//初始化页面
            this.pagesClick();//添加点击事件
            fuzhi();
        }
        
        function fuzhi(){
             $("#contant").empty();
            var a=$("#fenye .active").index();
            var b=rows*a;
            for(var i=b;i<(b+rows);i++){
                $("#contant").append("<tr><td>"+data[i].name+"</td><td>"+data[i].sex+"</td><td>"+data[i].age+"</td></tr>");
            }
        }
        
         window.echoSlide = slide;
    })(window);
    View Code

    html代码:

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="utf-8" />//博客园老牛大讲堂
            <title>排班管理--排班录入</title>
            <link rel="stylesheet" href="../../css/bootstrap.min.css">
            <link rel="stylesheet" href="../../css/system.css" />
            <script type="text/javascript" src="../../js/calendar.js" ></script>
            <script type="text/javascript" src="../../js/jquery-3.0.0.min.js"></script>
            <script type="text/javascript" src="../../js/bootstrap.min.js"></script>
            <script type="text/javascript" src="../../js/define.js" ></script>
        </head>
    
        <body>
                <!--内容 博客园老牛大讲堂-->
                <div id="tablea">
                    <div class="text-center">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <td>名称</td>
                                    <td>年龄段</td>
                                    <td>年龄</td>
                                </tr>
                            </thead>
                            <tbody id="contant">
    
                            </tbody>
                        </table>
                    </div>
    
                    <div class="container">
                        <ul class="pagination">
                            <li onclick="Start()">
                                <a href="#">&laquo;</a>
                            </li>
                        </ul>
    
                        <ul class="pagination" id="fenye">
    
                        </ul>
    
                        <ul class="pagination">
                            <li onclick="End()">
                                <a href="#">&raquo;</a>
                            </li>
                        </ul>
                    </div>
                </div><!--内容-->
    
            </div>
    
            <script>var All = [{
                    "name": "林柯",
                    "sex": "少女",
                    "age": "21岁"
                }, {
                    "name": "林柯",
                    "sex": "少女",
                    "age": "21岁"
                }, {
                    "name": "林柯",
                    "sex": "少女",
                    "age": "21岁"
                }, {
                    "name": "周菲",
                    "sex": "少女",
                    "age": "22岁"
                }, {
                    "name": "周菲",
                    "sex": "少女",
                    "age": "22岁"
                }, {
                    "name": "周菲",
                    "sex": "少女",
                    "age": "22岁"
                }, {
                    "name": "叶问天",
                    "sex": "男生",
                    "age": "19岁"
                }, {
                    "name": "叶问天",
                    "sex": "男生",
                    "age": "19岁"
                }, {
                    "name": "叶问天",
                    "sex": "男生",
                    "age": "19岁"
                }, {
                    "name": "444",
                    "sex": "男生",
                    "age": "19岁"
                }];
                var page= new echoSlide(All,4);
                
                function Start(){
                    page.first();
                }
                function End(){
                    page.end();
                }
            </script>
            <body>
    </html>
    View Code

    方法三博客园老牛大讲堂

      经过我又一天的努力,克服重重困难终于实现一个万能板的bootstrap分页技术了,下面我分享一下,不过想看懂有点难度。

    期待有更好的代码。下面我说一下思路。

      思路:首先传递值:表头,表内容,每一页需要显示多少行,以及找到显示到哪个元素下(HTML页面)。

        js部分:主要分为表格部分和下面的点击事件:先实现下面的动态生成小图标,并添加点击事件。

         其次:实现表头的内容,然后实现内容的添加。是不是很容易呢?

    <!DOCTYPE html>//博客园老牛大讲堂
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
            <link rel="stylesheet" href="../../css/bootstrap.min.css">
            <script type="text/javascript" src="../../js/jquery-3.0.0.min.js"></script>
            <script type="text/javascript" src="../../js/bootstrap.min.js"></script>
            <script type="text/javascript" src="分页2.js"></script>
        </head>
    
        <body>
            <div  id="Table"></div>
            
            
        </body>
    
        <script type="text/javascript">//博客园老牛大讲堂
            var All = [{
                "name": "林柯",
                "sex": "少女",
                "age": "21岁"
            }, {
                "name": "林柯",
                "sex": "少女",
                "age": "21岁"
            }, {
                "name": "林柯",
                "sex": "少女",
                "age": "21岁"
            }, {
                "name": "周菲",
                "sex": "少女",
                "age": "22岁"
            }, {
                "name": "周菲",
                "sex": "少女",
                "age": "22岁"
            }, {
                "name": "周菲",
                "sex": "少女",
                "age": "22岁"
            }, {
                "name": "叶问天",
                "sex": "男生",
                "age": "19岁"
            }, {
                "name": "叶问天",
                "sex": "男生",
                "age": "19岁"
            }, {
                "name": "叶问天",
                "sex": "男生",
                "age": "19岁"
            }, {
                "name": "444",
                "sex": "男生",
                "age": "19岁"
            }]
    
            var title = ["名字", "年龄段", "年龄"];
    
        var fenye = new echoSlide(title, All, 3, $("#Table"));
        </script>
    
    </html>
    调用

    分页2.js代码:

    (function(window){
        
        var title;
        var data;
        var rows;
        var url;
        
        function setContent(e){//博客园老牛大讲堂--初始化页面
        var top="<div class='text-center'><table class='table table-striped'><thead><tr id='top'></tr></thead><tbody id='contant'></tbody></table></div><div class='container'><ul class='pagination'><li id='first'><a href='#'>&laquo;</a></li></ul><ul class='pagination' id='fenye'></ul><ul class='pagination'><li id='end'><a href='#'>&raquo;</a></li></ul></div>";
            
            e.append(top);
        }
        
        function setTitleContent(title){//博客园老牛大讲堂--添加表头信息
            for(var i=0;i<title.length;i++)
            {
                $("#top").append("<td>"+title[i]+"</td>");
            }
        }
        function setIcon(pages){//博客园老牛大讲堂--增加下面的小图标
            
             for(var i = 0; i < pages; i++) {
                $("#fenye").append("<li><a href='#'>"+(i+1)+"</a></li>");
            }
            $("#fenye li").eq(0).addClass("active");
        }
        
        function setClick(){//博客园老牛大讲堂--为小图标设置点击事件
            
            $("#fenye li").click(function(){
                var index=$(this).index();
                $(this).siblings().removeClass("active");
                $(this).addClass("active");
                
                fuzhi();
            });
        }
        
        
        function setFirstClick(){//博客园老牛大讲堂--为下面小图标第一个设置点击事件
            
            $("#first").click(function(){
                var a=$("#fenye .active").index();
                var b=a-1;
                if(a>0)
                {
                    $("#fenye li").eq(a).removeClass("active");
                    $("#fenye li").eq(b).addClass("active");
                }    
                fuzhi();
            });
        }
        
        function setEndClick(){//博客园老牛大讲堂--为最后一个小图标设置点击事件
            
            $("#end").click(function(){
                var a=$("#fenye .active").index();
                var b=$("#fenye li").length;
                if(a<b-1)
                {
                    $("#fenye li").eq(a).removeClass("active");
                    $("#fenye li").eq(a+1).addClass("active");
                }
                fuzhi();
            });
        }
        
        function fuzhi(){//博客园老牛大讲堂--对数据进行赋值操作
            
             $("#contant").empty();
             
            var a=$("#fenye .active").index();
            var b=rows*a;
            var c=b+rows;
            
            for(var i=b,j=0;i<(c< data.length? c:data.length);i++,j++){
                
                $("#contant").append("<tr>");
                for(var t in data[b]){
                    $("#contant tr:eq("+j+")").append("<td>"+data[i][t]+"</td>");
                }
                $("#contant").append("</tr>");
            }
        }
        
        
        function slide(titl,dat,ro,e){
            
            title=titl;
            data=dat;
            rows=ro;
            
             setContent(e);//博客园老牛大讲堂--设置静态内容
             
             setTitleContent(title)//博客园老牛大讲堂--设置上面的头部
             
             var pages = Math.ceil(data.length / rows);
             setIcon(pages);//博客园老牛大讲堂--添加下面的图标,并为第一个添加active 
             setClick();//博客园老牛大讲堂---为每一个小图标增加监听事件
             
             setFirstClick();//博客园老牛大讲堂---为第一个小图标增加
             setEndClick();//博客园老牛大讲堂--为最后一个小图标增加
             
             fuzhi();//博客园老牛大讲堂---赋值操作
             
             
        }
        
         window.echoSlide = slide;
    })(window);
    实现

    方法四:如果大家有什么不懂的,或者有更好的分页方案,希望能告诉我。 

  • 相关阅读:
    六、TreeSet中的定制排序
    五、Set接口
    四、List接口
    Vocabulary Recitation 2020/05/20
    Vocabulary Recitation 2020/05/19
    Vocabulary Recitation 2020/05/18
    自控力_第六章
    Vocabulary Recitation 2020/05/17
    Vocabulary Recitation 2020/05/15
    Vocabulary Recitation 2020/05/14
  • 原文地址:https://www.cnblogs.com/laonniudajiangtang/p/5885683.html
Copyright © 2020-2023  润新知