【原创】easyPage分页jquery插件

Jquery 分页

分页功能已经是系统必备功能了。我过手过的系统中也不例外。刚开始我是和大家同样的想法，找个第三方分页插件用用。后来怎么感觉不顺手；不能满足开发需求；实际工作中：我们的表格可能是多行表头，很多分页插件只能自动生成单行表头；分页表格通常伴随着很多查询条件，需要收集这些参数传递给Action……针对以上情况索性结合自己的程序写个分页插件吧。

有了这个分页插件页面的代码量大幅度减少；分页开发起来就非常简单了。当时在设计这个分页插件时我的思路是：分页插件就只负责和分页相关的功能，其他的请别帮我干！我们来回顾一下一个分页该做的事情：

收集查询条件参数、分页参数请求Action；
Action返回的JSON信息，填充表格和分页按钮、分页信息展示；

所以对于一个完整的分页流程生成分页按钮（上一页、下一页、1……789……23）、监听分页按钮点击事件收集参数调用Action；是共性的可以抽离出来的；为了灵活应对各种需求收集参数、填充分页表格就需要开发者自己完成了。说起来太抽象，让我们结合代码看看吧。

easyPage分页插件获取方式： https://git.oschina.net/easypage/easypage

使用方法：

1、引入js和css样式

<link href="css/skins/jquery.easypage.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="jquery.easypage.js"></script>

2、调用方法：

   
var tableList = $(".pagin").page({
             prefix:'cc',                            #默认可以为空，仅当页面包含多个分页表格时，使用前缀区分
                                                     #分页具体的action类和方法
             url:'repairPackageAction!list.huzd',
                                                     #分页大小下拉菜单值，默认值写在最前；
             pageSize:[10,5,20,30],
                                                     #数据查询按钮；程序会自动绑定这个按钮的单击事件；按钮被单击就会收集分页信息和查询参数，调用url对于的action地址，可为空
             queryBtn:'queryBtn',
                                                     #参数收集方法；类型为function范围值为JSON
             param:function(){},
                                                     #数据填充回调函数
             fillTable:function(){}                   
   });

3、方法调用：

tableList.refresh(); #在业务操作例如：新增、修改、删除后需要刷新当前列表时调用；程序会收集当前的分页信息和查询信息；调用url对的Action

实例演示：

我们要实现下面的效果

1、在app-log.jsp页面中

                /**获取查询条件参数**/
		function getQueryParam(){
			return {startDate:$("#q_startDate").val(),endDate:$("#q_endDate").val(),'log.username':$("#q_userName").val()};
		}
		
		/**表格填充函数**/
		function fillTable(data){
			var innerHtml = "";
			if(data&&data.flag&&data.logs&&data.logs.length>0){
				$.each(data.logs,function(i,n){
					innerHtml +=("<tr>");
					innerHtml +=("<td>"+n.id+"</td>");
					innerHtml +=("<td>"+n.clientIp+"</td>");
					innerHtml +=("<td>"+n.username+"</td>");
					innerHtml +=("<td>"+n.operateModuleName+"</td>");
					innerHtml +=("<td>"+n.operateType+"</td>");
					innerHtml +=("<td>"+n.operateResult+"</td>");
					innerHtml +=("<td>"+n.operateTime+"</td>");
					innerHtml +=("<td title='"+n.operateContent+"'>"+(n.operateContent.length>20?(n.operateContent.substring(0,20)+"..."):n.operateContent)+"</td>");
					innerHtml +=("</tr>");
				});
			}else{
				innerHtml += "<tr><td colspan='8'>无数据</td></tr>";
				if(data.message)art.dialog({title:'系统提示',content:data.message});
			}
			$(".tablelist>tbody").html(innerHtml);
			$('.tablelist tbody tr:odd').addClass('odd');
		}
		var tableList = null;
		$(document).ready(function(){
		     tableList = $(".tablelist").page({
	             prefix:'',
	             url:'logAction!list.huzd',
	             pageSize:[10,5,20,30],
	             queryBtn:'queryBtn',
	             param:getQueryParam,
	             fillTable:fillTable
	   		});
                });

2、在LogAction.java中：

public class LogAction extends BaseAction{
	public static Logger LOG = LoggerFactory.getLogger(LogAction.class);
	private static final long serialVersionUID = -8613055080615406396L;
	@Resource 
	LogService logService;
	private Log log;
	private boolean flag = true;
	private String message;
	private Page page;
	private List<Log> logs;
	private Date startDate;
	private Date endDate;
	
	public LogAction() {
		MDC.put("operateModuleName","日志管理");
	}
	
	@RequiresPermissions("log:get")
	public String list(){
		if(null==page)page=new Page();
		page.setTotalRecords(logService.findDatasNo(log, startDate, endDate));
		logs = logService.findDatas(log, page, startDate, endDate);
		MDC.put("operateContent","日志列表查询"); 
		LOG.info("");
		return "list";
	}
   }

3、分页Page.java这个代码你只需要直接复制进你的程序就可以了！这个类是struts2用来封装分页参数的类；page会传递给Service层

/**
 * @author huzd@si-tech.com.cn or ahhzd@vip.qq.com
 *  分页类
 */
public class Page {
	
	private Integer pageSize 	= 10;
	private Integer totalRecords 	= 0;
	private Integer totalPages 	= 0;
	private Integer currentPage 	= 1;
	
	public Integer getPageSize() {
		return pageSize;
	}
	public void setPageSize(Integer pageSize) {
		this.pageSize = pageSize;
	}
	public Integer getTotalRecords() {
		return totalRecords;
	}
	public void setTotalRecords(Integer totalRecords) {
		this.totalRecords = totalRecords;
	}
	public Integer getTotalPages() {
		this.totalPages = (totalRecords%pageSize==0)?totalRecords/pageSize:(totalRecords/pageSize)+1;
		return totalPages;
	}
	public void setTotalPages(Integer totalPages) {
		this.totalPages = totalPages;
	}
	public Integer getCurrentPage() {
		return currentPage;
	}
	public void setCurrentPage(Integer currentPage) {
		this.currentPage = currentPage;
	}
}

只需要上面的两段代码就开发出如图所示的分页功能；是不是so easy ？这就是easyPage！妈妈再也不用担心我天天加班了！

本文由 huzd 创作，采用知识共享署名4.0 国际许可协议进行许可本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名最后编辑时间
为: 2017/05/24 13:20