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>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。