js实现的分页代码（js前端分页）

本文目录一览：

• 1、怎么用js来实现页面的分页，有案列代码吗？请给个代码看看，谢谢
• 2、如何用JS将数据在页面上分页显示出来
• 3、JS如何控制分页
• 4、求JS分页实例或者servlet分页实例，最好有例子能直接运行看看效果
• 5、javascript如何实现div分页呢？
• 6、求JS代码，分页【上一页 1 2 3 4 5 下一页】

怎么用js来实现页面的分页，有案列代码吗？请给个代码看看，谢谢

分屏加载吧 滑到哪加载哪

从网页头引入两个js文件，注意必须先放jquery的

[javascript] view plaincopy

script src=”css/infinite-scroll/jquery-1.6.4.js”/script

script src=”css/infinite-scroll/jquery.infinitescroll.js”/script

2.之后在网页头自己写一个js脚本

[javascript] view plaincopy

script

$(document).ready(function (){

$(“#container”).infinitescroll({

navSelector: “#navigation”, //页面分页元素–本页的导航，意思就是一个可以触发ajax函数的模块

nextSelector: “#navigation a”, //下一页的导航

itemSelector: “.scroll ” , //此处我用了类选择器，选择的是你要加载的那一个块（每次载入的数据放的地方）

animate: true, //加载时候时候需要动画，默认是false

maxPage: 3, //最大的页数，也就是滚动多少次停。这个页码必须得要你从数据库里面拿

});

});

/script

3.或许你看到这里还是不太清楚网页怎么定义，这里给出我的demo，希望可以有帮助

[html] view plaincopy

%@ page language=”java” contentType=”text/html; charset=utf-8″

pageEncoding=”utf-8″%

!DOCTYPE html

html

head

meta charset=”utf-8″

title无限翻页效果/title

script src=”css/infinite-scroll/jquery-1.6.4.js”/script

script src=”css/infinite-scroll/jquery.infinitescroll.js”/script

script src=”css/infinite-scroll/test/debug.js”/script

script

$(document).ready(function (){ //别忘了加这句，除非你没学Jquery

$(“#container”).infinitescroll({

navSelector: “#navigation”, //页面分页元素–成功后自动隐藏

nextSelector: “#navigation a”,

itemSelector: “.scroll ” ,

animate: true,

maxPage: 3,

});

});

/script

/head

body

div id=”container” !– 容器 —

div class=”scroll” !– 每次要加载数据的数据块–

第一页内容第一页内容br

第一页内容br第一页内容br第一页内容br

第一页内容br第一页内容br第一页内容br

第一页内容br第一页内容br第一页内容

/div

/div

div id=”navigation” align=”center” !– 页面导航–

a href=”user/list?page=1″/a !– 此处可以是url，可以是action，要注意不是每种html都可以加，是跟当前网页有相同布局的才可以。另外一个重要的地方是page参数，这个一定要加在这里，它的作用是指出当前页面页码，没加载一次数据，page自动+1,我们可以从服务器用request拿到他然后进行后面的分页处理。–

/div

/body

/html

如何用JS将数据在页面上分页显示出来

在servlet的service()方法中只需进行如下操作：

PageControl

 pageCtl

=

yourBusinessObject.listData(req.getParameter(“jumpPage”));

req.setAttribute(“pageCtl”,pageCtl);

说明：yourBusinessObject封装了商业逻辑，是位于Business

Logic

Layer中的一个对象，运用OOAD的方法，封装商业对象，在Persistent

Layer之上组建坚实的Business

Logic

Layer同样是构建大型电子商务架构的关键所在。本文的关注点只是分页处理，暂不详细论述.

在每个想要实现翻页显示数据的jsp页面中，我们的工作也很简单,其代码是公式化的：

jsp:useBean

id=”pageCtl”

class=”yourpackage.PageControl”

scope=”request”/jsp:useBean

%if(pageCtl.maxPage!=1)){%

form

name=”PageForm”

 action=”/servlet/yourpackage.yourservlet”

method=”post”

%@

include

file=”/yourpath/pageman.jsp”%

/form

%}%

说明：

if(pageCtl.maxPage!=1)实现了这样一个逻辑：如果所取得数据不足一页,那么就不用进行翻页显示。

我们注意到%@

include

file=”/yourpath/pageman.jsp”%这使得真正的翻页部分完全得到了重用.

那么pageman.jsp到底做了些什么呢？它实现了经常做翻页处理的人耳熟能详的逻辑 

（A）第一页时不能再向前翻； 

（B）最后一页时不能再向后翻； 

同时能够进行页面任意跳转，具体代码如下：

每页%=pageCtl.rowsPerPage%行

共%=pageCtl.maxRowCount%行

第%=pageCtl.curPage%页

共%=pageCtl.maxPage%页

BR

%if(pageCtl.curPage==1){

out.print(“

首页

上一页”);

 

}else{

 %

 

A

HREF=”javascript:gotoPage(1)”首页/A

A

HREF=”javascript:gotoPage(%=pageCtl.curPage-1%)”上一页/A

%}%

%if(pageCtl.curPage==pageCtl.maxPage){

out.print(“下一页

尾页”);

 

}else{

 %

 

A

HREF=”javascript:gotoPage(%=pageCtl.curPage+1%)”下一页/A

A

HREF=”javascript:gotoPage(%=pageCtl.maxPage%)”尾页/A

%}%

转到第SELECT

name=”jumpPage”

onchange=”Jumping()”

 

 

%

for(int

i=1;i=pageCtl.maxPage;i++)

 {

 

 

if

(i==

pageCtl.curPage){

 

 

%

 

 

OPTION

selected

value=%=i%%=i%/OPTION

 

 

%}else{%

 

 

OPTION

value=%=i%%=i%/OPTION

 

 

%}}%

 

 

 

/SELECT页

最后附上用于页面跳转的javascript公共函数:

function

Jumping(){

 document.PageForm.submit();

 return

;

}

function

gotoPage(pagenum){

 document.PageForm.jumpPage.value

=

pagenum;

 document.PageForm.submit();

 return

;

}

运行效果：

JS如何控制分页

//js获取url上的参数

function getParam(name)  {    

        var reg = new RegExp(“(^|)” + name + “=([^]*)(|$)”, “i”);    

        var r = window.location.search.substr(1).match(reg);    

        if (r != null)

            return unescape(r[2]);

        return null;    

 }

var page  = getParam(‘page’);

求JS分页实例或者servlet分页实例，最好有例子能直接运行看看效果

!DOCTYPE HTML

html

head

meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /

title分页JS代码/title

style type=”text/css”

.page{margin:2em;}

.page a{text-decoration:none;display:inline-block;line-height:14px;padding:2px 5px;color:#333;border:1px solid #ccc;margin:0 2px;}

.page a:hover,.page a.on{background:#999;color:#fff;border:1px solid #333;}

.page a.unclick,.page a.unclick:hover{background:none;border:1px solid #eee;color:#999;cursor:default;}

/style

/head

body

div class=”page”/div

div class=”page”/div

/body

script type=”text/javascript”

//container 容器，count 总页数 pageindex 当前页数

function setPage(container, count, pageindex) {

var container = container;

var count = count;

var pageindex = pageindex;

var a = [];

//总页数少于10 全部显示,大于10 显示前3 后3 中间3 其余….

if (pageindex == 1) {

a[a.length] = “a href=\”#\” class=\”prev unclick\”prev/a”;

} else {

a[a.length] = “a href=\”#\” class=\”prev\”prev/a”;

}

function setPageList() {

if (pageindex == i) {

a[a.length] = “a href=\”#\” class=\”on\”” + i + “/a”;

} else {

a[a.length] = “a href=\”#\”” + i + “/a”;

}

}

//总页数小于10

if (count = 10) {

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

setPageList();

}

}

//总页数大于10页

else {

if (pageindex = 4) {

for (var i = 1; i = 5; i++) {

setPageList();

}

a[a.length] = “…a href=\”#\”” + count + “/a”;

} else if (pageindex = count – 3) {

a[a.length] = “a href=\”#\”1/a…”;

for (var i = count – 4; i = count; i++) {

setPageList();

}

}

else { //当前页在中间部分

a[a.length] = “a href=\”#\”1/a…”;

for (var i = pageindex – 2; i = pageindex + 2; i++) {

setPageList();

}

a[a.length] = “…a href=\”#\”” + count + “/a”;

}

}

if (pageindex == count) {

a[a.length] = “a href=\”#\” class=\”next unclick\”next/a”;

} else {

a[a.length] = “a href=\”#\” class=\”next\”next/a”;

}

container.innerHTML = a.join(“”);

//事件点击

var pageClick = function() {

var oAlink = container.getElementsByTagName(“a”);

var inx = pageindex; //初始的页码

oAlink[0].onclick = function() { //点击上一页

if (inx == 1) {

return false;

}

inx–;

setPage(container, count, inx);

return false;

}

for (var i = 1; i oAlink.length – 1; i++) { //点击页码

oAlink[i].onclick = function() {

inx = parseInt(this.innerHTML);

setPage(container, count, inx);

return false;

}

}

oAlink[oAlink.length – 1].onclick = function() { //点击下一页

if (inx == count) {

return false;

}

inx++;

setPage(container, count, inx);

return false;

}

} ()

}

setPage(document.getElementsByTagName(“div”)[0],10,1);

setPage(document.getElementsByTagName(“div”)[1],13,5);

/script

/html

javascript如何实现div分页呢？

主要思路：就是点击当前页时，它自己显示，其它的都隐藏；

下面是简单的代码实现：

style    

input.active {background:yellow;}    

div {width:200px; height:200px; border:1px solid red; display:none;}    

div.active {display:block;}    

/style    

script    

window.onload=function(){    

var aBtn = document.getElementsByTagName(‘input’);    

var aDiv = document.getElementsByTagName(‘div’);    

    

for(var i =0; iaBtn.length;i++)    

{    

(function(index){    //因为要存储点击的下标，所以需要做一个参数引入。学名叫’自执行匿名函数’。

aBtn[i].onclick=function(){   

        //这个for循环的作用是将所以的都隐藏。 

for(var i =0; iaBtn.length;i++)    

{    

aBtn[i].className=”;    

aDiv[i].className=”;    

}    

//这是将当前点击的显示。

this.className=’active’;    

aDiv[index].className=’active’;    

};    

})(i);    

}    

};    

/script    

/head    

body    

input type=”button” value=”111″ class=’active’ /    

input type=”button” value=”222″ /    

input type=”button” value=”333″ /    

div class=”active”11111111111/div    

div22222222222/div    

div33333333333/div    

/body

求JS代码，分页【上一页 1 2 3 4 5 下一页】

create proc proc_insertstu

@sid int,@sname varchar(20),@ssex varchar(6),@sage int

as

insert into stu values(@sid,@sname,@ssex,@sage)

go

java调用:

public boolean insertStu(Student stu)

{

CallableStatement call=null;

try {

call=con.prepareCall(“{call proc_insertstu(?,?,?,?)}”);

} catch (SQLException e) {

// TODO 自动生成 catch 块

e.printStackTrace();

return false;

}

try {

call.setInt(1, stu.getId());

call.setString(2, stu.getName());

call.setString(3, stu.getName());

call.setInt(4, stu.getAge());

call.execute();

} catch (SQLException e) {

// TODO 自动生成 catch 块

e.printStackTrace();

return false;

}

return true;

}

JSP调用：

%

DBCon db=new DBCon();

db.getCon();

CallableStatement call=db.con.prepareCall(“{call proctest}”);

call.execute();

ResultSet rs=call.getResultSet();

%

%@ page contentType=”text/html; charset=gb2312″%

%@ page language=”java” import=”java.sql.*” %

%