jquery实现分页效果

通过jq实现分页的原理如下：将所有条数加载到页面中，根据每页放特定条数（例如 5 条）获取jquery对象索引，使部分条数显示，其他条数隐藏。
前提：引入jquery.js
代码
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .wrapper{
            width: 800px;
            margin: 50px auto;
        }
        /*清除浮动*/
        .wrapper::after{
            content: "";
            display: block;
            clear: both;
        }
        ul li{
            width: 100%;
            height: 30px;
            text-align: center;
            line-height: 30px;
            float: left;
            background: #ccc;
            margin: 10px 0px;
        }
        a{
            cursor: pointer;
            border:1px solid black;
        }
        .btn{
            float: right;
        }
    </style>
    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            /*添加100条数据（模仿后台传入）*/
            for(var i = 1; i<101;i++){
                $("#content").append("<li>"+i+"</li>");
            }
            /*设置每页显示的条数*/
            $every_page = 5;

            $items = $("ul li");
            $total_all = $items.length;//总条数
            $page_num = Math.round($total_all/$every_page)//向上取整（2.5 ==> 3）
            
            $("#total_page").text($page_num);
            //初始化页面，只显示前5条。
            $("ul li:gt("+($every_page-1)+")").each(function(){
                $(this).hide();
            })
            //点击下一条按钮函数。
            $("#next_page").click(function(){
                $current_page = ($("#current_page").text());//获取当前页码
                if($current_page <$page_num){
                    $("#current_page").text(++$current_page);
                    $.each($("ul li"),function(index,item){
                        //获取下一页显示的开始索引。
                        var start = ($("#current_page").text()-1)*$every_page;
                        if(index>=start&& index<start+$every_page){
                            $(this).show();
                        }else{
                            $(this).hide();
                        }
                    })
                }else{
                    return false;
                }
            })
            $("#pre_page").click(function(){
                $current_page = ($("#current_page").text());
                if($current_page > 1){
                    $("#current_page").text(--$current_page);
                    $.each($("ul li"),function(index,item){
                        var start = ($("#current_page").text()-1)*$every_page;
                        if(index>=start&& index<start+$every_page){
                            $(this).show();
                        }else{
                            $(this).hide();
                        }
                    })
                }else{
                    return false;
                }
            })
        })
    </script>
</head>
<body>
    <div class="wrapper">
        <div class="items">
            <ul id= "content">
                
            </ul>
        </div>
        <span class="btn">
            <a id = "pre_page">上一页</a>
            <span>
                <span id = "current_page">1</span>
                <span>/</span>
                <span id = "total_page"></span>
            </span>
            <a id = "next_page">下一页</a>
        </span>
    </div>
</body>
</html>
View Code
运行结果
jquery实现分页效果

猜你喜欢
