本文目錄一覽：
- 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/zh-hk/n/232330.html
微信掃一掃 
支付寶掃一掃 