在前端中我们总会遇到显示数据的问题



- 正常情况分页显示是必须的,这个时候我们不能仅仅在前端进行分页,在前端其实做起分页是很困难的,着就要求我们在后台拿数据的时候就要把分页数据准备好,在前端我们只需要将这些后台准备好的数据拿过来就行了

- 在后台我们通常是实现准备好一个分页工具类Pagination这里是分页显示的基本数据

- 在前台中我们只需要将pagination中构造函数中所需要的参数传过来就可以了。然后在向数据查询数据的时候将pagination中的限定条件传过去查询的数据就不是所有的数据而是前端所请求的分页数据了理论就是这样了下面看看我是如何实现的

- `@RequestMapping(value = { “/assistantWork.action” })

public String assistantWork(HttpSession session, Integer page, QueryVo vo,

Model model) {

User user = (User) session.getAttribute(“user”);

if (vo == null) {

vo = new QueryVo();

}

// 当前页

if (page == null) {

page = 1;

}

vo.setUserId(user.getId());

// 查询总记录

Integer countrecord = workSerivce.selectAllWorksByConditionCount(vo);

List clazzs = workSerivce.selectClazzsByUserId(user.getId());

model.addAttribute(“clazzs”, clazzs);

if(countrecord!=0){

// 分页对象

Pagination pagination = new Pagination(page, countrecord);

        // 设置分页的查询条件
vo.setStartSize(pagination.getStartsize());
vo.setPageSize(pagination.PAGESIZE);
// 拿到改助教管理下的所有班级的作业
// List<Work> works = workSerivce.selectAllWorks(user.getId());
List<Work> works = workSerivce.selectWorksByClazzId(vo);
pagination.setRows(works); model.addAttribute("pagination", pagination);
// 条件传过去 回写
model.addAttribute("vo", vo);
}else {
//没有管理的班级
model.addAttribute("msg", "当前用户没有管理的作业");
}
return "/pages/assistant/homework_assistant";
}`
这段代码里面用到其他的mybatis分装类,这里读者请忽视其他的只看我们将的pagination这段就可以了,可以看出我在最后查询的时候是带着pagination条件的,最后拿到的数据就是我们前端需要的![这里写图片描述](http://img.blog.csdn.net/20160624145742854)
  • 整个过程就是这样下面我将pagination工具类贴在下面
  • `package tm.change.util;

import java.util.List;

/**

*

* @author redarmy_chen

*

* @param

*/

public class Pagination {

// 分页信息
private int nowpage;// 当前页
private int countrecord;// 总记录
private int countpage;// 总页数 public static final int PAGESIZE = 3;// 每页显示的记录数 private int startpage;// 页面中的起始页
private int endpage;// 页面中的结束页 private int startsize; private final int SHOWPAGE = 6;// 页面中显示的总页数 baidu,google显示的总页数是20
// 在测试我们才用6来测试 private List<T> rows; private String url; public Pagination() {
super();
// TODO Auto-generated constructor stub
} /** 根据当前页及总记录数来构造分页对象 */
public Pagination(int nowpage, int countrecord) {
//获取当前页 //1 2 3
//判断最小页码
if(nowpage<=1){
this.nowpage=1;
}else{
this.nowpage = nowpage;
}
//总记录数
this.countrecord = countrecord; /** 计算总页数 */
this.countpage = this.countrecord % this.PAGESIZE == 0 ? this.countrecord
/ this.PAGESIZE
: this.countrecord / this.PAGESIZE + 1; //判断最大页
if(this.nowpage>=this.countpage){
this.nowpage=this.countpage;
} //开始的记录数
this.startsize=(this.nowpage-1)*this.PAGESIZE; /** 计算startpage与endpage的值 */ /** 总页数数是否小于4 */
if (this.countpage < (this.SHOWPAGE / 2 + 1)) {
this.startpage = 1; // 页面中起始页就是1
this.endpage = this.countpage;// 页面中的最终页就是总页数
} else {
/** else中是总页数大于4的情况 */ /** 首先当前页的值是否小于等于4 */
if (this.nowpage <= (this.SHOWPAGE / 2 + 1)) {
this.startpage = 1;
this.endpage = this.nowpage + 2;
/** 判断页面的最终页是否大于总页数 */
if (this.endpage >= this.countpage) {
this.endpage = this.countpage;
}
} else {
this.startpage = this.nowpage - 3;
this.endpage = this.nowpage + 2; if (this.endpage >= this.countpage) {
this.endpage = this.countpage;
if (this.countpage < this.SHOWPAGE) {
this.startpage = 1;
} else {
this.startpage = this.endpage - 5;
} }
} } } public int getNowpage() {
return nowpage;
} public void setNowpage(int nowpage) {
this.nowpage = nowpage;
} public int getCountrecord() {
return countrecord;
} public void setCountrecord(int countrecord) {
this.countrecord = countrecord;
} public int getCountpage() {
return countpage;
} public void setCountpage(int countpage) {
this.countpage = countpage;
} public int getStartpage() {
return startpage;
} public void setStartpage(int startpage) {
this.startpage = startpage;
} public int getEndpage() {
return endpage;
} public void setEndpage(int endpage) {
this.endpage = endpage;
} public List<T> getRows() {
return rows;
} public void setRows(List<T> rows) {
this.rows = rows;
} public String getUrl() {
return url;
} public void setUrl(String url) {
this.url = url;
} public int getStartsize() {
return startsize;
} public void setStartsize(int startsize) {
this.startsize = startsize;
}

}`

JavaWeb前端分页显示方法的更多相关文章

  1. flask 前端 分页 显示

    # flask 前端 分页 显示 1.分页原理 web查询大量数据并显示时有有三种方式: 从数据库中查询全部,在view/客户端筛选/分页:不能应对记录大多的情况,一般不使用: 分页查询,每次在数据库 ...

  2. Latex 算法过长 分页显示方法

    参考: Algorithm tag and page break Latex 算法过长 分页显示方法 1.引用algorithm包: 2.在\begin{document}前加上以下Latex代码: ...

  3. Django中使用JS通过DataTable实现表格前端分页,每页显示页数,搜索等功能

    Django架构中自带了后端分页的技术,通过Paginator进行分页,前端点击按钮提交后台进行页面切换. 优缺点:后端分页对于数据量大的场景有其优势,但页面切换比较慢. 后端分页python3代码如 ...

  4. 纯JS前端分页方法(JS分页)

    1.JS分页函数:开发过程中,分页功能一般是后台提供接口,前端只要传page(当前页码)和pageSize(每页最大显示条数)及对应的其他查询条件,就可以返回所需分页显示的数据. 但是有时也需要前端本 ...

  5. JavaWeb分页显示内容之分页查询的三种思路(数据库分页查询)

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6134851.html 在开发过程中,经常做的一件事,也是最基本的事,就是从数据库中查询数据,然后在客户端显示出 ...

  6. JavaWeb实现分页的四种方法

    一.借助数组进行分页 原理:进行数据库查询操作时,获取到数据库中所有满足条件的记录,保存在应用的临时数组中,再通过List的subList方法,获取到满足条件的所有记录. 实现: 首先在dao层,创建 ...

  7. 利用Flask-SQLAlchemy提供的paginate()方法实现博客文章的分页显示

    在开发blog系统的时候,我们有一个需求,就是要显示作者已经发表的blog文章的列表,或显示作者关注者的文章列表.实现这个功能并不复杂,只需要在存储文章的数据库中过滤出指定作者的文章,然后渲染HTML ...

  8. long型长整数字在前端页面显示异常及其解决方法

    文章目录 1.引子 2.解决问题 (1)初试EL表达式取long型数值 (2)再探EL表达式取字符串格式long型数值 (3)最后一试---给EL表达式加引号 3.总结 1.引子 在做项目中,发现了一 ...

  9. js前端分页之jQuery

    锋利的js前端分页之jQuery 大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的内部比 ...

随机推荐

  1. c++简单桶排序

    c++简单桶排序 题目一样,还是排序 桶排序是排序算法里比较快的 代码 + 注释 #include <bits/stdc++.h> using namespace std; int mai ...

  2. Innovus Lab和Lab Guide下载地址 | Innovus教程 - Flow系列 - 数据准备

    本文转自:自己的微信公众号<集成电路设计及EDA教程> <Innovus Lab和Lab Guide下载地址 |    Innovus教程 - Flow系列 - 数据准备>   ...

  3. c++学习书籍推荐《C++设计新思维》下载

    百度云及其他网盘下载地址:点我 译序by 侯捷 i 译序by 於春景 iii 目录 v 序言by scott meyers xi 序言by john vlissides xv 前言 xvii 致谢 x ...

  4. 1. 在Mac OS中配置CMake的详细图文教程

    CMake是一个比make更高级的跨平台的安装.编译.配置工具,可以用简单的语句来描述所有平台的安装(编译过程).并根据不同平台.不同的编译器,生成相应的Makefile或者project文件.本文主 ...

  5. Linux系统下word转pdf,xls转pdf,ppt转pdf

    word转换pdf的技术方案,供参考.[doc/docx/ppt/pptx/xls/xlsx均支持转换]           本方案是Java结合shell命令完成,不同于以往的仅依赖java组件转换 ...

  6. BZOJ 2039人员雇佣

    这道题教会我们一个道理靠谁也不如靠自己. 当时学长已经讲了,然而一脸懵逼,好吧,上网搜题解,二脸懵逼,于是自己动手,丰衣足食.自己推! 首先就是建模了,这道题谁与谁之间建模已经十分明了,超级源点,超级 ...

  7. JDK1.8--体验Stream表达式,从一个对象集合中获取每一个对象的某一个值返回新集合

    xl_echo编辑整理,欢迎转载,转载请声明文章来源.更多IT.编程案例.资料请联系QQ:1280023003 百战不败,依不自称常胜,百败不颓,依能奋力前行.——这才是真正的堪称强大!! --- 开 ...

  8. 使用C#调试Windows服务模板项目

    Windows服务是非常强大的应用程序,可用于在backgorund中执行许多不同类型的任务.他们可以在不需要任何用户登录的情况下启动,并且可以使用除登录用户之外的其他用户帐户运行.但是,如果通过遵循 ...

  9. Excel催化剂开源第24波-较VBA更强大的.Net环境的正则表达式

    在VBA上可以调用正则表达式库,从而编写正则表达式自定义函数,这个相信不少VBA开发者已经熟知,但VBA的VBScript正则表达式库毕竟是一个过时的产品,不像.Net那样是与时俱进的,所以两者实现出 ...

  10. nginx目录穿越漏洞复现

    nginx目录穿越漏洞复现 一.漏洞描述 Nginx在配置别名(Alias)的时候,如果忘记加/,将造成一个目录穿越漏洞. 二.漏洞原理 1. 修改nginx.conf,在如下图位置添加如下配置 在如 ...