java分页插件_【原创】easyPage分页jquery插件

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

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

Action返回的JSON信息，填充表格和分页按钮、分页信息展示；

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

使用方法：

1、引入js和css样式

    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页面中

/**获取查询条件参数**/

functiongetQueryParam(){

return{startDate:$("#q_startDate").val(),endDate:$("#q_endDate").val(),'log.username':$("#q_userName").val()};

}

/**表格填充函数**/

functionfillTable(data){

varinnerHtml = "";

if(data&&data.flag&&data.logs&&data.logs.length>0){

$.each(data.logs,function(i,n){

innerHtml +=("

");

innerHtml +=("

"+n.id+"");

innerHtml +=("

"+n.clientIp+"");

innerHtml +=("

"+n.username+"");

innerHtml +=("

"+n.operateModuleName+"");

innerHtml +=("

"+n.operateType+"");

innerHtml +=("

"+n.operateResult+"");

innerHtml +=("

"+n.operateTime+"");

innerHtml +=("

"+(n.operateContent.length>20?(n.operateContent.substring(0,20)+"..."):n.operateContent)+"");

innerHtml +=("

");

});

}else{

innerHtml +="

无数据";if(data.message)art.dialog({title:'系统提示',content:data.message});

}

$(".tablelist>tbody").html(innerHtml);

$('.tablelist tbody tr:odd').addClass('odd');

}

vartableList = 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;

@ResourceLogService logService;

private Log log;

privatebooleanflag=true;private String message;

private Page page;

private List logs;

privateDatestartDate;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

*  分页类

*/

publicclassPage {private Integer pageSize = 10;

private Integer totalRecords = 0;

private Integer totalPages = 0;

private Integer currentPage = 1;

public Integer getPageSize() {

returnpageSize;}

public void setPageSize(Integer pageSize) {

this.pageSize = pageSize;

}

public Integer getTotalRecords() {

returntotalRecords;}

public void setTotalRecords(Integer totalRecords) {

this.totalRecords = totalRecords;

}

public Integer getTotalPages() {

this.totalPages= (totalRecords%pageSize==0)?totalRecords/pageSize:(totalRecords/pageSize)+1;returntotalPages;}

public void setTotalPages(Integer totalPages) {

this.totalPages = totalPages;

}

public Integer getCurrentPage() {

returncurrentPage;}

public void setCurrentPage(Integer currentPage) {

this.currentPage = currentPage;

}

}

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

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

为:

2017/05/24 13:20