jquery pagination分页插件使用详解（后台struts2）

页面是用的纯css的效果，没有使用bootstrap的框架，不然自带的分页是挺好用的，就不用麻烦

页面是用的纯css的效果，没有使用bootstrap的框架，不然自带的分页是挺好用的，就不用麻烦了这边使用了jquery pagination分页插件来实现这个功能的，这边后台用的是struts2的框架，ssh的，jquery返回json数据，然后循环拼接table输入到页面，这个分页插件使用起来感觉还是比较简单，代码编辑比较少，也有样式可以选择，但是那样要导入pagination.css在div中的class修改样式不导入的话就只有默认样式，这边样式也没有调节，不是很美观，功能实现了，干货：

效果图：

jsp：

<script src="<%=basePath %>bootstrap/js/jquery.pagination.js"></script> 
<div id="Pagination" class="pagination" text-align="right"><!-- 这里显示分页 --></div> 

js：

var pageIndex = -1; //页面索引初始值 
 var pageSize = 5; //每页显示条数初始化，修改显示条数，修改这里即可 
 var pageCount = 0; //每页显示条数初始化，修改显示条数，修改这里即可 
 InitTable(pageIndex); //Load事件，初始化表格数据，页面索引为0（第一页） 
 //分页，PageCount是总条目数，这是必选参数，其它参数都是可选 
 //翻页调用 
 function PageCallback(index, jq) { 
 InitTable(index); 
 } 
 
 //请求数据 
 function InitTable(pi) { 
 var sendpn = 0; 
 if(pi!=-1){ 
 sendpn = pi; 
 } 
 $.ajax({ 
 type: "POST", 
 dataType: "json", 
 url: 'findEquipmentInfo.action', //提交到一般处理程序请求数据 
 data: {pageNo:sendpn,pageSize:pageSize}, //提交两个参数：pageIndex(页面索引)，pageSize(显示条数) 
 success: function(data) { 
 var tabletr=''; 
 $(data.root).each(function(i,obj){ 
 tabletr=tabletr+"<tr><td><input type='checkbox' class='checkboxAll' value='"+obj.id+"'/></td><td>"+obj.deviceName+"</td>"+"<td>"+obj.deviceIP+"</td>"+"<td>"+obj.companyName+"</td>"+"<td>"+obj.deviceSN+"</td>"+"<td>"+obj.devicePN+"</td>"+"<td>"+obj.inTime+"</td>"+"<td>"+obj.warrantyTime+"</td>"+"</tr>"; 
 }); 
 $("#tablepos_tbody").html(tabletr); 
 pageCount = data.total; 
 if(pageIndex==-1){ 
 pageIndex=0; 
 $("#Pagination").pagination(pageCount, { 
 callback: PageCallback, //PageCallback() 为翻页调用次函数。 
 prev_text: "« 上一页", 
 next_text: "下一页 »", 
 items_per_page:pageSize, 
 num_edge_entries: 2, //两侧首尾分页条目数 
 num_display_entries: 6, //连续分页主体部分分页条目数 
 current_page: pageIndex, //当前页索引 
 }); 
 } 
 } 
 }); 
 } 

action：

 private int rowCount=0; 
 private int pageNo=1; 
 private int pageSize=10; 
 private int pageCount=0; 
 private String result; 
 
public int getRowCount() { 
 return rowCount; 
 } 
 public void setRowCount(int rowCount) { 
 this.rowCount = rowCount; 
 } 
public int getPageNo() { 
 return pageNo; 
} 
public void setPageNo(int pageNo) { 
 this.pageNo = pageNo; 
} 
public int getPageSize() { 
 return pageSize; 
} 
public void setPageSize(int pageSize) { 
 this.pageSize = pageSize; 
} 
public int getPageCount() { 
 return pageCount; 
} 
public void setPageCount(int pageCount) { 
 this.pageCount = pageCount; 
} 
public String getResult() { 
 return result; 
} 
public void setResult(String result) { 
 this.result = result; 
} 

public String findEquipmentInfo(){ 
 Page page =new Page(); 
 page.setStart(pageSize*pageNo); 
 page.setLimit((pageNo+1)*pageSize); 
 page.setTotalCount(service.rowCount()); 
 List list=service.allperson(pageNo, pageSize); 
 System.out.println(pageNo+" "+pageSize ); 
 this.setJsonStr(listToGridJoson(page, list)); 
 return SUCCESS; 
} 

home：

int rowCount=0; 
public int rowCount(){ 
 String sql = "select count(*) from EQUIPMENT_INFO"; 
 Query query = sessionFactory.getCurrentSession().createSQLQuery(sql.toString()); 
 int rowCount = Integer.parseInt(query.uniqueResult().toString()); 
 return rowCount; 
} 
 
public List allperson(int pageNo,int pageSize){ 
 System.out.println(pageNo); 
 List list=this.all(pageNo, pageSize); 
 return list; 
} 
 
public List all(int pageNo,int pageSize){ 
 String sql = "from EquipmentInfo "; 
 Query query = sessionFactory.getCurrentSession().createQuery(sql.toString()); 
 query.setFirstResult(pageSize*pageNo); 
 query.setMaxResults(pageSize); 
 List list = query.list(); 
 return list; 
} 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。