jquery源码分享之基于pagehelper分页条

function getbookinfo(pageNum,pageSize)
{
	var datas='default';
	var realUrl="/ssm/book/findALL/"+pageSize+"/"+pageNum+"";
	var realType="POST";
	jQuery.ajax({
		url: realUrl,
        type: realType,
        dataType: "json",
        async: false,
        success: function (dataTemp) {
            datas = dataTemp;
            //console.log('datas------------1----------'+datas);
        },
        error: function (jqXHR,textStatus,errorThrown){
        	//console.log('textStatus----------'+textStatus);
        	//console.log('jqXHR.readyState----------'+jqXHR.readyState);
        	datas='getbookinfoerror';
        	alert('error');
        }
	});
	return datas
}

function table_tr(table_data)
{
	var tabledata="";
	for(var j = 0;j<table_data.books.length;j++){
		tabledata +="<tr>";
		tabledata +="<td><input type='checkbox' name='bookid' id='"+table_data.books[j].bookid+"' value='"+table_data.books[j].bookid+"'></td>";
		tabledata +="<td><input  readonly='readonly' type='text' name='bookname' id='"+table_data.books[j].bookid+"_bookname' value='"+table_data.books[j].bookname+"'></td>";
		tabledata +="<td><input  readonly='readonly' type='text' name='download' id='"+table_data.books[j].bookid+"_download' value='"+table_data.books[j].download+"'></td>";
		tabledata +="<td><input  readonly='readonly' type='text' name='publishdate' id='"+table_data.books[j].bookid+"_publishdate' value='"+table_data.books[j].publishdate+"'></td>";
	    tabledata +="<td><input  readonly='readonly' type='text' name=' ' id='"+table_data.books[j].bookid+"_ ' value='"+table_data.books[j]. +"'></td>";
	    tabledata +="</tr>";
	}
	
	jQuery("tbody").empty();
	jQuery("tbody").prepend(tabledata);
}
function tableInsert(table_data)
{
	//将返回的值拼接到表里
	table_tr(table_data);
}

function table ()
{
	var tabledata="";
	tabledata +="<thead>";
	tabledata +="<tr>";
	tabledata +="<th>选择</th>";
	tabledata +="<th>图书名称</th>";
	tabledata +="<th>下载量</th>";
	tabledata +="<th>出版时间</th>";
	tabledata +="<th>外链数</th>";
	tabledata +="</tr>";
	tabledata +="</thead>";
	tabledata +="<tbody>";
	tabledata +="</tbody>";
	jQuery("table").append(tabledata);//  拼接进<table></table>
}

jQuery(function() {
	table ();//拼接table的表头
	var pageSize=1;//每页显示数量
	jQuery("#pageSize").val(parseFloat(pageSize));
	var pageNum=1;//初始页码
	jQuery("#pageNum").val(parseFloat(pageNum));
	loadtable(pageSize,pageNum);
})


//更新数据后调用分页条的例子
function loadtable(pageSize,pageNum)
{
	
	//调用数据：根据当前页码pageNum,每页显示数量pageSize,从后台取值，后台建议用mybatis和pagehelper
	var table_data=getbookinfo(pageNum,pageSize);//实际使用到getbookinfo方法里根据ajax获取数据，
	//更新数据
	tableInsert(table_data);//实际使用到tableInsert里拼接数据，
	
	//重新更新页面数据需要更新分页条需要的信息放到页面，然后将pageInfo返回的导航分页NavigatepageNums直接拼接成分页条
	jQuery("#pageSize").val(parseFloat(pageSize));
	jQuery("#pageNum").val(parseFloat(pageNum));
	jQuery("#pages").val(table_data.pages);
	var allpageNum=jQuery("#allpageNum").val(table_data.NavigatepageNums);
	var total=jQuery("#total").val(table_data.total);
	
	//调用分页条方法
	pageToorBar();
	
}
//分页插件
function pageToorBar()
{
	//------------使用方法：可以通过mybatis的pagehelper从后台传数据到页面并将以下参数赋值，然后在调用本分页方法pageToorBar()
	//-------如下例子
	//<lable>每页显示数量pageSize</lable>
	//<input readonly='readonly'  type="text" name="pageSize"  id="pageSize"  value="" />
	//<lable>当前页码pageNum</lable>
	//<input readonly='readonly'  type="text" name="pageNum"  id="pageNum"  value="" />
	//<lable>总页数pages</lable>
	//<input readonly='readonly'  type="text" name="pages"  id="pages"  value="" />
	//<lable>总记录数total</lable>
	//<input readonly='readonly'  type="text" name="total"  id="total"  value="" />
	//<lable>分页条数据</lable>
	//<input readonly='readonly' type="text" name="allpageNum" id="allpageNum" value=""/>
	//---------页面上要有放置分页条的地方，如下：
	//由于用了bootrapt分页条布局需引入：
	//相应bootstrap配置：bootstrap.min.css
	//相应bootstrap配置：jquery-3.3.1.min.js
	//相应bootstrap配置：bootstrap.js  
	//bootrapt分页条:
	//<nav aria-label="Page navigation">
	//	  <ul class="pagination">
	//	  		<li><span>首页</span></li>
	//	  		<!-- 上一页 -->
	//		    <li><span aria-hidden="true">«</span></li>
	//		    
	//		    <!-- 页码 -->
	//		    <li ><span>1</span></li> <!-- li标签：设置无法点击class="disabled"     选中class="active" -->
	//		    <li class="disabled"><span>..</span></li> 
	//		    <li ><span>1000</span></li>
	//		    <!-- 下一页 -->
	//		    <li><span aria-hidden="true">»</span></li>
	//		    <li><span>尾页</span></li>
	//	  </ul>
    //</nav>
	
	var allpageNum=jQuery("#allpageNum").val();
	var pageNum=jQuery("#pageNum").val();
	table_pageToorbar(allpageNum,pageNum);
	
}

function table_pageToorbar(allpageNum,nowpage)
{
	
	var allpageNumArray=new Array();
	allpageNumArray=allpageNum.split(",");//页码数组
	jQuery("ul").empty();  
	var pageToorbar="<li><span  ='firstpage()'>首页</span></li>";
	pageToorbar += "<li><span  ='previouspage()' aria-hidden='true'>上一页</span></li>";
	
	 pageToorbar = table_pageToorbar_insert(allpageNumArray,nowpage,pageToorbar);
	
    pageToorbar += "<li><span   ='nextpage()' aria-hidden='true'>下一页</span></li>";
    pageToorbar += "<li><span  ='lastpage()' >尾页</span></li>";
    jQuery("ul").prepend(pageToorbar);  
}

function table_pageToorbar_insert(allpageNumArray,nowpage,pageToorbar)
{
    for(var i=0;i<allpageNumArray.length;i++)
    {
   		
		if(allpageNumArray[i]==nowpage)
  		{
  			pageToorbar += "<li class='active'><span  ='gopage("+allpageNumArray[i]+")'>"+allpageNumArray[i]+"</span></li>";
  			
  		}else
  		{
  			pageToorbar += "<li ><span  ='gopage("+allpageNumArray[i]+")'>"+allpageNumArray[i]+"</span></li>";
  			
  		}
   		
    }
   	return pageToorbar;
}

function nextpage() 
{
	var pageSize=jQuery("#pageSize").val();
	var total=jQuery("#total").val();
	var pageNumnow=jQuery("#pageNum").val();
	
	var allpageNum=jQuery("#allpageNum").val();
	var allpageNumArray=new Array();
	allpageNumArray=allpageNum.split(",");//页码数组
	var lastpagenum=allpageNumArray[allpageNumArray.length-1];
	
	if(total!='0')
	{
		if(lastpagenum==pageNumnow)
		{
			return;
		}else{
			jQuery("#pageNum").val(parseFloat(pageNumnow)+1);
			var pageNum=jQuery("#pageNum").val();
			//更新数据和分页条方法
			loadtable(pageSize,pageNum);
		}	
	}
}
function lastpage()
{
	var pageSize=jQuery("#pageSize").val();
	var pages=jQuery("#pages").val();
	if(total!='0')
	{
		jQuery("#pageNum").val(parseFloat(pages));
		var pageNum=jQuery("#pageNum").val();
		//更新数据和分页条方法
		loadtable(pageSize,pageNum);
	}

}

function firstpage()
{
	var pageSize=jQuery("#pageSize").val();
	if(total!='0')
	{
		jQuery("#pageNum").val(1);
		var pageNum=jQuery("#pageNum").val();
		//更新数据和分页条方法
		loadtable(pageSize,pageNum);
	}
}
function previouspage() 
{
	var pageSize=jQuery("#pageSize").val();
	var total=jQuery("#total").val();
	var pageNumnow=jQuery("#pageNum").val();
	if(total!='0')
	{
		var ys=total%pageSize;
		var ms=total/pageSize;
		if(ys=='0')
		{
			if(pageNumnow=='1')
			{
				return;
			}else{
				jQuery("#pageNum").val(parseFloat(pageNumnow)-1);
				var pageNum=jQuery("#pageNum").val();
				//更新数据和分页条方法
				loadtable(pageSize,pageNum);
			}	
		}else{
			if(pageNumnow=='1')
			{
				return;
			}else{
				jQuery("#pageNum").val(parseFloat(pageNumnow)-1);
				var pageNum=jQuery("#pageNum").val();
				//更新数据和分页条方法
				loadtable(pageSize,pageNum);
			}	
		}	
	}
}
function gopage(pagenum)
{
	var pageSize=jQuery("#pageSize").val();
	var total=jQuery("#total").val();
	jQuery("#pageNum").val(parseFloat(pagenum));
	var pageNum=jQuery("#pageNum").val();
	//更新数据和分页条方法
	loadtable(pageSize,pageNum);
}