快捷搜索:  汽车  科技

分页控件源代码:实现分页的最简单的方式

分页控件源代码:实现分页的最简单的方式/*分页*/分页无非就是服务器返回“总页数”和“当前页数”,然后客户端(一般是浏览器)对应处理。我们分层来写。附赠Git开源代码我们先来说下原理吧,分页就是数据库的数据太多了,一次性查看不完,分批次查看。一般分页分为从数据库处理分页和在服务器端处理分页两大类。在数据库分页就是用多少数据jdbc去多少数据,比如取100条数据,则用sql语句查询出100条语句就可以了。在服务器分页就是把数据库所有数据都取到服务器,然后客户要多少数据返回多少数据。一般这种方式io要求很高,而且浪费资源。不建议使用,目前开发都是使用第一种方式,编译好sql语句,在数据库服务器处理分页,而且数据库的服务器一般处理速度很快,利用商用。

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

文章概略:

  1. 分页的原理

  2. 分层实现

  3. 附赠Git开源代码

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

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

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

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;

}

分页控件源代码:实现分页的最简单的方式(1)

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页如下:

分页控件源代码:实现分页的最简单的方式(2)

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

分页控件源代码:实现分页的最简单的方式(3)

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

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

分页控件源代码:实现分页的最简单的方式(4)

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

分页控件源代码:实现分页的最简单的方式(5)

实现代码如下:

<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(" <a href=\"" url "/1\">首页</a>");//采用RESTful格式url

}

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

if(countPage<=count){

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

document.writeln(" <a href=\"" url "/" i "\">" i "</a>");//采用RESTful格式url

}

}else{

//总页数大于10页

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

if(nowPage<count){

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

document.writeln(" <a href=\"" url "/" i "\">" i "</a>");//采用RESTful格式url

}

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

document.writeln("...<a href=\"" url "/" countPage "\">" countPage "</a>");

}else{

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

if (nowPage <= countPage) {

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

if (nowPage 5 >= countPage) {

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

document.writeln(" <a href=\"" url "/" i "\">" i "</a>");//采用RESTful格式url

}

} else {

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

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

document.writeln(" <a href=\"" url "/" i "\">" i "</a>");//采用RESTful格式url

}

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

document.writeln("...<a href=\"" url "/" countPage "\">" countPage "</a>");

}

}

}

}

//判断尾页是否显示

if(nowPage<countPage){

document.writeln(" <a href=\"" url "/" countPage "\">尾页</a>");

}

</script>

分页控件源代码:实现分页的最简单的方式(6)

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

分页控件源代码:实现分页的最简单的方式(7)

实现代码:

到<input type="number" id="page" style="width: 80px;"/>页

<input type="button" onclick="goPage()" value="转到" style="background-color: #6c6c6c;padding: 6px; color: #F5F5F5;border: 0"/>

</div>

<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逗逼程序员,欢迎骚扰

猜您喜欢: