如何動态加載本地資料進行分頁

相信很多小夥伴在做項目時會用到資料分頁的功能，那如何動态加載本地資料進行分頁而不使用插件進行分頁呢？下面我們來實作一下如何動态加載本地資料進行分頁的。

html代碼：

<!-- 主體部分 start -->
	<div class="mycart w990 mt10 bc" style="margin:0px 0px 0px 236px">
		<h2>
			<img src="${ctx}/assets/ZhuYeMian/dengshizhaoming.png" />
		</h2>
		<div class="col-lg-12 col-md-12 col-sm-12" id="CommodityID"
			style="width:100%;height:100%;margin:0px;"></div>
	</div>
	<div id="pagerArea" unselectable="on" onselectstart="return false;" style="-moz-user-select:none;">
		<ul class="pager" id="cy_pager">
			<li class="pg-prev" id="prev">PREV</li>
			<li class="pg-next" id="next">NEXT</li>
		</ul>
	</div>
	<!-- 主體部分 end -->
           

<script type="text/javascript">
		var size = 1;
		Page = 0;
		PageSize = 4;
		pagecount = 0;
		KK=0;
		Pag=0;
		datas = 0;
		/*循環查詢商品資訊 */
		$(function() {
			nextTip(Page, PageSize);
			//循環合計
			$(document).ready(function(){
		      $.getJSON('${ctx}/FrontLogin/selecttotalSum.do',function(data){
		            data=data.rows;
			        var totalSum = 0;
			        for (var i = 0; i < data.length; i++) {
			            totalSum += data[i].total;
					};
		         $("#total").val(totalSum);
		      });
		   });
		});
		//商品分頁
		function fenye(){
		  $("#pagerArea").cypager({
									pg_size : size,
									pg_nav_count : 6,
									pg_total_count : pagecount,
									pg_call_fun : function(count) {
									}
								});
		}
		/* 分頁導覽列 */
		function nextTip(Page, PageSize) {
			$
					.getJSON(
							'${ctx}/UploadingGoods/LightingGoodsShow.do?Page=' + Page
									+ '&PageSize=' + PageSize,
							function(data) {
							    $("#CommodityID").empty();
								pagecount = data.total;
								data = data.rows;
								size = Math.ceil(pagecount / PageSize);
								for ( var i = 0; i < data.length; i++) {
									$("#CommodityID")
											.append(
													'<div class="col-lg-3 col-md-3 col-sm-3" style="margin:0px;border: 1px solid #efeff0;display: inline-block;"><img src="${ctx}/UploadingGoods/getPicture.do?file='+data[i].img+'" style="height:292px;margin-left:-15px"></img><span style="color:red;font-size:16px;">￥</span><span style="color:red;font-size:16px;">'
															+ data[i].price
															+ '</span><br/><a href="${ctx}/FrontLogin/commodityDetails.do?itemid='+data[i].itemid+'" style="cursor: pointer;">'
															+ data[i].itemname
															+ '</a></div>');
								}if(KK==0){
								  fenye();
								  KK++;
								}
							});
		}
		/* 上一頁 */
		function shangyiye() {
		  if(Page>0){
		       Page=Page-1;
			   nextTip(Page, PageSize);
		  }
		}
		/* 下一頁 */
		function xiayiye() {
		  if(Page==0){
		    Page=Page+1;
		    nextTip(Page, PageSize);
		  }else if(Page>0){
		    Page=Page+1;
		    nextTip(Page, PageSize);
		  }
		}
		/* 跳轉到指定頁 */
		function SpecifiedPage(Pag){
		   Pag=Pag-1;
		   nextTip(Pag, PageSize);
		   Page=Pag;
		}
</script>
           

效果截圖：

這樣你就可以準确的加載到本地資料進行分頁了，是不是很簡單呢。