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学习笔记(七) js函数介绍
Jun 19 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
Mar 25 Javascript
使用Raygun对Node.js应用进行错误处理的方法
Jun 23 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
Jan 23 Javascript
node.js路径处理方法以及绝对路径详解
Mar 04 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
Nov 11 Javascript
浅谈Vue SSR 的 Cookies 问题
Nov 20 Javascript
JS实现的合并多个数组去重算法示例
Apr 11 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
Feb 26 Javascript
vue中使用GraphQL的实例代码
Nov 04 Javascript
vue多个元素的样式选择器问题
Nov 29 Javascript
通过实例解析vuejs如何实现调试代码
Jul 16 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数据库连接时容易出错的特殊符号问题
2010/09/01 PHP
Admin generator, filters and I18n
2011/10/06 PHP
php使用ffmpeg获取视频信息并截图的实现方法
2016/05/03 PHP
php操作redis命令及代码实例大全
2020/11/19 PHP
兼容IE和FF的图片上传前预览js代码
2013/05/28 Javascript
JavaScript让Textarea支持tab按键的方法
2015/06/26 Javascript
js正则表达式验证邮件地址
2015/11/12 Javascript
jQuery Validate插件实现表单强大的验证功能
2015/12/18 Javascript
jQuery实现的网页换肤效果示例
2016/09/20 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
angularjs ui-router中路由的二级嵌套
2017/03/10 Javascript
vue中的计算属性的使用和vue实例的方法示例
2017/12/04 Javascript
Python中的闭包总结
2014/09/18 Python
Python3.5局部变量与全局变量作用域实例分析
2019/04/30 Python
python连接、操作mongodb数据库的方法实例详解
2019/09/11 Python
Pycharm 2019 破解激活方法图文详解
2019/10/11 Python
在 Jupyter 中重新导入特定的 Python 文件(场景分析)
2019/10/27 Python
python Tensor和Array对比分析
2020/01/08 Python
python闭包、深浅拷贝、垃圾回收、with语句知识点汇总
2020/03/11 Python
python 实现两个npy档案合并
2020/07/01 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
Html5移动端弹幕动画实现示例代码
2018/08/27 HTML / CSS
Kathmandu英国网站:新西兰户外运动品牌
2017/03/27 全球购物
Boston Proper官网:美国女装品牌
2017/10/30 全球购物
JD Sports丹麦:英国领先的运动时尚零售商
2020/11/24 全球购物
美国探亲签证邀请信
2014/02/05 职场文书
关于抽烟的检讨书
2014/02/25 职场文书
法制宣传日活动总结
2014/04/29 职场文书
城管大队整治方案
2014/05/06 职场文书
企业人事任命书
2014/06/05 职场文书
2015元旦主持词开场白和结束语
2014/12/14 职场文书
2015年大学社团工作总结
2015/04/09 职场文书
2015年度信用社工作总结
2015/05/04 职场文书
个人催款函范文
2015/06/24 职场文书
某某幼儿园的教育教学管理调研分析报告
2019/11/29 职场文书
css3实现背景图片半透明内容不透明的方法示例
2021/04/13 HTML / CSS