java web实现分页查询实例方法
Javaweb分页技术实现
分页技术就是通过SQL语句(如下)来获取数据，具体实现看下面代码
//分页查询语句 select * from 表名 where limit page , count; 和 //获取表中的总数据，确定页数 select count(*) from 表名;
不说废话直接上代码
前端代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" >
</head>
<body>
<div>
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>City_ID</th>
<th>City_EN</th>
<th>City_CN</th>
<th>Country_code</th>
<th>Country_EN</th>
<th>Country_CN</th>
<th>Province_EN</th>
<th>Province_CN</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
<!--分页-->
第<span id="paging">1</span>页/
共<span id="countPage">1</span>页/
<a id="homePage">Home</a>/
<a id="prevPage">Prev</a>/
<a id="nextPage">Next</a>/
转到第：
<input type="text" style="width: 2em" id="pageNum">
页
<a id="goPage">Go</a>
</div>
</div>
</div>
</body>
<script>
$(function () {
//页面初始化 （显示第一页）
selectPage(1);
home();
prev();
next();
goPage();
})
function selectPage(pageCode) {
//分页查询 pageCode：页数
$.ajax("getCity",{
type:"get",
data:{"currenPage":pageCode},
success:function (data) {
$("#tbody").html("");
//总页数
$("#countPage").text(data.totalPage);
$.each(data.pageData,function (index,obj) {
var clazz="";
if(index%2==0){
clazz="success";
}
$("#tbody").append(
"<tr class='"+clazz+"'>\n" +
"<td>"+obj.cityId+"</td>\n" +
"<td>"+obj.cityEn+"</td>\n" +
"<td>"+obj.cityCn+"</td>\n" +
"<td>"+obj.countryCode+"</td>\n" +
"<td>"+obj.countryEn+"</td>\n" +
"<td>"+obj.countryCn+"</td>\n" +
"<td>"+obj.provinceEn+"</td>\n" +
"<td>"+obj.provinceCn+"</td>\n" +
"</tr>"
);
})
}
});
}
//第一页
function home() {
$("#homePage").on("click",function () {
$("#paging").text(1);
selectPage(1);
})
}
//上一页
function prev() {
$("#prevPage").on("click",function () {
var prevText=$("#paging").text();
var prevNum=parseInt(prevText);
prevNum=prevNum-1;
if(prevNum<=1){
selectPage(1);
$("#paging").text(1);
return;
}
$("#paging").text(prevNum);
selectPage(prevNum);
})
}
//下一页
function next() {
$("#nextPage").on("click",function () {
//获取文本的值 页数
var prevText=$("#paging").text();
//类型转换
var prevNum=parseInt(prevText);
//总页数
var countText=$("#countPage").text();
//类型转换
var countNum = parseInt(countText);
//页数加1
prevNum=prevNum+1;
//判断超出了总页码
if(prevNum>=countNum){
selectPage(countNum);
$("#paging").text(countNum);
return;
}
//设置网页增加的值
$("#paging").text(prevNum);
//调用分页查询
selectPage(prevNum);
})
}
//去到几页
function goPage() {
$("#goPage").on("click",function () {
var pageNum=parseInt($("#pageNum").val());
var countPage=parseInt($("#countPage").text())
//判断超出了总页码
if(pageNum>=countPage){
selectPage(countPage);
$("#paging").text(countPage);
$("#pageNum").val(countPage);
return;
}
//判断低于了总页码
if(pageNum<=1){
selectPage(1);
$("#paging").text(1);
$("#pageNum").val(1);
return;
}
selectPage(pageNum);
$("#paging").text(pageNum);
})
}
</script>
</html>
后台servlet代码：
/**
* @author hh
* @Date 2018/9/12
*/
@WebServlet("/getCity")
public class PageServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//获取当前页参数，第一次访问为空
String currPage = req.getParameter("currenPage");
// 判断，如果为空，则设置为1
if (currPage == null || "".equals(currPage.trim())) {
currPage = "1";
}
//调用service返回分页类实例
PageBean<City> pageBean=new PageService().getPage(currPage);
//设置相应文本类型
resp.setContentType("application/json;charset=utf-8");
//响应前端
resp.getWriter().print(new Gson().toJson(pageBean));
}
}
City 实体类：
package edu.nf.demo.entity;
/**
* @author hh
* @Date 2018/9/12
*/
public class City {
private String cityId;
private String cityEn;
private String cityCn;
private String countryCode;
private String countryEn;
private String countryCn;
private String provinceEn;
private String provinceCn;
public String getCityId() {
return cityId;
}
public void setCityId(String cityId) {
this.cityId = cityId;
}
public String getCityEn() {
return cityEn;
}
public void setCityEn(String cityEn) {
this.cityEn = cityEn;
}
public String getCityCn() {
return cityCn;
}
public void setCityCn(String cityCn) {
this.cityCn = cityCn;
}
public String getCountryCode() {
return countryCode;
}
public void setCountryCode(String countryCode) {
this.countryCode = countryCode;
}
public String getCountryEn() {
return countryEn;
}
public void setCountryEn(String countryEn) {
this.countryEn = countryEn;
}
public String getCountryCn() {
return countryCn;
}
public void setCountryCn(String countryCn) {
this.countryCn = countryCn;
}
public String getProvinceEn() {
return provinceEn;
}
public void setProvinceEn(String provinceEn) {
this.provinceEn = provinceEn;
}
public String getProvinceCn() {
return provinceCn;
}
public void setProvinceCn(String provinceCn) {
this.provinceCn = provinceCn;
}
}
自己写的一个类，专门用于分页查询用的：
package edu.nf.demo.entity;
import java.util.List;
/**
* @author hh
* @Date 2018/9/12
*/
public class PageBean<T> {
/**
* 当前页， 默认显示第一页
*/
private Integer currntPage = 1;
/**
* 查询返回的行数（每页显示的行数），默认每页显示10行
*/
private int pageCount = 10;
/**
* 总记录数
*/
private int totalCount;
/**
* 总页数 = 总记录数/每页显示的行数（+1）
*/
private int totalPage;
/**
* 分页查询的数据,运用泛型，可以重复利用
*/
private List<T> pageData;
public int getTotalPage() {
if (totalCount % pageCount == 0) {
totalPage = totalCount / pageCount;
} else {
totalPage = totalCount / pageCount + 1;
}
return totalPage;
}
public void setTotalPage(int totalPage) {
this.totalPage = totalPage;
}
public int getCurrntPage() {
return currntPage;
}
public void setCurrntPage(int currntPage) {
this.currntPage = currntPage;
}
public int getPageCount() {
return pageCount;
}
public void setPageCount(int pageCount) {
this.pageCount = pageCount;
}
public int getTotalCount() {
return totalCount;
}
public void setTotalCount(int totalCount) {
this.totalCount = totalCount;
}
public List<T> getPageData() {
return pageData;
}
public void setPageData(List<T> pageData) {
this.pageData = pageData;
}
}
后台service，逻辑业务层：
/**
* @author hh
* @Date 2018/9/12
*/
public class PageService {
public PageBean getPage(String currPage){
//类型转换 当前页数
Integer currenPage = Integer.valueOf(currPage);
//实例化分页类
PageBean<City> pageBean = new PageBean();
//实例化CityDaoImpl类
CityDaoImpl cityDao=new CityDaoImpl();
//数据库第几行开始查询
int startPage=(currenPage-1)*pageBean.getPageCount();
//查询多少行数据 分页类里默认30行
int selectCount=pageBean.getPageCount();
//查询数据库获取分页返回的数据 : select * from regional_info limit startPage,selectCount
List<City> list=cityDao.listCity(startPage,selectCount);
//获取总数
int cityCount=cityDao.getCityCount();
//设置查询的数据
pageBean.setPageData(list);
//共多少行
pageBean.setTotalCount(cityCount);
//设置总页数
pageBean.setTotalPage(cityCount/pageBean.getPageCount()+1);
return pageBean;
}
}
相关推荐
-
Java Web中常用的分页组件（Java端实现）
前言 好久没写Web程序了,这一段时间看了看原来师弟们做的一些程序,感觉还是有很多不足,一个比较典型的例子就是分页查询的实现,正好借着这个机会简单记录一下. 分析 使用场景 "分页"在Web程序里非常常见,比如我们在页面上经常要展示一些列表信息,通常情况下,如果数据过多,我们在一屏上难以罗列出所有的记录,而且很多时候我们可能只是看看比较Top的一些记录,因此,在这种情况下使用"分页"查询只展示部分数据是比较合适的. 实现原理 从数据库角度上来说,分页查询实现的难度
-
Java web velocity分页宏示例
复制代码 代码如下: #macro(pager $url $pager)<ul class="pagination"> #set($FRONT_LEN = 4) #set($BEHIND_LEN = 5) #set($PAGER_LEN = 10) #set($PAGER_CENTER = $!{pager.pageNum} - $!{BEHIND_LEN}) <li #if($!{pager.currentPage} == 1) class="disabl
-
javaweb分页原理详解
本文实例为大家分享了javaweb分页原理的具体实现代码,供大家参考,具体内容如下 public class Page { private int currentPage; private int totalPage; private int count; private int PageSize; private List<Product> list; private String category; } servlet: package com.learning.web.servlet;
-
JavaWeb中的简单分页完整代码(推荐)
这次主要是讲解一下通过登录后对得到的数据进行分页,首先我们新建一个登录页面login.jsp,因为我们主要学习一下分页,所以登录验证的部分不再阐述,主要代码如下: <form action="pageServlet"> 用户名:<input type="text" name="username"><br> 密 码:<input type="text" name="passwo
-
Java Web 简单的分页显示实例代码
本文通过两个方法:(1)计算总的页数. (2)查询指定页数据,实现简单的分页效果. 思路:首先得在 DAO 对象中提供分页查询的方法,在控制层调用该方法查到指定页的数据,在表示层通过 EL 表达式和 JSTL 将该页数据显示出来. 先给大家展示下效果图: 题外话:该分页显示是用 "表示层-控制层-DAO层-数据库"的设计思想实现的,有什么需要改进的地方大家提出来,共同学习进步.废话不多说了,开始进入主题,详细步骤如下所示: 1.DAO层-数据库 JDBCUtils 类用于打开和关闭数据
-
举例详解用Java实现web分页功能的方法
分页问题是一个非常普遍的问题,开发者几乎都会遇到,这里不讨论具体如何分页,说明一下Web方式下分页的原理.首先是查询获得一个结果集(表现为查询数据库获得的结果),如果结果比较多我们一般都不会一下显示所有的数据,那么就会用分页的方式来显示某些数据(比如20条).因为Http的无状态性,每一次提交都是当作一个新的请求来处理,即使是换页,上一次的结果对下一次是没有影响的. 这里总结三种实现分页的方式,不知道还有没有别的! 1.每次取查询结果的所有数据,然后根据页码显示指定的纪录. 2.根据页面只取一页
-
JavaWeb 简单分页实现代码
JavaWeb 简单分页的实现: 这次主要是讲解一下通过登录后对得到的数据进行分页,首先我们新建一个登录页面login.jsp,因为我们主要学习一下分页,所以登录验证的部分不再阐述,主要代码如下: <form action="pageServlet"> 用户名:<input type="text" name="username"><br> 密 码:<input type="text"
-
java web实现分页查询实例方法
Javaweb分页技术实现 分页技术就是通过SQL语句(如下)来获取数据,具体实现看下面代码 //分页查询语句 select * from 表名 where limit page , count; 和 //获取表中的总数据,确定页数 select count(*) from 表名; 不说废话直接上代码 前端代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title&
-
Java Fluent Mybatis 分页查询与sql日志输出详解流程篇
目录 前言 准备数据 Sql日志配置 官方分页查询 PageHelper分页查询 总结 前言 接着我上一章:Java Fluent Mybatis 项目工程化与常规操作详解流程篇 下 上一章我把项目做了一部分工程化包装,主要还是想要之后的调试能够方便一些.那么这一章接着上一章的内容,做一下查询分页,并且将每次请求所调用的sql语句写在日志里面,便于我们观察定位问题.代码之后还是会上传到github. GitHub代码仓库地址:GitHub仓库 准备数据 简单的准备了一些数据. Sql日志配置 之
-
JAVA代码实现MongoDB动态条件之分页查询
一.使用QueryByExampleExecutor 1. 继承MongoRepository public interface StudentRepository extends MongoRepository<Student, String> { } 2. 代码实现 使用ExampleMatcher匹配器-----只支持字符串的模糊查询,其他类型是完全匹配 Example封装实体类和匹配器 使用QueryByExampleExecutor接口中的findAll方法 public Page&
-
Java Fluent Mybatis 聚合查询与apply方法详解流程篇
前言 接着上一篇文章:Java Fluent Mybatis 分页查询与sql日志输出详解流程篇 我把分页已经调整好了,现在实验一下官方给出的聚合查询方法. GitHub代码仓库:GitHub仓库 数据准备 为了聚合查询的条件,添加了几条数据. MIN 我们试着获取最小的年龄. 方法实现 @Override public Integer getAgeMin() { Map<String, Object> result = testFluentMybatisMapper .findOneMap(
-
新闻列表的分页查询java代码实现
本文实例为大家分享了新闻列表分页查询的java代码,供大家参考,具体内容如下 package com.ibeifeng.test; //创建新闻测试类 public class newTest { private long id; private String title; private String content; private String author; public newTest() { super(); } public newTest(long id, String titl
-
Java精品项目瑞吉外卖之新增菜品与分页查询篇
目录 一. 新增菜品 1.1需求分析 1.2代码开发 API 代码 二. 分类信息分页查询 三. 删除分类 3.1 需求分析 3.2 核心代码 四. 修改分类 一. 新增菜品 1.1需求分析 后台系统可以管理分类信息,分类菜品分类和套餐分类.当我们在后台系统添加菜品时需要选择一个菜品分类. 当我们在后台系统中添加一个套餐时需要选择一个套餐分类,在移动端也会按照菜品分类和套餐分类来展示对应的菜品和套餐. 同时,在后台系统的分类管理页面分别添加菜品分类与套餐分类: 添加菜品分类 添加套餐分类 数据模
-
Java操作MongoDB模糊查询和分页查询
本文实例为大家分享了Java操作MongoDB模糊查询和分页查询,供大家参考,具体内容如下 模糊查询条件: 1.完全匹配 Pattern pattern = Pattern.compile("^name$", Pattern.CASE_INSENSITIVE); 2.右匹配 Pattern pattern = Pattern.compile("^.*name$", Pattern.CASE_INSENSITIVE); 3.左匹配 Pattern pattern =