js的分页原理以及实现步骤是什么？

2023-04-13 01:26:02JavaScript022

js的分页原理以及实现步骤是什么？,第1张

主要是借鉴了网上一个例子，修改了一些小地方，前端分页的技巧，表格的数据是已经写好了，可以前端渲染表格然后再分页，都是可以的。

其实分页最关键是这两句：

var startRow = (currentPage - 1) * pageSize+1 //currentPage 为当前页，pageSize为每页显示的数据量

var endRow = currentPage * pageSize

找到我们需要显示的行的范围（starRow~endRow）

ps:这里在跳转的时候遇到了一个小BUG，就是获取到的select的value值是string类型的，比如获取到了1，然后你想再加1的时候就会变成"11" 而不是我们想要的"2"，所以这里需要用parseInt( )来转换一下，小细节需要注意呀！！！

效果图：

[javascript] view plain copy print?

<!doctype html>

<html>

<head>

text-decoration: none

}

.table2{

border:#C8C8C8 solid

border-width:1px 0px 0px 1px

background: #F3F0F0

margin-top:25px

}

.td0{

border:#C8C8C8 solid

border-width:0 0 1px 0

}

.td2{

border:#C8C8C8 solid

border-width:0 1px 1px 0

}

.barcon {

width: 1000px

margin: 0 auto

text-align: center

}

.barcon1 {

font-size: 17px

float: left

margin-top: 20px

}

.barcon2 {

float: right

}

.barcon2 ul {

margin: 20px 0

padding-left: 0

list-style: none

text-align: center

}

.barcon2 li {

display: inline

}

.barcon2 a {

font-size: 16px

font-weight: normal

display: inline-block

padding: 5px

padding-top: 0

color: black

border: 1px solid #ddd

background-color: #fff

}

.barcon2 a:hover{

background-color: #eee

}

.ban {

opacity: .4

}

</style>

</head>

<body>

<thead>

<tr>

</tr>

</tr>

</thead>

<td class="td2" >admin</td>

</tr>

</tbody>

</table>

<ul>

</select></li>

</ul>

</div>

/*动态生成用户函数

num为生成的用户数量

function dynamicAddUser(num){

for(var i=1i<=numi++)

{

var trNode=document.createElement("tr")

$(trNode).attr("align","center")

//序号

var tdNodeNum=document.createElement("td")

$(tdNodeNum).html(i+1)

tdNodeNum.style.width = "150px"

tdNodeNum.style.height = "33px"

tdNodeNum.className = "td2"

//用户名

var tdNodeName=document.createElement("td")

$(tdNodeName).html("lzj"+i)

tdNodeName.style.width = "300px"

tdNodeName.className = "td2"

//权限

var tdNodePri=document.createElement("td")

tdNodePri.style.width = "250px"

tdNodePri.className = "td2"

var priText=document.createElement("span")

$(priText).css({"display":"inline-block","text-align":"center"})

$(priText).text("普通用户")

tdNodePri.appendChild(priText)

//操作

var tdNodeOper = document.createElement("td")

tdNodeOper.style.width = "170px"

tdNodeOper.className = "td2"

var editA = document.createElement("a")

$(editA).attr("href", "###").text("编辑")

$(editA).css({ display: "inline-block" })

tdNodeOper.appendChild(editA)

trNode.appendChild(tdNodeNum)

trNode.appendChild(tdNodeName)

trNode.appendChild(tdNodePri)

trNode.appendChild(tdNodeOper)

$("#adminTbody")[0].appendChild(trNode)

}

$(function(){

dynamicAddUser(80)

goPage(1,10)

var tempOption=""

for(var i=1i<=totalPagei++)

{

tempOption+='<option value='+i+'>'+i+'</option>'

}

$("#jumpWhere").html(tempOption)

})

/**

* 分页函数

* pno--页数

* psize--每页显示记录数

* 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数

* 纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能

**/

var pageSize=0//每页显示行数

var currentPage_=1//当前页全局变量，用于跳转时判断是否在相同页，在就不跳，否则跳转。

var totalPage//总页数

function goPage(pno,psize){

var itable = document.getElementById("adminTbody")

var num = itable.rows.length//表格所有行数(所有记录数)

pageSize = psize//每页显示行数

//总共分几页

if(num/pageSize > parseInt(num/pageSize)){

totalPage=parseInt(num/pageSize)+1

}else{

totalPage=parseInt(num/pageSize)

}

var currentPage = pno//当前页数

currentPage_=currentPage

var startRow = (currentPage - 1) * pageSize+1

var endRow = currentPage * pageSize

endRow = (endRow > num)? num : endRow

//遍历显示数据实现分页

/*for(var i=1i<(num+1)i++){

var irow = itable.rows[i-1]

if(i>=startRow && i<=endRow){

irow.style.display = ""

}else{

irow.style.display = "none"

}

}*/

$("#adminTbody tr").hide()

for(var i=startRow-1i<endRowi++)

{

$("#adminTbody tr").eq(i).show()

}

var tempStr = "共"+num+"条记录分"+totalPage+"页当前第"+currentPage+"页"

document.getElementById("barcon1").innerHTML = tempStr

if(currentPage>1){

$("#firstPage").on("click",function(){

goPage(1,psize)

}).removeClass("ban")

$("#prePage").on("click",function(){

goPage(currentPage-1,psize)

}).removeClass("ban")

}else{

$("#firstPage").off("click").addClass("ban")

$("#prePage").off("click").addClass("ban")

}

if(currentPage<totalPage){

$("#nextPage").on("click",function(){

goPage(currentPage+1,psize)

}).removeClass("ban")

$("#lastPage").on("click",function(){

goPage(totalPage,psize)

}).removeClass("ban")

}else{

$("#nextPage").off("click").addClass("ban")

$("#lastPage").off("click").addClass("ban")

}

$("#jumpWhere").val(currentPage)

}

function jumpPage()

{

var num=parseInt($("#jumpWhere").val())

if(num!=currentPage_)

{

goPage(num,pageSize)

}

</script>

</body>

</html>

纯js实现分页方法一：

废话不多说，直接上代码了！

注：本项目是全程使用js来写的，前台的数据通过ajax进行获取，然后再进行拼装，动态加载到页面。

1.先把上一页，下一页等的代码附上(里面的值都是伪值，下面会在js里进行重新赋值的！)

</li>

</li>

</li>

</li>

<span id="span_number">共13855页到第<input type="text" id="input_number" class="page-txtbox" />页

</span>

</li>

</ul>

2.首先在页面放两个隐藏域，一个是当前页码，一个是总页码，总页码是页面加载完，从后台查询出来后直接附上值的，当前页码是没操作一个，就要对当前页码赋值

3.写一个页面加载完的function，给总页码和当前页码赋值

$(function(){

$('#jiazai').val(1)//给当前页码进行赋值，默认为第一页

ajaxfunction(page,arg,chipssort,'')//这个方法是抽取的ajax后台访问的方法

})

4.抽取的ajax方法，此页面会用到好几次这个方法，所有把它收取了出来，因为页面的数据时通过ajax从后台获取到的，后台返回的是一个List集合

//抽取ajax的方法

function ajaxfunction(page,arg,chipssort,fontval){

$.ajax({

type:'POST',

url:'/admin/receptionchips/showlist',//请求的url地址

data:{

page:page,

sort:arg,

chipssort:chipssort,

fontval:fontval

dataType:'json',

contentType:'application/x-www-form-urlencodedcharset=utf-8',

success:function(data){

//返回值在进行访问抽取的方法，从后台返回

commonfunction(data)

}

})

}

5.代码看到这也不是很多，最后一个了

//抽取拼串的方法

function commonfunction(data){

$('#projectlist').find("li").remove()

for (var i=0i<data.lengthi++ )

{

/*****因为此页面是动态加载的，这里主要就是进行拼串，代码也不少，就不漏出来占空间了*****/<br>

}<br>//开始是分页的核心了

if(data.length>0){

//设置页码

var pading = data[0].padingnum//总页码

$('#totalpage').val(pading)

var page = $('#jiazai').val()//当前页

$('#countpage').html("<b id='currentPageNo'>"+page+"</b>/"+pading+"")

$('#span_number').html("共"+pading+"页到第<input type='text' id='input_number' class='page-txtbox' />页<input name='' value='确定' type='button' onclick='indexpage(-2)'/goods/ajaxqueryGoodsList.do.html','','goodsListContainer','"+pading+"', listPageCallback)' class='page-btn'/>")

}else{

$('#countpage').html("<b id='currentPageNo'>"+0+"</b>/"+0+"")

}

//设置分页的底部就是首页 1 2 3 4 5 6 尾页

var pading = data[0].padingnum//总页码href="javascript:void(0)"

var nowpage = $('#jiazai').val()//当前页

//one two three five fore<br>//下面代码看着是比较麻烦，但是也不难理解全是一样的代码，只不过是加了些判断

if(nowpage<5 ){

$('#one').text(1)

$('#one').attr('href','javascript:pagenum("'+1+'")')

$('#two').text(2)

$('#two').attr('href','javascript:pagenum("'+(2)+'")')

$('#three').text(3)

$('#three').attr('href','javascript:pagenum("'+(3)+'")')

$('#five').text(4)

$('#five').attr('href','javascript:pagenum("'+(4)+'")')

$('#fore').text(5)

$('#fore').attr('href','javascript:pagenum("'+(5)+'")')

$('#five').parent().show()

$('#fore').parent().show()

}else{

//alert("已经不是第五页了")

//设置中间的为当前页

$('#one').text(Number(nowpage)-2)

$('#one').attr('href','javascript:indexpage("'+(Number(nowpage)-2)+'")')

$('#two').text(Number(nowpage)-1)

$('#two').attr('href','javascript:indexpage("'+(Number(nowpage)-1)+'")')

$('#three').text(nowpage)

$('#three').attr('href','javascript:indexpage("'+(nowpage)+'")')

$('#five').parent().show()

$('#fore').parent().show()

//判断下一页是否超过了总页数

if(Number(nowpage)+1>pading){

$('#five').parent().hide()

$('#fore').parent().hide()

}else{

$('#five').parent().show()

$('#five').text(Number(nowpage)+1)

$('#five').attr('href','javascript:indexpage("'+(Number(nowpage)+1)+'")')

}

//判断下一页的第二页是否超过了总页数

if(Number(nowpage)+2>pading){

$('#fore').parent().hide()

}else{

$('#fore').parent().show()

$('#fore').text(Number(nowpage)+2)

$('#fore').attr('href','javascript:indexpage("'+(Number(nowpage)+2)+'")')

}

//如果总页数小于5，这块代码主要就是设置 1 2 3 4 5 这些的显示和隐藏的

if(pading==0){

$('#one').parent().hide()

$('#two').parent().hide()

$('#three').parent().hide()

$('#five').parent().hide()

$('#fore').parent().hide()

}else if(pading==1){

$('#shouye').hide()

$('#weiye').hide()

$('#one').parent().hide()

$('#two').parent().hide()

$('#three').parent().hide()

$('#five').parent().hide()

$('#fore').parent().hide()

}else if(pading==2){

$('#one').parent().show()

$('#two').parent().show()

$('#three').parent().hide()

$('#five').parent().hide()

$('#fore').parent().hide()

}else if(pading==3){

$('#one').parent().show()

$('#two').parent().show()

$('#three').parent().show()

$('#five').parent().hide()

$('#fore').parent().hide()

}else if(pading==4){

$('#one').parent().show()

$('#two').parent().show()

$('#three').parent().show()

$('#five').parent().show()

$('#fore').parent().hide()

}else{

$('#one').parent().show()

$('#two').parent().show()

$('#three').parent().show()

$('#five').parent().show()

$('#fore').parent().show()

}

//设置高亮显示的，就是是第一页时，1亮，第二页时 2亮

$('#page a').each(function() {

$(this).parent().removeClass("current")

if($(this).text()==nowpage){

$(this).parent().addClass("current")

}

})

//分页完返回页面顶端

$("html,body").animate({scrollTop:0}, 500)

//最后，给当前页码加1

$('#jiazai').val(Number(bianlaing)+Number(1))

}

纯js实现分页方法二：

function goPage(pno,psize){

var itable = document.getElementById("idData")

var num = itable.rows.length//表格行数

var totalPage = 0//总页数

var pageSize = psize//每页显示行数

if((num-1)/pageSize >parseInt((num-1)/pageSize)){

totalPage=parseInt((num-1)/pageSize)+1

}else{

totalPage=parseInt((num-1)/pageSize)

}

var currentPage = pno//当前页数

var startRow = (currentPage - 1) * pageSize+1//开始显示的行

var endRow = currentPage * pageSize+1//结束显示的行

endRow = (endRow >num)? num : endRow

//前三行始终显示

for(i=0i<1i++){

var irow = itable.rows[i]

irow.style.display = "block"

}

for(var i=1i<numi++){

var irow = itable.rows[i]

if(i>=startRow&&i<endRow){

irow.style.display = "block"

}else{

irow.style.display = "none"

}

var pageEnd = document.getElementById("pageEnd")

var tempStr = ""

if(currentPage>1){

tempStr += "<a href="/" mce_href="/""#/" onmouseout='MM_swapImgRestore()' onmouseover=/"MM_swapImage('Image69','','images/back_buttom01_dowm.jpg',1)/" onClick=/"goPage("+(currentPage-1)+","+psize+")/"><img src="/" mce_src="/""images/back_buttom01.jpg/" name='Image69' width='38' height='15' border='0' id='Image69' /></a>"

}else{

tempStr += "<a href="/" mce_href="/""#/" onmouseout='MM_swapImgRestore()' onmouseover=/"MM_swapImage('Image69','','images/back_buttom01_dowm.jpg',1)/"><img src="/" mce_src="/""images/back_buttom01.jpg/" name='Image69' width='38' height='15' border='0' id='Image69' /></a>"

}

for (var i = 1i <= totalPagei++) {

if (i == currentPage) {

tempStr += i+" "

} else {

tempStr += "<a href="/" mce_href="/""#/" onClick=/"goPage("+(i)+","+psize+")/">"+i+"</a>"

}

if(currentPage<totalPage){

tempStr += "<a href="/" mce_href="/""#/" onmouseout=/"MM_swapImgRestore()/" onmouseover=/"MM_swapImage('Image68','','images/next_buttom01_dowm.jpg',1)/" onClick=/"goPage("+(currentPage+1)+","+psize+")/"><img src="/" mce_src="/""images/next_buttom01.jpg/" name='Image68' width='38' height='15' border='0' id='Image68' /></a>"

}else{

tempStr += "<a href="/" mce_href="/""#/" onmouseout=/"MM_swapImgRestore()/" onmouseover=/"MM_swapImage('Image68','','images/next_buttom01_dowm.jpg',1)/"><img src="/" mce_src="/""images/next_buttom01.jpg/" name='Image68' width='38' height='15' border='0' id='Image68' /></a>"

}

tempStr +="<a href="/" mce_href="/""#top/" onmouseout=/"MM_swapImgRestore()/" onmouseover=/"MM_swapImage('Image20','','images/top_buttom01_dowm.jpg',1)/"><img src="/" mce_src="/""images/top_buttom01.jpg/" name='Image20' width='38' height='15' border='0' id='Image20' /></a>"

document.getElementById("barcon").innerHTML = tempStr

}

var base='<%=base%>'

window.onload = function(){

goPage(1,10)

}

温馨提示：js代码中上一页下一页定义的图片根据自己需求可以改的

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 rownum<10 返回前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没研究过，可以参考这篇文章：http://www.csdn.net/develop/article/18/18627.shtm

在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"%>

…

function doQuery(){

form1.actionType.value="doQuery"

form1.submit()

}

</script>

…

性别：

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

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

…

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

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

<tr>

</tr>

}// end while

<tr>

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

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

</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>

* @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 (avaCount>totalSize) {

//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 (end<0) {

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=left><br>\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=1i<=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

/**

* <p>Title: RowSetPage</p>

* <p>Description: 使用RowSet封装数据的分页对象</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

/**

* <p>Title: 分页查询</p>

* <p>Description: 根据查询语句和页码查询出当页数据</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

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：htm+css字的右上角用于提示的红点怎么实现

# 下一篇：怎么用css控制字体倾斜，不是斜体，是整体倾斜一个角度

推荐阅读

热门文章

最新发布

标签列表

js的分页原理以及实现步骤是什么？

给您推荐相同类型的内容：