【Web前端】 动态获取数据的【分页源代码】，大前端技术储备

*******************************************jsp  如下  ****************************************



<!-- ******************  开始分页显示区域****************   -->
<div class="clearfix  mb15">
  <span class="left lh30">共&nbsp;<em class="countNum"></em>&nbsp;条数据</span>
   <div class="pull-right f12">
   <div class="pageShow"><span>每页</span>
    <a href="javascript:;" onclick="Common.pagination.changeSizePerPage(20,this,PaperManage);"         class="active 20">20</a>
    <a class="50" href="javascript:;" onclick="Common.pagination.changeSizePerPage(50,this,Pape        rManage);">50</a>
    <a class="100"  href="javascript:;" onclick="Common.pagination.changeSizePerPage(100,this,P        aperManage);">100</a>
    <span><em class="currentPage fb">1</em>/<em class="totalPage">1</em>页</span></div>
    <ul class="pagination mg0">
     <li><a href="javascript:;" onclick="Common.pagination.turnPage(1,PaperManage);">首页</a></         li>
     <li><a href="javascript:;" onclick="Common.pagination.turnPage('-',PaperManage);">上一页</a          ></li>
     <li><a href="javascript:;" onclick="Common.pagination.turnPage('+',PaperManage);">下一页</a            ></li>
      <li><a href="javascript:;" onclick="Common.pagination.turnPage('end',PaperManage);">末页<           /a></li>
   </ul>
 </div>
</div>
 <!-- ******************  结束分页显示区域****************   -->
function(){
 Common.pagination.initData(); //  后断获取数据函数
 }


****************************************** js  如下   **************************************
   var recordCount,totalPage;//总条数,所有页数
   var pageSize = 20;//每页条数
   var currentPage = 1;//当前页
   var data = {'cjr':userId};
   var userId = "2007012143";
              /**
		 * 分页功能
		 */
		pagination : {
			
			/**
			 * 赋值及分页数据填充
			 */
			initData : function(data){
					recordCount = data.resultList.recordCount;
					pageSize = data.resultList.pageSize;
					currentPage = data.resultList.currentPage;
					totalPage = Math.ceil(recordCount/pageSize);
					$(".countNum").text(data.resultList.recordCountStr);
					$(".currentPage").text(data.resultList.currentPageStr);
					$(".totalPage").text(totalPage);
			},

			/**
			 * 改变每页显示条数
			 */
			changeSizePerPage : function(str,el,moduleName){
				$(".pageShow a").removeClass('active');
				$(".pageShow a."+str).addClass('active');
				pageSize = parseInt(str);
				data['pageSize']=pageSize;
				if(pageSize>recordCount){
					data['currentPage']= 1;
				}
				moduleName.getData();
			},
			
			/**
			 * 翻页
			 */
			turnPage : function(str,moduleName){
				if(str=='+'){//next page
					currentPage = Math.min((currentPage+1),totalPage);
				}else if(str=='-'){//previous page
					currentPage = Math.max((currentPage-1),1);
				}else if(str=='end'){//last page
					currentPage = totalPage;
				}else{
					currentPage = parseInt(str);
				}
				data['currentPage']=currentPage;
				moduleName.getData();
			}
		},

转载请注明文章来自： http://my.oschina.net/zhangbudun/blog/222951