热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

页面是用的纯css的效果,没有使用bootstrap的框架,不然自带的分页是挺好用的,就不用麻烦了这边使用了jquery paginatio

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

效果图:

jsp:

 
 

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+""+obj.deviceName+""+""+obj.deviceIP+""+""+obj.companyName+""+""+obj.deviceSN+""+""+obj.devicePN+""+""+obj.inTime+""+""+obj.warrantyTime+""+""; 
    }); 
    $("#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; 
} 

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


推荐阅读
  • 本文探讨了2019年前端技术的发展趋势,包括工具化、配置化和泛前端化等方面,并提供了详细的学习路线和职业规划建议。 ... [详细]
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • 在使用 MUI 框架进行应用开发时,开发者常常会遇到 mui.init() 和 mui.plusReady() 这两个方法。本文将详细解释它们的区别及其在不同开发环境下的应用。 ... [详细]
  • 本文介绍了一段使用jQuery实现的用户注册页面表单验证代码,适用于前端开发人员学习和参考。该示例结合了HTML、CSS和JavaScript,确保用户输入的数据格式正确。 ... [详细]
  • 本文详细介绍了Ionic框架的使用方法及其与Angular的集成。Ionic框架是一个强大的前端开发工具,适用于构建跨平台的移动应用程序。文章将探讨如何引入必要的CSS和JavaScript文件,并解释bundle.js中包含的核心功能,如路由等。 ... [详细]
  • 深入理解ExtJS:从入门到精通
    本文详细介绍了ExtJS的功能及其在大型企业前端开发中的应用。通过实例和详细的文件结构解析,帮助初学者快速掌握ExtJS的核心概念,并提供实用技巧和最佳实践。 ... [详细]
  • Spring Boot 中静态资源映射详解
    本文深入探讨了 Spring Boot 如何简化 Web 应用中的静态资源管理,包括默认的静态资源映射规则、WebJars 的使用以及静态首页的处理方法。通过本文,您将了解如何高效地管理和引用静态资源。 ... [详细]
  • 一个登陆界面
    预览截图html部分123456789101112用户登入1314邮箱名称邮箱为空15密码密码为空16登 ... [详细]
  • 本文介绍了多个适用于用户界面设计的Canvas框架,帮助开发者选择最适合的工具。 ... [详细]
  • 基于JQuery实现的评分插件
    本文介绍了一个使用JQuery创建的交互式评分控件。当用户将鼠标悬停在星星上时,左侧的星星会变为实心,右侧保持空心,并显示对应的评分等级;移开鼠标后,所有星星恢复为空心状态。 ... [详细]
  • 在PHP后端开发中遇到一个难题:通过第三方类文件发送短信功能返回的JSON字符串无法解析。本文将探讨可能的原因并提供解决方案。 ... [详细]
  • 使用JS、HTML5和C3创建自定义弹出窗口
    本文介绍如何结合JavaScript、HTML5和C3.js来实现一个功能丰富的自定义弹出窗口。通过具体的代码示例,详细讲解了实现过程中的关键步骤和技术要点。 ... [详细]
  • 本文详细介绍了如何使用 HTML 和 CSS 对文件上传按钮进行样式美化,使用户界面更加友好和美观。 ... [详细]
  • CentOS 7.2 配置防火墙端口开放
    本文介绍如何在 CentOS 7.2 系统上配置防火墙以开放特定的服务端口,包括 FTP 服务的临时与永久开放方法,以及如何验证配置是否生效。 ... [详细]
  • Asp.net MVC 中 Bundle 配置详解:合并与压缩 JS 和 CSS 文件
    本文深入探讨了 Asp.net MVC 中如何利用 Bundle 功能来合并和压缩 JavaScript 和 CSS 文件,提供了详细的配置步骤和示例代码,适合开发人员参考学习。 ... [详细]
author-avatar
秋凉凉_e1998
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有