本文目录一览：
- 1、网页上的“上一页，下一页”JS代码怎么写？
- 2、javascript分页
- 3、求JS代码，分页【上一页 1 2 3 4 5 下一页】
- 4、JS如何控制分页
- 5、高手进~~~求一段JavaScript分页代码~~能动态控制
- 6、如何用JS将数据在页面上分页显示出来
网页上的“上一页，下一页”JS代码怎么写？
需要准备的材料分别有：电脑、html编辑器、浏览器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的script标签，输入js代码：
var a = parseInt(location.href.split(‘?’)[1].split(‘=’)[1]);
$(‘body’).append(‘a href=”index?page=’ + (a – 1) + ‘”上一页/a’);
$(‘body’).append(‘a href=”index?page=’ + (a + 1) + ‘”下一页/a’);
3、浏览器运行index.html?page=5页面，此时js会生成出上一页和下一页及其链接。
javascript分页
你好，你看下是不是你要的代码呢，我还扩充了t[26]=”利用JavaScript实现网页分页技术25|25.htm|2002.6.8|枫情”
t[27]=”利用JavaScript实现网页分页技术26|26.htm|2002.6.8|枫情”
html
script language=”JavaScript”
!–
var p=8
var t=new Array()
t[0]=”利用JavaScript实现网页分页技术1|01.htm|2002.6.8|枫情”
t[1]=”利用JavaScript实现网页分页技术2|02.htm|2002.6.8|枫情”
t[2]=”利用JavaScript实现网页分页技术3|03.htm|2002.6.8|枫情”
t[3]=”利用JavaScript实现网页分页技术4|04.htm|2002.6.8|枫情”
t[4]=”利用JavaScript实现网页分页技术5|05.htm|2002.6.8|枫情”
t[5]=”利用JavaScript实现网页分页技术6|06.htm|2002.6.8|枫情”
t[6]=”利用JavaScript实现网页分页技术7|07.htm|2002.6.8|枫情”
t[7]=”利用JavaScript实现网页分页技术8|08.htm|2002.6.8|枫情”
t[8]=”利用JavaScript实现网页分页技术9|09.htm|2002.6.8|枫情”
t[9]=”利用JavaScript实现网页分页技术10|10.htm|2002.6.8|枫情”
t[10]=”利用JavaScript实现网页分页技术11|11.htm|2002.6.8|枫情”
t[11]=”利用JavaScript实现网页分页技术12|12.htm|2002.6.8|枫情”
t[12]=”利用JavaScript实现网页分页技术13|13.htm|2002.6.8|枫情”
t[13]=”利用JavaScript实现网页分页技术14|14.htm|2002.6.8|枫情”
t[14]=”利用JavaScript实现网页分页技术15|15.htm|2002.6.8|枫情”
t[15]=”利用JavaScript实现网页分页技术16|16.htm|2002.6.8|枫情”
t[16]=”利用JavaScript实现网页分页技术17|17.htm|2002.6.8|枫情”
t[17]=”利用JavaScript实现网页分页技术18|18.htm|2002.6.8|枫情”
t[18]=”利用JavaScript实现网页分页技术19|19.htm|2002.6.8|枫情”
t[19]=”利用JavaScript实现网页分页技术20|20.htm|2002.6.8|枫情”
t[20]=”利用JavaScript实现网页分页技术21|21.htm|2002.6.8|枫情”
t[21]=”利用JavaScript实现网页分页技术22|22.htm|2002.6.8|枫情”
t[22]=”利用JavaScript实现网页分页技术23|23.htm|2002.6.8|枫情”
t[23]=”利用JavaScript实现网页分页技术24|24.htm|2002.6.8|枫情”
t[24]=”利用JavaScript实现网页分页技术25|25.htm|2002.6.8|枫情”
t[25]=”利用JavaScript实现网页分页技术26|26.htm|2002.6.8|枫情”
t[26]=”利用JavaScript实现网页分页技术25|25.htm|2002.6.8|枫情”
t[27]=”利用JavaScript实现网页分页技术26|26.htm|2002.6.8|枫情”
var totalPage=Math.ceil(t.length/p)
var curPage=1;
var str=window.location.toString();
if (str.indexOf(“?”)==-1)
str=str+”?1″
r=str.split(“?”)
curPage=parseInt(r[1],10);
w();
if (curPage1)
document.write(“a href=”+r[0]+”?”+(curPage-1)+”上一页/a”);
else
document.write(“上一页”);
document.write(” 第”+(t.length-(curPage-1)*p)+”至”);
if (curPagetotalPage)
document.write(t.length-(curPage)*p+1);
else
document.write(“1”);
document.write(“条，总共有”+t.length+”条信息! “);
if (curPagetotalPage)
document.write(“a href=”+r[0]+”?”+(curPage+1)+”下一页/a”);
else
document.write(“下一页”);
function w()
{
var c=new Array()
if (curPage=totalPage){
b=t.length;
s=(totalPage-1)*p;
}
else{
b=curPage*p;
s=(curPage-1)*p;
}
for (i=s;ib;i++)
{
try{
c=t[i].split(“|”)
document.write(” “+(t.length-i)+”、文 章 标 题a href=”+c[1]+” target=_blank”+c[0]+”/a时间”+c[2]+”作者”+c[3]
+”br”);
}catch(e){alert(“i:”+i+”,b:”+b+”,s:”+s)}
}
}
// —
/script
/html
仔细理解它的内涵，我用//标出了我修改的地方，对比下原来的代码，看看它的思路吧，其实不难。
再给你推荐个网站，
若有问题，请到留言，只要在能力范围之内，肯定帮助。
论坛：
求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.*” %
%
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’);
高手进~~~求一段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将数据在页面上分页显示出来
在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 ;
}
运行效果：
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/232330.html
微信扫一扫 
支付宝扫一扫 