百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 文章教程 > 正文

实现分页的最简单的方式(附带源码下载)

yund56 2025-03-20 13:52 17 浏览

分页是每个网站并不可少的,但是处理往往非常麻烦,虽然有很多的插件可以使用,但复杂度依然不减,今天我们来手敲一个最简单的实现方式,看够之后分页再也不是难题,而且以后用插件也懂原理了。手动擒来!

文章概略:

  1. 分页的原理

  2. 分层实现

  3. 附赠Git开源代码

我们先来说下原理吧,分页就是数据库的数据太多了,一次性查看不完,分批次查看。一般分页分为从数据库处理分页和在服务器端处理分页两大类。

在数据库分页就是用多少数据jdbc去多少数据,比如取100条数据,则用sql语句查询出100条语句就可以了。在服务器分页就是把数据库所有数据都取到服务器,然后客户要多少数据返回多少数据。一般这种方式io要求很高,而且浪费资源。不建议使用,目前开发都是使用第一种方式,编译好sql语句,在数据库服务器处理分页,而且数据库的服务器一般处理速度很快,利用商用。

分页无非就是服务器返回“总页数”和“当前页数”,然后客户端(一般是浏览器)对应处理。我们分层来写。

服务器可以采用java,或者php,或者asp等编写,返回“总页数”和“当前页数”。浏览器采取想应处理。我们采用javascript和html处理,逻辑判断交给js,页面修饰交给css,使用的时候你可以随时改变,方便快捷。

看下预览图(假设每个页面显示10个页数):css代码:用作美化,你可以改成你喜欢的样式

/*分页*/

/*在div paging中的a标签的属性,很简单的css*/

#paging{

width: 80%;

margin: 20px auto 40px auto;

text-align: center;

color: #666666;

font-size: 1.2em;

font-weight: 700;

}

#paging a{

color: #666666;

font-size: 1.2em;

font-weight: 700;

padding:5px 10px;

}

#paging a:hover{

background-color: #FF464E;

color: #F5F5F5;

}

html代码:

javascritp进行的逻辑判断,就是用来个document.writer,简单吧

备注:我是有的是java编写的,用了ssm框架,而且url是RESTful风格的,你可以改成普通风格的,代码注释很详细,我在这不解释了。

RESTful风格:
http://localhost:8080/youxuan/index/2

普通风格:
http://localhost:8080/youxuan/index?page=2

最终的结果:

总页数小于10页时(共6页),全部显示,访问第1页如下:

总页数大于10,当前页数小于10时,显示前10页,访问第2页如下:

总页数大于10,当前页数大于10时,我们让他显示左右各5页,但是考虑增加5页可能超出总页数。我们增加判断以后结果如下:

当前页+5页没超出总页数,显示当前页左右各5页,访问第10页如下:

当前页+5页超出总页数,显示到最后一页并向前显示10页,访问第20页(最后一页)如下:
实现代码如下:

<script>

/*

分页:接收参数:总页数,当前页数

默认一个页面显示10个页数

可能的情况:

总页数小于10页

全部显示

总页数大于10页

当前页小于10页,显示前10页

当前页大于10页,显示左右各5页

当前页数+5页大于总页数,显示到最后一页

否则显示左右各5页

*/

var path ="${
pageContext.request.contextPath }";//获得当前应用的地址现在是 /youxuan

var url = path+"/index";//a标签的地址

//el表达式取得当前页和总页数

var nowPage=${Paging.nowPage};//当前页

var countPage=${Paging.countPage};//总页数

var count=10;//页面显示多少记录,默认每页显示10个记录

//判断“首页”是否显示

if(nowPage>1){

document.writeln(" 首页");//采用RESTful格式url

}

//总页数小于10页,显示全部页

if(countPage<=count){

for (var i=1;i<=countPage;i++) {

document.writeln(" "+i+"");//采用RESTful格式url

}

}else{

//总页数大于10页

//当前页小于10页,显示前10页

if(nowPage<count){

for (var i=1;i<=count;i++) {

document.writeln(" "+i+"");//采用RESTful格式url

}

//显示省略号和最后一页

document.writeln("..."+countPage+"");

}else{

//当前页数大于等于10页,左右各显示5页

if (nowPage <= countPage) {

//当前页+5大于总页数,显示到最后一页,显示前10页

if (nowPage + 5 >= countPage) {

for (var i = nowPage - 10; i <= countPage; i++) {

document.writeln(" " + i + "");//采用RESTful格式url

}

} else {

//当前页+5小于总页数,左右各显示5页

for (var i = nowPage - 5; i <= nowPage + 5; i++) {

document.writeln(" " + i + "");//采用RESTful格式url

}

//显示省略号和最后一页

document.writeln("..." + countPage + "");

}

}

}

}

//判断尾页是否显示

if(nowPage<countPage){

document.writeln(" 尾页");

}

</script>

最好我们最好加个“跳转到第几页的功能”,如图实现代码:

<script>

//跳转到第几页

function goPage() {

var page= document.getElementById("page").value;

var type = /^[1-9]+$/;

var re = new RegExp(type);

if (page.match(re) == null) {

//输入格式错误

alert("亲,页数一个正整数哦~");

}else {

//判断是否大于总页数

if(page>countPage){

alert("亲,总共只有"+countPage+"页呢~");

}else {

window.location.href=url+"/"+page;

}

}

}

</script>

这个这么简单,就不解释了吧。

最后,我们说一下后台实现,我用的是ssm框架,封装了一个分页的bean,代码如下

package com.youxuan.util;

/**

* Created by 两毛五哥哥 on 2016/8/26.

* 分页工具类

*/

public class Paging {

private int countDate;//总数据

private int countPage;//总页数

private int nowPage;//当前页数

private int pageCount;//每页显示多少数据

/**

* 构造函数

* @param countDate

* @param pageCount

* @param nowPage

*/

public Paging(int countDate,int pageCount,int nowPage){

this.countDate=countDate;

this.pageCount=pageCount;

this.nowPage=nowPage;

if(countDate%pageCount==0){

this.countPage=countDate/pageCount;

}else {

this.countPage=countDate/pageCount+1;

}

}

/**

* 构造函数,默认每页显示100条数据

* @param countDate

* @param nowPage

*/

public Paging(int countDate,int nowPage){

this(countDate,100,nowPage);

}

public int getCountDate() {

return countDate;

}

public void setCountDate(int countDate) {

this.countDate = countDate;

}

public int getCountPage() {

return countPage;

}

public void setCountPage(int countPage) {

this.countPage = countPage;

}

public int getNowPage() {

return nowPage;

}

public void setNowPage(int nowPage) {

this.nowPage = nowPage;

}

public int getPageCount() {

return pageCount;

}

public void setPageCount(int pageCount) {

this.pageCount = pageCount;

}

}

然后再servlet(controller)中返回这个封装的对象。你可以不用封装也行,我觉的这样可移植性好,下次做项目直接拿来用了。这个项目我做完会开源贡献的,喜欢的点个赞吧。

最后:git代码下载地址:
https://git.oschina.net/lovepeng/share-for-you.git

@两毛五哥哥,90逗逼程序员,欢迎骚扰

相关推荐

如何在Office 中编辑 PDF?附详细化步骤

PDF很受欢迎,因为它能在不同的设备和操作系统上仍然保持原有格式。但是,这也意味着直接更改PDF文件比其他格式更难更复杂。值得庆幸的是,Microsoftoffice和UPDF帮你解决这一难题。一...

我的 Windows 装机必备软件清单

今天给大家分享下我的装机必备软件,都是用了好多年的软件神器。靠谱、好用、无广告,Windows电脑必备软件,收藏这一篇就够了!01.浏览器王者:Chromehttps://www.google.c...

Docnet Core 是一个轻量级、高性能的 .NET PDF 操作库

DocnetCore介绍DocnetCore是一个轻量级、高性能的.NETPDF操作库,依托于PDFium渲染引擎,提供强大的PDF文档解析、渲染、操作等功能。它完全支持.NET...

分享三款好用的PDF编辑软件,轻松处理PDF

作为一名需要经常和PDF文件打交道的工作者,我来分享一下几款好用的PDF编辑软件,并详细分析了它们的优缺点,希望能帮你找到合适的工具。1.AdobeAcrobatDC作为PDF格式的发明者,Ado...

PDF文档创建工具软件:novaPDF OEM 11.9 Build 432 for Windows

novaPDFOEM是一款实用高效的软件,从头开始设计,让您尽可能轻松地在应用程序中添加PDF打印功能。换句话说,这个实用程序是专门为应用程序开发人员设计的,可以直接在程序安装程序中集成为PDF打印...

线性表顺序存储结构求集合的并,交,补,差(源代码附上 超详细)

一:算法分析1)用数组A,B,C,E表示集合。假定A={1,3,4,5,6,7,9,10},  B={2,,3,4,7,8,10},E={1,2,3,4,5,6,7,8,9,10},  输入数组A...

分享一套SpringBoot开发博客系统源码,包含完整开发文档和视频

基本信息项目名称:eblog摘要:eblog是一个基于Springboot2.1.2开发的博客学习项目,为了让项目融合更多的知识点,达到学习目的,编写了详细的从0到1开发文档。主要学习包括:自定义Fr...

通达信指标合集〔源码齐全〕

很多朋友问到我哪款指标好用,这里我说一下,之所以有很多不同的指标是因为我们在针对不同的盘面情况的时候使用的指标是不同的,我给到的指标一般来讲就目前的环境来讲都是比较适合的,今天我就把我平时自己常用的指...

巅峰对决!Spring Boot VS .NET 6

SpringBoot和ASP.NETCore都是企业中流行的Web框架,对于喜欢C#的人会使用ASP.NETCore,而对于Java或Kotlin等基于JVM的语...

在asp.net core 中控制访问权限的方法

Intro#由于项目需要,需要在基于asp.netmvc的Web项目框架中做权限的控制,于是才有了这个权限控制组件,最初只是支持netframework,后来dotnetcore2.0...

ASP.NET是否无生存之地?

ASP.NET,这个已经很久的技术,总觉得已经被时代淘汰,我们公司是一个10人小公司,几个十年十五年的项目还是用ASP.NET开发的。这两年由于客户的需求变化,我们公司也顺势开始对这些项目重新开发,改...

Spring Boot + Vue.js 实现前后端分离(附源码)

作者:梁小生0101链接:juejin.im/post/5c622fb5e51d457f9f2c2381SpringBoot+Vue.js前后端涉及基本概念介绍,搭建记录,本文会列举出用到环...

ASP.NET Core 中的 Mapster 使用入门教程

在本文中,我们将学习如何在ASP.NETCore应用程序中使用Mapster。首先,我们将了解Mapster是什么以及如何将其安装到.NETCore应用程序中。然后,我们将在使用...

Asp.net常用方法及request和response-a

asp.net教程asp.net常用方法:1、Request.UrlReferrer请求的来源,可以根据这个判断从百度搜的哪个关键词、防下载盗链、防图片盗链,可以伪造(比如迅雷)。(使用全局一般处理...

ASP.NET Core使用功能开关控制路由访问

前言在前面的文章,我们介绍了使用Middleware有条件地允许访问路由(《ASP.NETCore使用Middleware有条件地允许访问路由》)。而对于一些试验性的功能,我们并不希望用密码去控制是...