<!--//////////
必须传递过来的参数说明:
page:当前页
pageSize:一页显示数量
startPage:页数显示第一个页面
endPage:页数显示最后一个页面


提交的form 注意点
1.必须包含 <input type="hidden" id="pageNo"  name="pageNo" value="1" > 作为参数 pageNo（要查询的当前页） 提交到后台。
2. 用户输入的搜索 条件框 搜索时， 要提交表单前 ，请 用 js 将 要查询的当前页 设置为 1， 默认从第一页查询。 $("pageNo").val("1"); 
3. 要查询的form 必须设置id="submit_form", 因为提交form 为使用id提交 ;$("#submit_form").submit();
//////////-->
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DGT | 分页</title>
<script src="${jsPath }/jquery-1.9.1.min.js"></script>
<style>
.pageNumError{
	border-color: #ed5565;
}
</style>
</head>
<body>

<div class="row"> 
	<span id="pager_data" class="recordtotal">		
		<input type="hidden" id="currentPage" name="page" value=${list.pageNo }>		
		<input type="hidden" id="pageSize" value=${list.pageSize }>	
		<input type="hidden" id="startPage" value=${list.startPage }>		
		<input type="hidden" id="endPage" value=${list.endPage }>	
		<input type="hidden" id="pageTotal" value=${list.pages }>
		<input type="hidden" id="total" value=${list.total }>
	</span>	
 	<div class="col-sm-4"  style="margin-top: 25px; font-size: 15px">共 ${list.pages} 页 ${list.total} 
		条记录，当前为第 ${list.pageNo} 页 
	</div>  
	<div class="col-sm-8" style="text-align: right; font-size: 15px">
		<ul class="pagination" id="bootstrappager">
			<!-- 显示页 由js 拼接 -->
		</ul> 
	</div>
</div>
<script>
	var _pages = $("#pageTotal").val();
	var _pageNo = $("#currentPage").val();
	var _total = $("#total").val();
	var pageSize = $("#pageSize").val();
	var startPage = $("#startPage").val();
	var endPage = $("#endPage").val();
	var _startPage = parseInt(startPage);
	var _endPage = parseInt(endPage);
	var currentPage = $("#currentPage").val();
	var _currentPage = parseInt(currentPage);
	
	var html = '<li><a href="javascript:void(0);" id="start"  class="p1">首页</a></li>'+'<li><a href="javascript:void(0);" id="previous" class="p2">上一页</a></li>';
	
	var html1 = '<li><a href="javascript:void(0);" id="next" class="p2">下一页</a></li>'+'<li><a href="javascript:void(0);" id="end" class="p1">尾页</a></li>'
	+'<li id="toolBar_jumpPage" style="line-height: 30px;">&nbsp;&nbsp;&nbsp;跳到<input type="text" style="width: 30px;height: 20px;line-height: 20px;" id="pageNum" style="width:30px" value=""/>页<a href="javascript:void(0);" id="jumpPageNum" class="p4">跳转</a></li>';
		
	for(var i=_startPage;i<=_endPage;i++){
		if(_currentPage==i){
			html += '<li class="active"><a  href="javascript:void(0);" class="p3">'+i+'</a></li>';
		}else{
			html += '<li><a  href="javascript:void(0);" class="p3">'+i+'</a></li>';
		}
	}
	
	html = html + html1;
	$("#bootstrappager").html(html);

	//按钮初始状态
	if(_currentPage==_startPage){
		//当前页等于第一页时，首页和上一页不能点击,下一页和尾页 可以点击
		$("#start").parent().addClass("disabled");
		$("#previous").parent().addClass("disabled");
		$("#end").parent().removeClass("disabled");
		$("#next").parent().removeClass("disabled");
	}else if(_currentPage==_endPage){
		//当前页等于最后一页时，下一页和尾页不能点击, 首页和上一页可以点击
		$("#next").parent().addClass("disabled");
		$("#end").parent().addClass("disabled");
		$("#start").parent().removeClass("disabled");
		$("#previous").parent().removeClass("disabled");
	}else {
		$("#next").parent().removeClass("disabled");
		$("#end").parent().removeClass("disabled");
		$("#start").parent().removeClass("disabled");
		$("#previous").parent().removeClass("disabled");
	}
	//只有一页时, 都不能点击
	if(_startPage==_endPage&&_startPage==1){
		$("#start").parent().addClass("disabled");
		$("#previous").parent().addClass("disabled");
		$("#next").parent().addClass("disabled");
		$("#end").parent().addClass("disabled");
	}
</script> 
<script type="text/javascript">
//点击按钮提交事件
$(function() {	
	$("body").delegate(".p1,.p2,.p3,.p4","click", function(event){
		var $this = $(this);
		if($this.parent().hasClass("disabled")){
			return;
		}else{
			var startPage = 1;
			var endPage = parseInt($("#pageTotal").val());
			var className = $this.attr("class");
			var page = 1;
			if("p3"==className){
				//点击 页码
				page = parseInt($this.html());				
			}else if("p2"==className){
				//点击上一页或下一页
				var id = $this.attr("id");
				if("previous"==id){
					page = parseInt($("#currentPage").val())-1;
				}else if ("next"==id){
					page = parseInt($("#currentPage").val())+1;
				}
			}else if("p1"==className){
				//点击首页或尾页
				var id = $this.attr("id");
				if("start"==id){
					page = 1;
				}else if("end"==id){
					page = endPage;
				}
			}else if("p4"==className){
				//手动输入数字
				var targetPage = $.trim($("#toolBar_jumpPage>#pageNum").val());
				if("" == targetPage ){
					$("#toolBar_jumpPage>#pageNum").addClass("pageNumError");
					return; 
				}
				if(isNaN(targetPage)){
					$("#toolBar_jumpPage>#pageNum").addClass("pageNumError");
					return;
				}
				var _targetPage = parseInt(targetPage);
				if(_targetPage<startPage||_targetPage>endPage){
					$("#toolBar_jumpPage>#pageNum").addClass("pageNumError");
					return;
				}
				$("#toolBar_jumpPage>#pageNum").removeClass("pageNumError");
				page = _targetPage;
			}
			queryEvent(page);		
		}
	});
});

function queryEvent(currentPage) {
	$("#currentPage").val(currentPage);
	$("#pageNo").attr("value",currentPage)
	$("#submit_form").submit();
}
</script>
</body>
</html>
