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 相关文章推荐
js 禁用浏览器的后退功能的简单方法
Dec 10 Javascript
VBS通过WMI监视注册表变动的代码
Oct 27 Javascript
解决jquery中美元符号命名冲突问题
Jan 08 Javascript
推荐一个封装好的getElementsByClassName方法
Dec 02 Javascript
js 输入框 正则表达式(菜鸟必看教程)
Feb 19 Javascript
angularjs实现首页轮播图效果
Apr 14 Javascript
使用JavaScript实现node.js中的path.join方法
Aug 12 Javascript
Angular4 Select选择改变事件的方法
Oct 09 Javascript
深入理解JavaScript 中的执行上下文和执行栈
Oct 23 Javascript
Vue程序调试的方法
Jun 17 Javascript
Vue实现数据请求拦截
Oct 23 Javascript
Angular+ionic实现折叠展开效果的示例代码
Jul 29 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
重量级动漫纷纷停播!唯独OVERLORD第四季正在英魂之刃继续更新
2020/05/06 日漫
PHP+jQuery实现自动补全功能源码
2013/05/15 PHP
WordPress中调试缩略图的相关PHP函数使用解析
2016/01/07 PHP
Uglifyjs(JS代码优化工具)入门 安装使用
2020/04/13 Javascript
使用jQuery插件创建常规模态窗口登陆效果
2013/08/23 Javascript
jquery动态加载js/css文件方法(自写小函数)
2014/10/11 Javascript
详解addEventListener的三个参数之useCapture
2015/03/16 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
bootstrap-treeview自定义双击事件实现方法
2016/01/09 Javascript
JS从数组中随机取出几个数组元素的方法
2016/08/02 Javascript
jQuery实现字符串全部替换的方法
2016/12/12 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
2018/01/22 Javascript
vue.js 中使用(...)运算符报错的解决方法
2018/08/09 Javascript
Angular7.2.7路由使用初体验
2019/03/01 Javascript
Electron-vue开发的客户端支付收款工具的实现
2019/05/24 Javascript
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
[01:00:53]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Secret
2018/03/30 DOTA
TensorFlow实现创建分类器
2018/02/06 Python
django删除表重建的实现方法
2019/08/28 Python
Python urlopen()和urlretrieve()用法解析
2020/01/07 Python
python matplotlib中的subplot函数使用详解
2020/01/19 Python
Mysql数据库反向生成Django里面的models指令方式
2020/05/18 Python
python 实现一个简单的线性回归案例
2020/12/17 Python
html5 button autofocus 属性介绍及应用
2013/01/04 HTML / CSS
html2canvas生成清晰的图片实现打印的示例代码
2019/09/30 HTML / CSS
您的网上新华书店:文轩网
2016/08/24 全球购物
Urban Outfitters美国官网:美国生活方式品牌
2016/08/26 全球购物
贝玲妃美国官方网站:Benefit美国
2016/08/28 全球购物
历史系毕业生自荐信
2013/10/28 职场文书
如何编写优秀的食品项目创业计划书
2014/01/23 职场文书
增员口号大全
2014/06/18 职场文书
绿色出行口号
2014/06/18 职场文书
2015年基层党组织公开承诺书
2015/01/21 职场文书
宾馆前台接待岗位职责
2015/04/02 职场文书
党支部评议意见
2015/06/02 职场文书
校运会班级霸气口号
2015/12/24 职场文书