zoukankan html css js c++ java

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);

实现

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

查看全文

相关阅读:
$(document).ready() 、 $('#id').load() 、window.onload 的区别
 Ajax的Get和Post的区别
 jquery slideDown slideUp 对于table无效
 .net 中连接mysql
数据库日志文件太大如何处理
 支持IE，FireFox，Chrome三大主流浏览器，通过js+Flash方式将table导出Excel文件
 Sql2008的行列转换之行转列
 Java 8最快的垃圾收集器是什么？
window.location.hash属性介绍
 高并发量网站解决方案

原文地址：https://www.cnblogs.com/laonniudajiangtang/p/5885683.html