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


Posted in Javascript onJanuary 22, 2017

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

效果图:

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 无废话系列教程(二) jquery实战篇上
Jun 23 Javascript
关于JavaScript的面向对象和继承有利新手学习
Jan 11 Javascript
JavaScript图片轮播代码分享
Jul 31 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
Oct 09 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 Javascript
js滚轮事件兼容性问题需要注意哪些
Nov 15 Javascript
jQuery点击导航栏选中更换样式的实现代码
Jan 23 Javascript
JavaScript Date 知识浅析
Jan 29 Javascript
详解Angular2组件之间如何通信
Jun 22 Javascript
微信小程序实现的五星评价功能示例
Apr 25 Javascript
vue+element实现图片上传及裁剪功能
Jun 29 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
Nov 10 Javascript
jQuery中DOM节点的删除方法总结(超全面)
Jan 22 #Javascript
js实现贪吃蛇小游戏(容易理解)
Jan 22 #Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
Jan 22 #Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
Jan 22 #Javascript
js实现图片360度旋转
Jan 22 #Javascript
Vue 过渡(动画)transition组件案例详解
Jan 22 #Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
Jan 22 #Javascript
You might like
PHP 服务器配置(使用Apache及IIS两种方法)
2009/06/01 PHP
用PHP为SHOPEX增加日志功能代码
2010/07/02 PHP
解析将多维数组转换为支持curl提交的一维数组格式
2013/07/08 PHP
php-fpm配置详解
2014/02/12 PHP
Yii不依赖Model的表单生成器用法实例
2014/12/04 PHP
PHP的数组中提高元素查找与元素去重的效率的技巧解析
2016/03/03 PHP
THINKPHP截取中文字符串函数实例代码
2017/03/20 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
Yii2框架控制器、路由、Url生成操作示例
2019/05/27 PHP
js几个不错的函数 $$()
2006/10/09 Javascript
MooTools 1.2介绍
2009/09/14 Javascript
js动态在form上插入enctype=multipart/form-data的问题
2012/05/24 Javascript
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
Javascript之BOM(window对象)详解
2016/05/25 Javascript
javascript 缓冲运动框架的实现
2017/09/29 Javascript
Vue组件中slot的用法
2018/01/30 Javascript
Angular2.0实现modal对话框的方法示例
2018/02/18 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
2019/06/10 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
2019/11/04 Javascript
[02:19]DOTA2女子战队FOX视频专访:希望更多美眉一起加入
2013/10/15 DOTA
Python实现购物车购物小程序
2018/04/18 Python
Python玩转PDF的各种骚操作
2019/05/06 Python
Python爬虫解析网页的4种方式实例及原理解析
2019/12/30 Python
pytorch下的unsqueeze和squeeze的用法说明
2021/02/06 Python
css3 2D图片转动样式可以扩充到Js当中
2014/04/29 HTML / CSS
Peter Alexander新西兰站:澳大利亚领先的睡衣设计师品牌
2016/12/10 全球购物
荷兰家电销售网站:Welhof
2020/12/08 全球购物
Blue Nile中国官网:全球知名的钻石和珠宝网络零售商
2020/03/22 全球购物
小学生秋游活动方案
2014/02/23 职场文书
商务助理求职信范文
2014/04/20 职场文书
地震慰问信
2015/02/14 职场文书
信息技术教研组工作总结
2015/08/13 职场文书
党员学习中国梦心得体会
2016/01/05 职场文书
七个Python必备的GUI库
2021/04/27 Python
MySQL高级进阶sql语句总结大全
2022/03/16 MySQL
Python使用socket去实现TCP客户端和TCP服务端
2022/04/12 Python