js 分页

最近研究了一个js分页，心得跟大家分享一下。
先定义html结构

<ul class="list" id="list">

</ul>
<div class="pre"><a class="crrt" href="#">1</a> <a href="#">2</a>
<a href="#">3</a> <a href="#">4</a></div>

编写js
定义常量

var PAGE_SHOW = 4;  //每一页显示个数
var PAGE_COUNT = 0; //总共几页
定义jquery初始化
$().ready(function(){
   var gift=[{"flag":1,name:"黑ぃ丫に头","icon":"http://thirdapp1.qlogo.cn/qzopenapp/06d264c84a243d4681ccd0c590f3b609ce9adc9abb705a688bff2332e5c9623c/50","itemid":612707161905581,"tips":50},{"flag":1,name:"夜下听风","icon":"http://thirdapp3.qlogo.cn/qzopenapp/95dac2d0238d3f7bc366c5108238b08a57338918e56a386e477105dba754cc74/50","itemid":542961186395792,"tips":38},{"flag":1,name:"傻孩子","icon":"http://thirdapp0.qlogo.cn/qzopenapp/d02133ecec528eb188159ff701fa4759c121a83deb6a0b44d0a7a6fb29aba3bc/50","itemid":431704355230303,"tips":24},{"flag":1,name:" 黄花胖小子","icon":"http://thirdapp0.qlogo.cn/qzopenapp/3b9a4bbcdd70c703d30a25921de9f500c858f3c6c9406424821e1e8f34c3cb44/50","itemid":527568023566921,"tips":23},{"flag":1,name:"雪中白鹄","icon":"http://thirdapp3.qlogo.cn/qzopenapp/d8219673598dbd6ff4a43f765c865b2ff207ca74206480bbaa8264c4f8a5f0c5/50","itemid":693641514680399,"tips":22}];

   if(gift){
      //加载第一页页码
       PAGE_COUNT = Math.ceil(gift.length/4);
      initPageIndex(1);
      //加载第一页显示内容
       var giftHtml = "";
      var firstPageShow = PAGE_SHOW;
      var count = 0;
      for(var i=0; i<gift.length; i++){
         count ++;
         var liStyle = "display:none";
         if(firstPageShow > 0){
             liStyle = "display:block";     
         }
         if('1' == gift[i].flag){
           						giftHtml += "<li style='"+liStyle+"'><a href='javascript:void(0);' class='bg'><span class='pbg'><img src="+gift[i].icon+"\" /></span><span class='ke'>"+gift[i].name+"</span><span><input type='radio' name='itemSelect' value='"+gift[i].itemId+"'/></span><p class='nic'>"+gift[i].tips+"</p></a></li>\n";

         }
         firstPageShow--;
      }   
      $("#list").html(giftHtml);
   }
});

// 初始化页码
		function initPageIndex(currPage){
			var pageHtml = "";
			for(var i=0; i<PAGE_COUNT; i++){
				var j = i+1;
				var aClass = "";
				if(j == currPage){
					pageHtml += "<a class='crrt' href='javascript:void(0)' onclick=\"return false\">"+j+"</a>\n";
				} else {					
					pageHtml += "<a href='javascript:void(0)' onclick=\"loadPage("+j+");return false\">"+j+"</a>\n";
				}
			}
			$(".pre").html(pageHtml);
		}


//跳转页面，对应页面的li显示
		function loadPage(toPage){
			if(toPage <=0){
				alert("数据错误");
			}
			var minIndex = (toPage -1) * PAGE_SHOW;
			var maxIndex = toPage * PAGE_SHOW -1;
			$("li").each(function(index, domEle){

			    alert(index + "|" + domEle);
				if(index >=minIndex && index <= maxIndex){//要显示
					$(domEle).show();
				} else {//要隐藏
					$(domEle).hide();
				}
			});
			// 重新加载页码
			initPageIndex(toPage);
		}