日期:2014-05-16  浏览次数:20532 次

[备忘]js分页工具...不可重用
用法:
<script type="text/javascript">

function init(params) {
 $("[name='uName']").val(params.userName);
 if (params.treeParam !== undefined) {
  $("[name='treeParam']").val(params.treeParam);
 }
}

//持久化查询条件

function testPaging(pagingObj) {
 var params = pagingObj.paramMap;
 $("[name='uName']").val(params.userName);
}
     createPaging(1, $("#p"), ${paging}, ${paramsToJSON}, $("[name='form1']"), init, testPaging);
 </script>

//---------------代码-----------------

/**
 * 分页对象
 * @param 对象唯一标志
 * @param 对应表单
 * @param 执行分页操作的函数
 * @param 查询参数
 * @return 分页对象
 */
function PagingObj(index, form, executeFunc, paramMap) {
	var _this = this;
	this.index = index;
	this.pageCurrent = 1;	// 当前页数
	this.pageSum = 0;	// 总页数
	this.rowSum = 0;	// 总行数
	this.executeFunc = executeFunc;	// 分页执行函数
	this.paramMap = paramMap;	// 查询条件
	$('<input type="text" style="display:none" />').prependTo(form);	// 取消form表单回车事件
	var current = $('<input type="hidden" name="pageCurrent" />').appendTo(form);	// 当前页数
	/**
	 * 创建分页标签
	 * @param 选择器
	 * @return
	 */
	this.appendPagingTag = function(selector) {
		$(selector).append("<span id=\"firstPage" + this.index + "\" style='color:#00527b' onmouseover='this.style.color=\"#fe7d00\"' onmouseout='this.style.color=\"#00527b\"'>首页</span> " +
				"<span id=\"backPage" + this.index + "\" style='color:#00527b' onmouseover='this.style.color=\"#fe7d00\"' onmouseout='this.style.color=\"#00527b\"'>上一页</span> " +
				"<span id=\"nextPage" + this.index + "\" style='color:#00527b' onmouseover='this.style.color=\"#fe7d00\"' onmouseout='this.style.color=\"#00527b\"'>下一页</span> " +
				"<span id=\"lastPage" + this.index + "\" style='color:#00527b' onmouseover='this.style.color=\"#fe7d00\"' onmouseout='this.style.color=\"#00527b\"'>尾页</span> " +
				"[<span id=\"pageCurrent" + this.index + "\"></span>/<span id=\"pageSum" + this.index + "\"></span>] " +
				"<input id=\"jumpPageInput" + this.index + "\" type=\"text\" size=\"1\" value=\"1\" />&nbsp; " +
				"<span id=\"jumpPage" + this.index + "\" href=\"#\"><input type='button' class='button' value='转到'/></span>&nbsp; " +
				"共 [<span id=\"rowSum" + this.index + "\"></span>] 条记录");
		$("#firstPage" + this.index).live("click", function() {_this.firstPage();}).css("cursor", "pointer");
		$("#backPage" + this.index).live("click", function() {_this.backPage();}).css("cursor", "pointer");
		$("#nextPage" + this.index).live("click", function() {_this.nextPage();}).css("cursor", "pointer");
		$("#lastPage" + this.index).live("click", function() {_this.lastPage();}).css("cursor", "pointer");
		$("#jumpPage" + this.index).live("click", function() {_this.jumpPage();}).css("cursor", "pointer");
		// 绑定回车事件
		$('#jumpPageInput' + this.index).bind('keyup', function(event){
			if (event.keyCode=="13"){
				_this.jumpPage();
			}
		});
	};
	/**
	 * 增加样式
	 * @param 样式类型
	 * @return
	 */
	this.addTagStyle = function(styleClass) {
		$("#firstPage" + this.index).addClass(styleClass);
		$("#backPage" + this.index).addClass(styleClass);
		$("#nextPage" + this.index).addClass(styleClass);
		$("#lastPage" + this.index).addClass(styleClass);
		$("#jumpPage" + this.index).addClass(styleClass);
	}
	/**
	 * 删除样式
	 * @param 样式类型
	 * @return
	 */
	this.removeTagStyle = function(styleClass) {
		$("#firstPage" + this.index).removeClass(styleClass);
		$("#backPage" + this.index).removeClass(styleClass);
		$("#nextPage" + this.index).removeClass(styleClass);
		$("#lastPage" + this.index).removeClass(styleClass);
		$("#jumpPage" + this.index).removeClass(styleClass);
	}
	/**
	 * 获得操作标签的jQuery对象
	 * @param 对象数组
	 * @return
	 */
	this.getTags = function() {
		var tags = [$("#firstPage" + this.index), $("#backPage" + this.index), 
		            $("#nextPage"