首页 > 编程 > JavaScript > 正文

jquery pagination分页插件使用详解(后台struts2)

2019-11-19 17:49:13
字体:
来源:转载
供稿:网友

页面是用的纯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; } 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表