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 相关文章推荐
javascript椭圆旋转相册实现代码
Jan 16 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
Dec 10 Javascript
JS window对象的top、parent、opener含义介绍
Dec 03 Javascript
javascript操作excel生成报表全攻略
May 04 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
Sep 10 Javascript
JavaScript必知必会(十) call apply bind的用法说明
Jun 08 Javascript
Vue.js 60分钟快速入门教程
Mar 28 Javascript
详解使用nvm管理多版本node的方法
Aug 30 Javascript
使用JS判断移动端手机横竖屏状态
Jul 30 Javascript
在vue项目中引入highcharts图表的方法
Jan 21 Javascript
JavaScript实现模态对话框实例
Jan 13 Javascript
详解如何在Javascript中使用Object.freeze()
Oct 18 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
使用sockets:从新闻组中获取文章(三)
2006/10/09 PHP
php实现扫描二维码根据浏览器类型访问不同下载地址
2014/10/15 PHP
简单的自定义php模板引擎
2016/08/26 PHP
PHP中Static(静态)关键字功能与用法实例分析
2019/04/05 PHP
[IE&amp;FireFox兼容]JS对select操作
2007/01/07 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
JS控制图片等比例缩放的示例代码
2013/12/24 Javascript
父页面显示遮罩层弹出半透明状态的dialog
2014/03/04 Javascript
微信小程序 canvas API详解及实例代码
2016/10/08 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
2017/02/15 Javascript
bootstrap是什么_动力节点Java学院整理
2017/07/14 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
微信小程序button组件使用详解
2018/01/31 Javascript
vue-router+nginx 非根路径配置方法
2018/06/30 Javascript
JavaScript函数节流和函数去抖知识点学习
2018/07/31 Javascript
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
关于自定义Egg.js的请求级别日志详解
2018/12/12 Javascript
webpack中如何加载静态文件的方法步骤
2019/05/18 Javascript
详解Vscode中使用Eslint终极配置大全
2019/11/08 Javascript
vue自定义正在加载动画的例子
2019/11/14 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
2020/10/27 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
2020/11/05 Javascript
Vue实现圆环进度条的示例
2021/02/06 Vue.js
Python smallseg分词用法实例分析
2015/05/28 Python
详解python 拆包可迭代数据如tuple, list
2017/12/29 Python
python实现windows壁纸定期更换功能
2019/01/21 Python
python实现树的深度优先遍历与广度优先遍历详解
2019/10/26 Python
python实现人机五子棋
2020/03/25 Python
西班牙床垫网上商店:Colchones.es
2018/05/06 全球购物
旷课检讨书2000字
2014/01/14 职场文书
个人批评与自我批评发言稿
2014/09/28 职场文书
小学生差生评语
2014/12/29 职场文书
Python3.8官网文档之类的基础语法阅读
2021/09/04 Python
MySQL中datetime时间字段的四舍五入操作
2021/10/05 MySQL
Python进程间的通信之语法学习
2022/04/11 Python