jquery 分页控件功能

标签：

 //分页

<script>

        function getPageNum(num) {
            $("#PageNum ul").empty();
            var AllCount = num;
            var total = Math.ceil(AllCount / 5); //数据可分的页数
            $("#txtAll").val(total);
            for (var i = 1; i < total + 1; i++) {
                var html = "<li><a>" + i + "</a></li>";
                $("#PageNum ul").append(html);
            }
            var totalCount = Math.ceil(total / 8);//每八页份为一页
            var current = 1;
            $("#PageNum ul li:gt(7)").hide();
            $("#btnPrev").attr("disabled", "disabled").click(function () {
 
                $("#btnNext").removeAttr("disabled");
                current -= 1;
                $("#PageNum ul li").hide();
                var indexStart = (current - 1) * 7;
                var indexEnd = indexStart + 7;
                $(" #PageNum ul li").hide().slice(indexStart, indexEnd).show();
                if (current == 1) $(this).attr("disabled", "disabled");
            });
 
            $("#btnNext").click(function () {
                $("#btnPrev").removeAttr("disabled");
                current += 1;
                $("#PageNum ul li").hide();
                //$("#PageNum ul li").show();
                var indexStart = (current - 1) * 7;
                var indexEnd = current * 7 - 1 > $("#PageNum ul li").length - 1 ? $("#PageNum ul li").length - 1 : current * 7 - 1;
                $(" #PageNum ul li").hide().slice(indexStart, indexEnd+1).show();
               // $("#PageNum ul li:lt(" + indexStart + "), li:gt(" + indexEnd + ")", $("#PageNum ul")).hide();
                if (current == total) $(this).attr("disabled", "disabled");
            });
 
            $("#PageNum ul li").click(function () { //点击数字
                var index = $(this).index();
                getPageCurrent(index);
            })
            $("#btnConfirm").click(function () {
                var index = $("#txtIndex").val();
                getPageCurrent(index - 1);
            })
        }
        function getPageCurrent(index) {//index为要查询的页面的索引值
            var indexStart = index * 5;
            var indexEnd = indexStart + 5;
            $(" #thumbWrap_controlID ul li").hide().slice(indexStart, indexEnd).show();
        }
</script>


html代码：

 <div class="products_contents" id="product">
                <div class="thumbWrap">
                    <h2 style="font-size: 30px; color: #f8b551; text-align: center; line-height: 56px;">
                    </h2>
                    <div class="thumbWrap_control" id="thumbWrap_controlID">
                        <ul>
                        </ul>
                    </div>
                    <div id="PageNum">
                    <input type="button" id="btnPrev" value="上一页" /><input type="button" id="btnNext" value="下一页" />
                    共<input type="text" id="txtAll"/>页
                        <ul>
                        </ul>
                        到<input type="text" id="txtIndex"/>页<input type="button" id="btnConfirm" value="确定" />
                    </div>
                </div>
            </div>

jquery 分页控件功能

标签：

原文地址：http://www.cnblogs.com/ft-Pavilion/p/4485671.html