本文目录一览：
- 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.*" %
%