分页特效代码（分页插件原理）

本篇文章给大家谈谈分页特效代码，以及分页插件原理对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、高手进~~~求一段JavaScript分页代码~~能动态控制
• 2、请教大神帮我写一个关于分页的js动画，效果如下：
• 3、织梦主页怎么实现分页效果
• 4、网页设计中如何实现分页的效果
• 5、如何用java实现分页效果（eclipse工具）
• 6、怎样把分页程序做到如此效果？

高手进~~~求一段JavaScript分页代码~~能动态控制

-------------------------------------------------------------------------------------------------------------------------------------

function Pagination(title, resultSet, pageIndex, pageSize, recordCount) {

this.title = title;

this.resultSet = resultSet;

this.pageIndex = 1;

this.pageSize = 10;

this.pages = 0;

var $ = this;

var panel = document.createElement("DIV");

var footer = {

visible:false

};

var header = {

visible:false

};

var dataPanel = {

$:null,

visible:false

};

var emptyPanel = {

$:null,

visible:false

};

var pagePanel = {

$:null,

pager:document.createElement("SPAN"),

firstPage:document.createElement("INPUT"),

lastPage:document.createElement("INPUT"),

previousPage:document.createElement("INPUT"),

forwardPage:document.createElement("INPUT"),

visible:false

};

var commandPanel = {

$:null,

commands:[],

visible:false

};

this.getPanel = function() {

return panel;

};

this.getDataPanel = function() {

return dataPanel;

};

this.getEmptyPanel = function() {

return emptyPanel;

};

this.getCommandPanel = function() {

return commandPanel;

};

this.getFooter = function() {

return footer;

}

dataPanel.init = function() {

var table = document.createElement("TABLE");

table.border = "1";

table.width = "100%";

table.borderColor = "lightblue";

table.style.borderCollapse = "collapse";

table.className = "coll_tab";

var thead = table.createTHead();

var h = thead.insertRow();

for(var i = 0; i $.title.length; i++) {

var th = document.createElement("TH");

th.innerHTML = $.title[i];

h.appendChild(th);

}

this.$ = table;

this.setVisible(false);

}

dataPanel.fillData = function(resultSet, pageIndex, pageSize, recordCount) {

$.pages = 0;

$.resultSet = resultSet;

$.pageIndex = pageIndex;

$.pageSize = pageSize;

if (!resultSet instanceof Array) {

removeDataRows(this.$.rows.length - 1, 1);

alert("数据源类型不匹配，需要Array类型！");

pagePanel.setVisible(false);

emptyPanel.setVisible(true);

commandPanel.setVisible(false);

} else if (resultSet.length = 0) {

pagePanel.setVisible(false);

emptyPanel.setVisible(true);

commandPanel.setVisible(false);

this.removeDataRows(0, this.$.rows.length - 1);

this.setVisible(true);

} else {

$.pages = Math.ceil(recordCount / pageSize);

for (var i = 0; i $.resultSet.length; i++) {

var tr = this.$.tBodies[0].rows(i) ? this.$.tBodies[0].rows(i) : this.$.tBodies[0].insertRow();

for (var j = 0; j $.title.length; j++) {

var td = tr.cells(j) ? tr.cells(j) : tr.insertCell();

td.align = "center";

td.innerHTML = $.resultSet[i][j];

}

}

this.removeDataRows($.resultSet.length, this.$.tBodies[0].rows.length - 1);

this.setVisible(true);

commandPanel.setVisible(true);

emptyPanel.setVisible(false);

pagePanel.setPager("第" + $.pageIndex + "页/共" + $.pages + "页 [" + resultSet.length + "/" + recordCount + "]");

pagePanel.setVisible(recordCount $.pageSize);

}

}

dataPanel.removeDataRows = function(startIndex, endIndex) {

for (var i = endIndex; i = startIndex; i--) {

if (dataPanel.$.tBodies[0].rows(i)) this.$.tBodies[0].deleteRow(i);

}

};

dataPanel.setVisible = function(visible) {

this.$.style.display = visible ? "block" : "none";

}

footer.fillData = function(resultSet) {

if (resultSet.length resultSet.length = 0) return;

$.showFooter(true);

var tfoot = dataPanel.$.tFoot;

for (var i = 0; i resultSet.length; i++) {

var tr = tfoot.rows(i) ? tfoot.rows(i) : tfoot.insertRow();

for (var j = 0; j $.title.length; j++) {

var td = tr.cells(j) ? tr.cells(j) : tr.insertCell();

td.align = "center";

td.innerHTML = resultSet[i][j];

}

}

for (var i = dataPanel.$.tFoot.rows.length - 1; i = resultSet.length; i--) {

dataPanel.$.tFoot.deleteRow(i);

}

}

pagePanel.init = function() {

var div = document.createElement("DIV");

div.className = "pager";

this.firstPage.value = "第一页";

this.previousPage.value = "上一页";

this.forwardPage.value = "下一页";

this.lastPage.value = "最后页";

this.firstPage.type = this.lastPage.type = this.previousPage.type = this.forwardPage.type = "button";

this.firstPage.className = this.lastPage.className = this.previousPage.className = this.forwardPage.className = "button";

this.firstPage.style.margin = this.previousPage.style.margin = this.forwardPage.style.margin = this.lastPage.style.margin = "0 2px";

div.appendChild(this.pager);

div.appendChild(this.firstPage);

div.appendChild(this.lastPage);

div.appendChild(this.previousPage);

div.appendChild(this.forwardPage);

this.$ = div;

this.setVisible(this.visible);

}

pagePanel.setPager = function(pager) {

this.pager.innerHTML = pager;

if ($.pages 1) {

if ($.pageIndex == 1) {

this.firstPage.disabled = this.previousPage.disabled = true;

this.lastPage.disabled = this.forwardPage.disabled = false;

} else if ($.pageIndex 1 $.pageIndex $.pages) {

this.firstPage.disabled = this.previousPage.disabled = this.lastPage.disabled = this.forwardPage.disabled = false;

} else {

this.firstPage.disabled = this.previousPage.disabled = false;

this.lastPage.disabled = this.forwardPage.disabled = true;

}

} else {

this.firstPage.disabled = this.previousPage.disabled = this.lastPage.disabled = this.forwardPage.disabled = true;

}

}

pagePanel.setVisible = function(visible) {

this.$.style.display = visible ? "block" : "none";

}

emptyPanel.init = function() {

var div = document.createElement("DIV");

div.className = "empty";

div.style.display = "none";

div.innerHTML = 'font color="red"暂无数据.../font';

this.$ = div;

this.setVisible(this.visible);

}

emptyPanel.setVisible = function(visible) {

this.$.style.display = visible ? "block" : "none";

}

emptyPanel.reset = function(emptyPanel) {

this.$.innerHTML = "";

this.$.appendChild(emptyPanel);

}

commandPanel.init = function() {

var div = document.createElement("DIV");

div.style.textAlign = "center";

div.style.padding = "5px";

this.$ = div;

this.setVisible(this.visible);

}

commandPanel.addCommand = function(command, cmdText, handler) {

var btnOldCmd = null;

for (var i = 0; i this.commands.length; i++) {

if (this.commands[i].cmd == command) {

btnOldCmd = this.commands[i];

break;

}

}

var btnCmd = document.createElement("INPUT");

btnCmd.cmd = command;

btnCmd.type = "button";

btnCmd.value = cmdText;

btnCmd.className = "rectbutton";

this.commands[i] = btnCmd;

if (btnOldCmd) {

if (btnOldCmd.handler) {

btnOldCmd.detachEvent("onclick", btnOldCmd.handler);

}

btnOldCmd.replaceNode(btnCmd);

} else {

this.$.appendChild(btnCmd);

}

btnCmd.attachEvent("onclick", handler);

btnCmd.handler = handler;

}

commandPanel.setVisible = function(visible) {

this.$.style.display = visible ? "block" : "none";

}

this.attachPaginationEvent = function(property, eventType, handler) {

if (pagePanel[property].handler) {

pagePanel[property].detachEvent(eventType, pagePanel[property].handler);

}

pagePanel[property].attachEvent(eventType, handler);

pagePanel[property].handler = handler;

}

this.showFooter = function(visible) {

if (visible) {

if (!dataPanel.$.tFoot) dataPanel.$.createTFoot();

} else {

if (dataPanel.$.tFoot) dataPanel.$.deleteTFoot();

}

}

this.setRowProperty = function(rowIndex, properties) {

var targetRow = dataPanel.$.tBodies[0].rows(rowIndex);

for (var prop in properties) {

targetRow.setAttribute(prop, properties[prop]);

}

}

this.attachRowEvent = function(rowIndex, eventType, eventHandler) {

var targetRow = dataPanel.$.tBodies[0].rows(rowIndex);

if (targetRow.handler) {

targetRow[eventType] = null;

}

targetRow.handler = eventHandler;

targetRow[eventType] = eventHandler;

}

this.attachCellEvent = function(rowIndex, cellIndex, eventType, eventHandler) {

var targetCell = dataPanel.$.tBodies[0].rows(rowIndex).cells(cellIndex);

if (targetCell.handler) {

targetCell[eventType] = null;

}

targetCell.handler = eventHandler;

targetCell[eventType] = eventHandler;

}

this.setCellProperty = function(rowIndex, cellIndex, property) {

var cell = dataPanel.$.cells(rowIndex, cellIndex);

for (var prop in property) {

cell[prop] = property[prop];

}

}

this.setCellStyle = function(rowIndex, cellIndex, style) {

var cell = dataPanel.$.cells(rowIndex, cellIndex);

for (var prop in style) {

cell.style[prop] = style[prop];

}

}

this.init = function() {

dataPanel.init();

pagePanel.init();

emptyPanel.init();

commandPanel.init();

panel.appendChild(dataPanel.$);

panel.appendChild(pagePanel.$);

panel.appendChild(emptyPanel.$);

panel.appendChild(commandPanel.$);

if (resultSet resultSet.length) dataPanel.fillData(resultSet, pageIndex, pageSize, recordCount);

}();

}

HTML页面

------------------------------------------------------------------------

html

head

meta http-equiv="Content-Type" content="text/html; charset=GBK"

title分页/title

script type="text/javascript" src="Pagination.js"/script

script type="text/javascript"

// 辅助

function $(name) {

return document.getElementsByName(name)[0];

}

function $id(id) {

return document.getElementById(id);

}

function $name(name) {

return document.getElementsByName(name);

}

String.prototype.isEmpty = function() {

return new RegExp(/^\s*$/g).test(this);

};

String.prototype.empty = function() {

return new RegExp(/^\s*$/g).test(this);

};

String.prototype.trim = function() {

return this.replace(new RegExp(/^(\s*)(\S*)(\s*)$/g), "$2");

};

// 分页

var pageIndex = 1; //第几页

window.onload = toPagination;

// 该方法中为从数据库中获得需要数据

function toPagination(){

$id("content").innerHTML="";

var title = []; // 标题

var resultSet = []; // 内容

var pageSize = 2; // 每页显示数

var recordCount = 8; // 总记录条数

resultSet.push([1,'刘德华','女','a href="#"打死他/a']);

resultSet.push([2,'李宇春','？','a href="#"打死他/a']);

var title = ['id', '名称', '性别', '操作'];

toPaginationShow(title, resultSet, pageIndex, pageSize, recordCount);

}

// 由于是在静态页面服务传值，

// 所以 this.pageIndex = 1;

// pageIndex = 1;

// toPagination();

function toPaginationShow(title, resultSet, pageIndex, pageSize, recordCount){

var pagination = new Pagination(title, resultSet, pageIndex, pageSize, recordCount);

pagination.setCellStyle(0, 0, {width:'50%'});

pagination.attachPaginationEvent("firstPage", "onclick", function(){

pageIndex = 1;

this.pageIndex = 1;

toPagination();

});

pagination.attachPaginationEvent("previousPage", "onclick", function(){

pageIndex = (pageIndex - 1 1 ? 1 : pageIndex - 1);

this.pageIndex = (pageIndex - 1 1 ? 1 : pageIndex - 1);

toPagination();

});

pagination.attachPaginationEvent("forwardPage", "onclick", function(){

pageIndex = (pageIndex + 1 pagination.pages ? pagination.pages : pageIndex + 1);

this.pageIndex = (pageIndex + 1 pagination.pages ? pagination.pages : pageIndex + 1);

toPagination();

});

pagination.attachPaginationEvent("lastPage", "onclick", function(){

pageIndex = pagination.pages;

this.pageIndex = pagination.pages;

toPagination();

});

$id("content").appendChild(pagination.getPanel());

}

/script

/head

body

div id="content"/div

/body

/html

请教大神帮我写一个关于分页的js动画，效果如下：

这应该是最简单的实现方式了。你看一下吧，不懂的再回复。

style

*{margin:0px; padding:0px;}

div {width:150px; height:20px; overflow:hidden; position:relative; display:inline-block; margin-top:5px;}

ul {display:inline-block; height:20px; position:absolute; top:0px; left:0px;}

li {width:20px; height:16px; line-height:16px; text-align:center; border:1px solid #ccc; margin-left:3px; float:left; list-style:none;}

.clearfix {both:clear; content:''; display:block;}

.ciearfix {zoom:1;}

/style

    body

        input type="button" value="←"  id="leftBtn" /

        div

            ul id="ul" class="clearfix"

                li1/lili2/lili3/lili4/lili5/lili6/li

                li7/lili8/lili9/lili10/lili11/lili12/li

                li13/lili14/lili15/lili16/lili17/lili18/li

            /ul

        /div

        input type="button" value="→" id="rightBtn" /

    /body

    script

var leftBtn = document.getElementById('leftBtn');

var rightBtn = document.getElementById('rightBtn');

var oUl = document.getElementById('ul');

var moveWidth = 150;

leftBtn.onclick=function(){

if(oUl.offsetLeft == -300)return;

oUl.style.left = oUl.offsetLeft - moveWidth + 'px';

};

rightBtn.onclick=function(){

if(oUl.offsetLeft == 0)return;

oUl.style.left = oUl.offsetLeft + moveWidth + 'px';

};

/script

织梦主页怎么实现分页效果

四种方法：1、调用dedeajax2.js文件 用Ajax 实现

2、在后台创建一个首页栏目，意思是帮首页当成二级栏目弄，你就直接可以写 list调用分页

3、dedecms插件

4、{dede:php}{/dede:php}， 写php代码！

1,2,种方法在百度上搜索一大把，3种方法也是在baidu上搜索（dedecms首页分页插件）4种方法自己写，纯手工 。 建议你用3种方法，加载插件以后，你直接可以在首页 写list了！

网页设计中如何实现分页的效果

1、第"1"页是home的作用，始终有第"1"页，中间用"…"表示未显示的页码;

2、只提供"首页1+5个连续页码+最后一页"页码;开发者应该是考虑一般用户最多连续查看5页的内容。或者就直接跳至最后一页查看所以显示最后一页页码和直接跳至最后一页的快捷按钮;

3、搜索结果首次只提供10个页码;一般用户在这10页内还没找到想要的内容应该会更换搜索内容。脚印图形和下面页码对应都可点击翻页，增加了页面趣味性

4、因为搜索页面用户一般不会回到首页所以页面只有上一页和下一页的快捷按钮

5、点击任何一页码继续浏览，发现后续提供的页码是：当前页+9;便于用户扩大搜索范围放大。

6、花瓣"无限滚动翻页"，当用户浏览到页面底部，自动刷新页面展示新的信息;连续翻过很多页后，当再无内容可以展示时，自动出现关联信息按钮"查看更多信息"，引导用户去浏览其他相关信息;页面过长时提供"回到顶部"按钮。

如何用java实现分页效果（eclipse工具）

package dl.wsxx.base;

public class Pager {

private int totalRows; // 总行数

private int pageSize; // 每页显示的行数

private int currentPage; // 当前页号

private int totalPages; // 总页数

private int startRow; // 当前页在数据库中的起始行

private int pageStartRow; // 当前页开始行

private int pageEndRow; // 当前页结束行

private int hasNextPage; // 下一页存在标识[0:不存在，1:存在]

private int hasPreviousPage; // 前一页存在标识[0:不存在，1:存在]

public Pager() {

}

public Pager(int _totalRows,int _pageSize) {

pageSize = _pageSize;

totalRows = _totalRows;

totalPages = totalRows / pageSize;

int mod = totalRows % pageSize;

if (mod 0) {

totalPages++;

}

currentPage = 1;

startRow = 0;

}

public int getStartRow() {

return startRow;

}

public int getpageStartRow() {

return pageStartRow;

}

public int getpageEndRow() {

return pageEndRow;

}

public int getTotalPages() {

return totalPages;

}

public int getCurrentPage() {

return currentPage;

}

public int getPageSize() {

return pageSize;

}

public int getHasNextPage() {

return hasNextPage;

}

public int getHasPreviousPage() {

return hasPreviousPage;

}

public void setTotalRows(int totalRows) {

this.totalRows = totalRows;

}

public void setStartRow(int startRow) {

this.startRow = startRow;

}

public void setPageStartRow(int pageStartRow) {

this.pageStartRow = pageStartRow;

}

public void setPageEndRow(int pageEndRow) {

this.pageEndRow = pageEndRow;

}

public void setTotalPages(int totalPages) {

this.totalPages = totalPages;

}

public void setCurrentPage(int currentPage) {

this.currentPage = currentPage;

}

public void setPageSize(int pageSize) {

this.pageSize = pageSize;

}

public void setHasNextPage(int hasNextPage) {

this.hasNextPage = hasNextPage;

}

public void setHasPreviousPage(int hasPreviousPage) {

this.hasPreviousPage = hasPreviousPage;

}

public int getTotalRows() {

return totalRows;

}

public void first() {

currentPage = 1;

startRow = 0;

pageStartRow = startRow + 1;

this.hasFlagSet(currentPage, totalPages);

if (this.hasNextPage == 0) {

pageEndRow = totalRows;

} else {

pageEndRow = startRow + pageSize;

}

}

public void previous() {

if (currentPage == 1) {

return;

}

currentPage--;

startRow = (currentPage - 1) * pageSize;

pageStartRow = startRow + 1;

this.hasFlagSet(currentPage, totalPages);

if (this.hasNextPage == 0) {

pageEndRow = totalRows;

} else {

pageEndRow = startRow + pageSize;

}

}

public void next() {

if (currentPage totalPages) {

currentPage++;

}

startRow = (currentPage - 1) * pageSize;

pageStartRow = startRow + 1;

this.hasFlagSet(currentPage, totalPages);

if (this.hasNextPage == 0) {

pageEndRow = totalRows;

} else {

pageEndRow = startRow + pageSize;

}

}

public void last() {

currentPage = totalPages;

startRow = (currentPage - 1) * pageSize;

pageStartRow = startRow + 1;

this.hasFlagSet(currentPage, totalPages);

if (this.hasNextPage == 0) {

pageEndRow = totalRows;

} else {

pageEndRow = startRow + pageSize;

}

}

public void refresh(int _currentPage) {

currentPage = _currentPage;

if (currentPage totalPages) {

last();

}

this.hasFlagSet(currentPage, totalPages);

}

private void hasFlagSet(int currentPage, int totalPages) {

if (currentPage == totalPages) {

if (currentPage == 1) {

this.hasPreviousPage = 0;

this.hasNextPage = 0;

} else {

this.hasPreviousPage = 1;

this.hasNextPage = 0;

}

} else {

if (currentPage == 1) {

this.hasPreviousPage = 0;

this.hasNextPage = 1;

} else {

this.hasPreviousPage = 1;

this.hasNextPage = 1;

}

}

}

}

这是我的工程里的分页核心代码，希望对你有用，还有ssh分页文档，可以参照研究一下。

怎样把分页程序做到如此效果？

title: JSP分页技术实现

summary:使用工具类实现通用分页处理

author: evan_zhao

email: evan_zhao@hotmail.com

目前比较广泛使用的分页方式是将查询结果缓存在HttpSession或有状态bean中，翻页的时候从缓存中取出一页数据显示。这种方法有两个主要的缺点：一是用户可能看到的是过期数据；二是如果数据量非常大时第一次查询遍历结果集会耗费很长时间，并且缓存的数据也会占用大量内存，效率明显下降。

其它常见的方法还有每次翻页都查询一次数据库，从ResultSet中只取出一页数据（使用rs.last();rs.getRow()获得总计录条数，使用rs.absolute()定位到本页起始记录）。这种方式在某些数据库(如oracle)的JDBC实现中差不多也是需要遍历所有记录，实验证明在记录数很大时速度非常慢。

至于缓存结果集ResultSet的方法则完全是一种错误的做法。因为ResultSet在Statement或Connection关闭时也会被关闭，如果要使ResultSet有效势必长时间占用数据库连接。

因此比较好的分页做法应该是每次翻页的时候只从数据库里检索页面大小的块区的数据。这样虽然每次翻页都需要查询数据库，但查询出的记录数很少，网络传输数据量不大，如果使用连接池更可以略过最耗时的建立数据库连接过程。而在数据库端有各种成熟的优化技术用于提高查询速度，比在应用服务器层做缓存有效多了。

在oracle数据库中查询结果的行号使用伪列ROWNUM表示（从1开始）。例如select * from employee where rownum10 返回前10条记录。但因为rownum是在查询之后排序之前赋值的，所以查询employee按birthday排序的第100到120条记录应该这么写：

[pre] select * from (

select my_table.*, rownum as my_rownum from (

select name, birthday from employee order by birthday

) my_table where rownum 120

) where my_rownum=100

[/pre]

mySQL可以使用LIMIT子句：

select name, birthday from employee order by birthday LIMIT 99,20

DB2有rownumber()函数用于获取当前行数。

SQL Server没研究过，可以参考这篇文章：

在Web程序中分页会被频繁使用，但分页的实现细节却是编程过程中比较麻烦的事情。大多分页显示的查询操作都同时需要处理复杂的多重查询条件，sql语句需要动态拼接组成，再加上分页需要的记录定位、总记录条数查询以及查询结果的遍历、封装和显示，程序会变得很复杂并且难以理解。因此需要一些工具类简化分页代码，使程序员专注于业务逻辑部分。下面是我设计的两个工具类：

PagedStatement 封装了数据库连接、总记录数查询、分页查询、结果数据封装和关闭数据库连接等操作，并使用了PreparedStatement支持动态设置参数。

RowSetPage 参考PetStore的page by page iterator模式， 设计RowSetPage用于封装查询结果（使用OracleCachedRowSet缓存查询出的一页数据，关于使用CachedRowSet封装数据库查询结果请参考JSP页面查询显示常用模式）以及当前页码、总记录条数、当前记录数等信息， 并且可以生成简单的HTML分页代码。

PagedStatement 查询的结果封装成RowsetPage。

下面是简单的使用示例：

//DAO查询数据部分代码：

…

public RowSetPage getEmployee(String gender, int pageNo) throws Exception{

String sql="select emp_id, emp_code, user_name, real_name from employee where gender =?";

//使用Oracle数据库的分页查询实现,每页显示5条

PagedStatement pst =new PagedStatementOracleImpl(sql, pageNo, 5);

pst.setString(1, gender);

return pst.executeQuery();

}

//Servlet处理查询请求部分代码：

…

int pageNo;

try{

//可以通过参数pageno获得用户选择的页码

pageNo = Integer.parseInt(request.getParameter("pageno") );

}catch(Exception ex){

//默认为第一页

pageNo=1;

}

String gender = request.getParameter("gender" );

request.setAttribute("empPage", myBean.getEmployee(gender, pageNo) );

…

//JSP显示部分代码

%@ page import = "page.RowSetPage"%

…

script language="javascript"

function doQuery(){

form1.actionType.value="doQuery";

form1.submit();

}

/script

…

form name=form1 method=get

input type=hidden name=actionType

性别：

input type=text name=gender size=1 value="%=request.getParameter("gender")%"

input type=button value=" 查询 " onclick="doQuery()"

%

RowSetPage empPage = (RowSetPage)request.getAttribute("empPage");

if (empPage == null ) empPage = RowSetPage.EMPTY_PAGE;

%

…

table cellspacing="0" width="90%"

tr tdID/td td代码/td td用户名/td td姓名/td /tr

%

javax.sql.RowSet empRS = (javax.sql.RowSet) empPage.getRowSet();

if (empRS!=null) while (empRS.next() ) {

%

tr

td%= empRS.getString("EMP_ID")%/td

td%= empRS.getString("EMP_CODE")%/td

td%= empRS.getString("USER_NAME")%/td

td%= empRS.getString("REAL_NAME")%/td

/tr

%

}// end while

%

tr

%

//显示总页数和当前页数(pageno)以及分页代码。

//此处doQuery为页面上提交查询动作的javascript函数名， pageno为标识当前页码的参数名

%

td colspan=4%= empPage .getHTML("doQuery", "pageno")%/td

/tr

/table

/form

效果如图：

因为分页显示一般都会伴有查询条件和查询动作，页面应已经有校验查询条件和提交查询的javascript方法（如上面的doQuery），所以RowSetPage.getHTML()生成的分页代码在用户选择新页码时直接回调前面的处理提交查询的javascript方法。注意在显示查询结果的时候上次的查询条件也需要保持，如input type=text name=gender size=1 value="%=request.getParameter("gender")%"。同时由于页码的参数名可以指定，因此也支持在同一页面中有多个分页区。

另一种分页代码实现是生成每一页的URL，将查询参数和页码作为QueryString附在URL后面。这种方法的缺陷是在查询条件比较复杂时难以处理，并且需要指定处理查询动作的servlet，可能不适合某些定制的查询操作。

如果对RowSetPage.getHTML()生成的默认分页代码不满意可以编写自己的分页处理代码，RowSetPage提供了很多getter方法用于获取相关信息（如当前页码、总页数、 总记录数和当前记录数等）。

在实际应用中可以将分页查询和显示做成jsp taglib， 进一步简化JSP代码，屏蔽Java Code。

附：分页工具类的源代码， 有注释，应该很容易理解。

1.Page.java

2.RowSetPage.java(RowSetPage继承Page)

3.PagedStatement.java

4.PagedStatementOracleImpl.java(PagedStatementOracleImpl继承PagedStatement)

您可以任意使用这些源代码，但必须保留author evan_zhao@hotmail.com字样

///////////////////////////////////

//

// Page.java

// author: evan_zhao@hotmail.com

//

///////////////////////////////////

package page;

import java.util.List;

import java.util.ArrayList;

import java.util.Collection;

import java.util.Collections;

/**

* Title: 分页对象br

* Description: 用于包含数据及分页信息的对象br

* Page类实现了用于显示分页信息的基本方法，但未指定所含数据的类型，

* 可根据需要实现以特定方式组织数据的子类，br

* 如RowSetPage以RowSet封装数据，ListPage以List封装数据br

* Copyright: Copyright (c) 2002 br

* @author evan_zhao@hotmail.com br

* @version 1.0

*/

public class Page implements java.io.Serializable {

public static final Page EMPTY_PAGE = new Page();

public static final int DEFAULT_PAGE_SIZE = 20;

public static final int MAX_PAGE_SIZE = 9999;

private int myPageSize = DEFAULT_PAGE_SIZE;

private int start;

private int avaCount,totalSize;

private Object data;

private int currentPageno;

private int totalPageCount;

/**

* 默认构造方法，只构造空页

*/

protected Page(){

this.init(0,0,0,DEFAULT_PAGE_SIZE,new Object());

}

/**

* 分页数据初始方法，由子类调用

* @param start 本页数据在数据库中的起始位置

* @param avaCount 本页包含的数据条数

* @param totalSize 数据库中总记录条数

* @param pageSize 本页容量

* @param data 本页包含的数据

*/

protected void init(int start, int avaCount, int totalSize, int pageSize, Object data){

this.avaCount =avaCount;

this.myPageSize = pageSize;

this.start = start;

this.totalSize = totalSize;

this.data=data;

//System.out.println("avaCount:"+avaCount);

//System.out.println("totalSize:"+totalSize);

if (avaCounttotalSize) {

//throw new RuntimeException("记录条数大于总条数？！");

}

this.currentPageno = (start -1)/pageSize +1;

this.totalPageCount = (totalSize + pageSize -1) / pageSize;

if (totalSize==0 avaCount==0){

this.currentPageno = 1;

this.totalPageCount = 1;

}

//System.out.println("Start Index to Page No: " + start + "-" + currentPageno);

}

public Object getData(){

return this.data;

}

/**

* 取本页数据容量（本页能包含的记录数）

* @return 本页能包含的记录数

*/

public int getPageSize(){

return this.myPageSize;

}

/**

* 是否有下一页

* @return 是否有下一页

*/

public boolean hasNextPage() {

/*

if (avaCount==0 totalSize==0){

return false;

}

return (start + avaCount -1) totalSize;

*/

return (this.getCurrentPageNo()this.getTotalPageCount());

}

/**

* 是否有上一页

* @return 是否有上一页

*/

public boolean hasPreviousPage() {

/*

return start 1;

*/

return (this.getCurrentPageNo()1);

}

/**

* 获取当前页第一条数据在数据库中的位置

* @return

*/

public int getStart(){

return start;

}

/**

* 获取当前页最后一条数据在数据库中的位置

* @return

*/

public int getEnd(){

int end = this.getStart() + this.getSize() -1;

if (end0) {

end = 0;

}

return end;

}

/**

* 获取上一页第一条数据在数据库中的位置

* @return 记录对应的rownum

*/

public int getStartOfPreviousPage() {

return Math.max(start-myPageSize, 1);

}

/**

* 获取下一页第一条数据在数据库中的位置

* @return 记录对应的rownum

*/

public int getStartOfNextPage() {

return start + avaCount;

}

/**

* 获取任一页第一条数据在数据库中的位置，每页条数使用默认值

* @param pageNo 页号

* @return 记录对应的rownum

*/

public static int getStartOfAnyPage(int pageNo){

return getStartOfAnyPage(pageNo, DEFAULT_PAGE_SIZE);

}

/**

* 获取任一页第一条数据在数据库中的位置

* @param pageNo 页号

* @param pageSize 每页包含的记录数

* @return 记录对应的rownum

*/

public static int getStartOfAnyPage(int pageNo, int pageSize){

int startIndex = (pageNo-1) * pageSize + 1;

if ( startIndex 1) startIndex = 1;

//System.out.println("Page No to Start Index: " + pageNo + "-" + startIndex);

return startIndex;

}

/**

* 取本页包含的记录数

* @return 本页包含的记录数

*/

public int getSize() {

return avaCount;

}

/**

* 取数据库中包含的总记录数

* @return 数据库中包含的总记录数

*/

public int getTotalSize() {

return this.totalSize;

}

/**

* 取当前页码

* @return 当前页码

*/

public int getCurrentPageNo(){

return this.currentPageno;

}

/**

* 取总页码

* @return 总页码

*/

public int getTotalPageCount(){

return this.totalPageCount;

}

/**

*

* @param queryJSFunctionName 实现分页的JS脚本名字，页码变动时会自动回调该方法

* @param pageNoParamName 页码参数名称

* @return

*/

public String getHTML(String queryJSFunctionName, String pageNoParamName){

if (getTotalPageCount()1){

return "input type='hidden' name='"+pageNoParamName+"' value='1' ";

}

if (queryJSFunctionName == null || queryJSFunctionName.trim().length()1) {

queryJSFunctionName = "gotoPage";

}

if (pageNoParamName == null || pageNoParamName.trim().length()1){

pageNoParamName = "pageno";

}

String gotoPage = "_"+queryJSFunctionName;

StringBuffer html = new StringBuffer("\n");

html.append("script language=\"Javascript1.2\"\n")

.append("function ").append(gotoPage).append("(pageNo){ \n")

.append( " var curPage=1; \n")

.append( " try{ curPage = document.all[\"")

.append(pageNoParamName).append("\"].value; \n")

.append( " document.all[\"").append(pageNoParamName)

.append("\"].value = pageNo; \n")

.append( " ").append(queryJSFunctionName).append("(pageNo); \n")

.append( " return true; \n")

.append( " }catch(e){ \n")

// .append( " try{ \n")

// .append( " document.forms[0].submit(); \n")

// .append( " }catch(e){ \n")

.append( " alert('尚未定义查询方法：function ")

.append(queryJSFunctionName).append("()'); \n")

.append( " document.all[\"").append(pageNoParamName)

.append("\"].value = curPage; \n")

.append( " return false; \n")

// .append( " } \n")

.append( " } \n")

.append( "}")

.append( "/script \n")

.append( "");

html.append( "table border=0 cellspacing=0 cellpadding=0 align=center width=80% \n")

.append( " tr \n")

.append( " td align=leftbr \n");

html.append( " 共" ).append( getTotalPageCount() ).append( "页")

.append( " [") .append(getStart()).append("..").append(getEnd())

.append("/").append(this.getTotalSize()).append("] \n")

.append( " /td \n")

.append( " td align=right \n");

if (hasPreviousPage()){

html.append( "[a href='javascript:").append(gotoPage)

.append("(") .append(getCurrentPageNo()-1)

.append( ")'上一页/a] \n");

}

html.append( " 第")

.append( " select name='")

.append(pageNoParamName).append("' onChange='javascript:")

.append(gotoPage).append("(this.value)'\n");

String selected = "selected";

for(int i=1;i=getTotalPageCount();i++){

if( i == getCurrentPageNo() )

selected = "selected";

else selected = "";

html.append( " option value='").append(i).append("' ")

.append(selected).append("").append(i).append("/option \n");

}

if (getCurrentPageNo()getTotalPageCount()){

html.append( " option value='").append(getCurrentPageNo())

.append("' selected").append(getCurrentPageNo())

.append("/option \n");

}

html.append( " /select页 \n");

if (hasNextPage()){

html.append( " [a href='javascript:").append(gotoPage)

.append("(").append((getCurrentPageNo()+1))

.append( ")'下一页/a] \n");

}

html.append( "/td/tr/table \n");

return html.toString();

}

}

///////////////////////////////////

//

// RowSetPage.java

// author: evan_zhao@hotmail.com

//

///////////////////////////////////

package page;

import javax.sql.RowSet;

/**

* pTitle: RowSetPage/p

* pDescription: 使用RowSet封装数据的分页对象/p

* pCopyright: Copyright (c) 2003/p

* @author evan_zhao@hotmail.com

* @version 1.0

*/

public class RowSetPage extends Page {

private javax.sql.RowSet rs;

/**

*空页

*/

public static final RowSetPage EMPTY_PAGE = new RowSetPage();

/**

*默认构造方法，创建空页

*/

public RowSetPage(){

this(null, 0,0);

}

/**

*构造分页对象

*@param crs 包含一页数据的OracleCachedRowSet

*@param start 该页数据在数据库中的起始位置

*@param totalSize 数据库中包含的记录总数

*/

public RowSetPage(RowSet crs, int start, int totalSize) {

this(crs,start,totalSize,Page.DEFAULT_PAGE_SIZE);

}

/**

*构造分页对象

*@param crs 包含一页数据的OracleCachedRowSet

*@param start 该页数据在数据库中的起始位置

*@param totalSize 数据库中包含的记录总数

*@pageSize 本页能容纳的记录数

*/

public RowSetPage(RowSet crs, int start, int totalSize, int pageSize) {

try{

int avaCount=0;

if (crs!=null) {

crs.beforeFirst();

if (crs.next()){

crs.last();

avaCount = crs.getRow();

}

crs.beforeFirst();

}

rs = crs;

super.init(start,avaCount,totalSize,pageSize,rs);

}catch(java.sql.SQLException sqle){

throw new RuntimeException(sqle.toString());

}

}

/**

*取分页对象中的记录数据

*/

public javax.sql.RowSet getRowSet(){

return rs;

}

}

///////////////////////////////////

//

// PagedStatement.java

// author: evan_zhao@hotmail.com

//

///////////////////////////////////

package page;

import foo.DBUtil;

import java.math.BigDecimal;

import java.util.List;

import java.util.Iterator;

import java.util.Collections;

import java.sql.Connection;

import java.sql.SQLException;

import java.sql.ResultSet;

import java.sql.Statement;

import java.sql.PreparedStatement;

import java.sql.Timestamp;

import javax.sql.RowSet;

/**

* pTitle: 分页查询/p

* pDescription: 根据查询语句和页码查询出当页数据/p

* pCopyright: Copyright (c) 2002/p

* @author evan_zhao@hotmail.com

* @version 1.0

*/

public abstract class PagedStatement {

public final static int MAX_PAGE_SIZE = Page.MAX_PAGE_SIZE;

protected String countSQL, querySQL;

protected int pageNo,pageSize,startIndex,totalCount;

protected javax.sql.RowSet rowSet;

protected RowSetPage rowSetPage;

private List boundParams;

/**

* 构造一查询出所有数据的PageStatement

* @param sql query sql

*/

public PagedStatement(String sql){

this(sql,1,MAX_PAGE_SIZE);

}

/**

* 构造一查询出当页数据的PageStatement

* @param sql query sql

* @param pageNo 页码

*/

public PagedStatement(String sql, int pageNo){

this(sql, pageNo, Page.DEFAULT_PAGE_SIZE);

}

/**

* 构造一查询出当页数据的PageStatement，并指定每页显示记录条数

* @param sql query sql

* @param pageNo 页码

* @param pageSize 每页容量

*/

public PagedStatement(String sql, int pageNo, int pageSize){

this.pageNo = pageNo;

this.pageSize = pageSize;

this.startIndex = Page.getStartOfAnyPage(pageNo, pageSize);

this.boundParams = Collections.synchronizedList(new java.util.LinkedList());

this.countSQL = "select count(*) from ( " + sql +") ";

this.querySQL = intiQuerySQL(sql, this.startIndex, pageSize);

}

/**

*生成查询一页数据的sql语句

*@param sql 原查询语句

*@startIndex 开始记录位置

*@size 需要获取的记录数

*/

protected abstract String intiQuerySQL(String sql, int startIndex, int size);

/**

*使用给出的对象设置指定参数的值

*@param index 第一个参数为1，第二个为2

分页特效代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于分页插件原理、分页特效代码的信息别忘了在本站进行查找喔。