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第一頁內容

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

%if(pageCtl.curPage==1){

out.print(“

首頁

上一頁”);

}else{

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

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

%}%

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

out.print(“下一頁

尾頁”);

}else{

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

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

%}%

轉到第SELECT

name=”jumpPage”

onchange=”Jumping()”

for(int

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

{

(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

/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

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

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.*” %

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/286500.html

js實現的分頁代碼（js前端分頁）

本文目錄一覽：

怎麼用js來實現頁面的分頁，有案列代碼嗎？請給個代碼看看，謝謝

如何用JS將數據在頁面上分頁顯示出來

JS如何控制分頁

求JS分頁實例或者servlet分頁實例，最好有例子能直接運行看看效果

javascript如何實現div分頁呢？

求JS代碼，分頁【上一頁 1 2 3 4 5 下一頁】

相關推薦

發表回復