正文
javascript分页,web前端分页
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
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
仔细理解它的内涵，我用//标出了我修改的地方，对比下原来的代码，看看它的思路吧，其实不难。
再给你推荐个网站，
若有问题，请到留言，只要在能力范围之内，肯定帮助。
论坛：
相关问答
Q1: js的分页原理以及实现步骤是什么？
主要是借鉴了网上一个例子，修改了一些小地方，前端分页的技巧，表格的数据是已经写好了，可以前端渲染表格然后再分页，都是可以的。
其实分页最关键是这两句：
var startRow = (currentPage - 1) * pageSize+1; //currentPage 为当前页，pageSize为每页显示的数据量
var endRow = currentPage * pageSize;
找到我们需要显示的行的范围（starRow~endRow）
ps:这里在跳转的时候遇到了一个小BUG，就是获取到的select的value值是string类型的，比如获取到了1，然后你想再加1的时候就会变成"11" 而不是我们想要的"2"，所以这里需要用parseInt( )来转换一下，小细节需要注意呀！！！
效果图：
[javascript] view plain copy print?
!doctype html
html
head
meta charset='utf-8'
style type="text/css"
a{
text-decoration: none;
}
.table2{
border:#C8C8C8 solid;
border-width:1px 0px 0px 1px;
background: #F3F0F0;
margin-top:25px;
}
.td0{
border:#C8C8C8 solid;
border-width:0 0 1px 0;
}
.td2{
border:#C8C8C8 solid;
border-width:0 1px 1px 0 ;
}
.barcon {
width: 1000px;
margin: 0 auto;
text-align: center;
}
.barcon1 {
font-size: 17px;
float: left;
margin-top: 20px;
}
.barcon2 {
float: right;
}
.barcon2 ul {
margin: 20px 0;
padding-left: 0;
list-style: none;
text-align: center;
}
.barcon2 li {
display: inline;
}
.barcon2 a {
font-size: 16px;
font-weight: normal;
display: inline-block;
padding: 5px;
padding-top: 0;
color: black;
border: 1px solid #ddd;
background-color: #fff;
}
.barcon2 a:hover{
background-color: #eee;
}
.ban {
opacity: .4;
}
/style
/head
body
table width="950" cellpadding="0" cellspacing="0" class="table2" align="center"
thead
tr
td colspan="3" height="33" class="td0" /td
td align="center" class="td2"a href="###"添加用户/a/td
/tr
tr align="center"
th width="150" height="33" class="td2"序号/th
th width="300" class="td2"用户名/th
th width="250" class="td2"权限/th
th width="250" class="td2"操作/th
/tr
/thead
tbody id="adminTbody"
tr align="center"
td class="td2" height="33" width="150"1/td
td class="td2" admin/td
td class="td2" 管理员/td
td class="td2" a href="###"修改/a/td
/tr
/tbody
/table
div id="barcon" class="barcon"
div id="barcon1" class="barcon1"/div
div id="barcon2" class="barcon2"
ul
lia href="###" id="firstPage"首页/a/li
lia href="###" id="prePage"上一页/a/li
lia href="###" id="nextPage"下一页/a/li
lia href="###" id="lastPage"尾页/a/li
liselect id="jumpWhere"
/select/li
lia href="###" id="jumpPage" onclick="jumpPage()"跳转/a/li
/ul
/div
/div
script src="jquery.js"/script
script
/*动态生成用户函数
num为生成的用户数量
*/
function dynamicAddUser(num){
for(var i=1;i=num;i++)
{
var trNode=document.createElement("tr");
$(trNode).attr("align","center");
//序号
var tdNodeNum=document.createElement("td");
$(tdNodeNum).html(i+1);
tdNodeNum.style.width = "150px";
tdNodeNum.style.height = "33px";
tdNodeNum.className = "td2";
//用户名
var tdNodeName=document.createElement("td");
$(tdNodeName).html("lzj"+i);
tdNodeName.style.width = "300px";
tdNodeName.className = "td2";
//权限
var tdNodePri=document.createElement("td");
tdNodePri.style.width = "250px";
tdNodePri.className = "td2";
var priText=document.createElement("span");
$(priText).css({"display":"inline-block","text-align":"center"});
$(priText).text("普通用户");
tdNodePri.appendChild(priText);
//操作
var tdNodeOper = document.createElement("td");
tdNodeOper.style.width = "170px";
tdNodeOper.className = "td2";
var editA = document.createElement("a");
$(editA).attr("href", "###").text("编辑");
$(editA).css({ display: "inline-block" });
tdNodeOper.appendChild(editA);
trNode.appendChild(tdNodeNum);
trNode.appendChild(tdNodeName);
trNode.appendChild(tdNodePri);
trNode.appendChild(tdNodeOper);
$("#adminTbody")[0].appendChild(trNode);
}
}
$(function(){
dynamicAddUser(80);
goPage(1,10);
var tempOption="";
for(var i=1;i=totalPage;i++)
{
tempOption+='option value='+i+''+i+'/option'
}
$("#jumpWhere").html(tempOption);
})
/**
* 分页函数
* pno--页数
* psize--每页显示记录数
* 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数
* 纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能
**/
var pageSize=0;//每页显示行数
var currentPage_=1;//当前页全局变量，用于跳转时判断是否在相同页，在就不跳，否则跳转。
var totalPage;//总页数
function goPage(pno,psize){
var itable = document.getElementById("adminTbody");
var num = itable.rows.length;//表格所有行数(所有记录数)
pageSize = psize;//每页显示行数
//总共分几页
if(num/pageSize parseInt(num/pageSize)){
totalPage=parseInt(num/pageSize)+1;
}else{
totalPage=parseInt(num/pageSize);
}
var currentPage = pno;//当前页数
currentPage_=currentPage;
var startRow = (currentPage - 1) * pageSize+1;
var endRow = currentPage * pageSize;
endRow = (endRow num)? num : endRow;
//遍历显示数据实现分页
/*for(var i=1;i(num+1);i++){
var irow = itable.rows[i-1];
if(i=startRow i=endRow){
irow.style.display = "";
}else{
irow.style.display = "none";
}
}*/
$("#adminTbody tr").hide();
for(var i=startRow-1;iendRow;i++)
{
$("#adminTbody tr").eq(i).show();
}
var tempStr = "共"+num+"条记录 分"+totalPage+"页 当前第"+currentPage+"页";
document.getElementById("barcon1").innerHTML = tempStr;
if(currentPage1){
$("#firstPage").on("click",function(){
goPage(1,psize);
}).removeClass("ban");
$("#prePage").on("click",function(){
goPage(currentPage-1,psize);
}).removeClass("ban");
}else{
$("#firstPage").off("click").addClass("ban");
$("#prePage").off("click").addClass("ban");
}
if(currentPagetotalPage){
$("#nextPage").on("click",function(){
goPage(currentPage+1,psize);
}).removeClass("ban")
$("#lastPage").on("click",function(){
goPage(totalPage,psize);
}).removeClass("ban")
}else{
$("#nextPage").off("click").addClass("ban");
$("#lastPage").off("click").addClass("ban");
}
$("#jumpWhere").val(currentPage);
}
function jumpPage()
{
var num=parseInt($("#jumpWhere").val());
if(num!=currentPage_)
{
goPage(num,pageSize);
}
}
/script
/body
/html
Q2: 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
Q3: 如何用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
;
}
运行效果：
Q4: 分页跳转的时候，上一页，下一页按钮 如何用javascript传值
你好，我这里有个自己写的javascript的分页，你可以去借鉴一下，希望能帮到你。
//定义有关分页的操作
var pageSize;//每页显示的记录数
var countPage;//总页数
var countRecord;//总记录数
var nowPage=1;//当前页
var startIndex;//每页开始的记录数
var endIndex;//每页结束的记录数
var $pageInfo;
var $showUsers;
//dom载入完毕 触发的匿名函数
$(document).ready(function() {
//分页操作
pageSize=$("#pagesize").val();//获取默认的pageSize的值
$pageInfo=$("#showPageInfo");
$showUsers=$("#showUsers");
// 获取全选input删除的dom对象
var qxDom = $("#qx")[0];
// 把checkbox设置为没有选中的状态
qxDom.checked = false;
// 把table隐藏
$("#users").css("display", "none");
// 根据id获取添加的input的jquery对象
var $name = $("#name");
var $sex = $("input[type='radio']:checked");
var $age = $("#age");
/*----------------下面是添加按钮的事件-------------------*/
// 注册按钮事件
$("#addUser").click(function() {
// 获取table中display样式的值
var val = $("#users").css("display");
// 判断是否隐藏
if ("none" == val) {
// 显示
$("#users").show();
}
// 获取name值
var name = $name.val();
// 获取sex
var sex = $sex.val();
// 获取age
var age = $age.val();
// 创建tr
var $tr = $("tr/tr");
// 创建td
var $td1 = $("td/td");
// 创建input
var $input = $("input type='checkbox'");
$td1.append($input);
// 创建td 并且 添加name文本节点
var $td2 = $("td/td").append(name);
// 创建td 并且 把sex 对应的文本添加到td中
var $td3 = $("td/td").append(sex);
var $td4 = $("td/td").append(age);
// 创建按钮并且为其注册事件
var $deleteBtn = $("input type='button' value='删除'");
// 给按钮注册事件
$deleteBtn.click(function() {
$(this).parent().parent().remove();
});
var $td5 = $("td/td");
// 或者
// $td5.append($deleteBtn);
// 把创建的按钮添加到td5中
$deleteBtn.appendTo($td5);
// 注册可编辑事件
$td2.dblclick(clickTd);
$td3.dblclick(clickTd);
$td4.dblclick(clickTd);
// 对象的链式操作
$tr.append($td1).append($td2).append($td3).append($td4).append($td5);
// 在tbody中添加tr
$showUsers.append($tr);
//添加成功之后 进行分页操作
countRecord=$("#showUsers tr").size();//获取总记录数
pageInfo();
});
/*----------------上面是添加按钮的事件-------------------*/
/*----------------下面是全选的事件处理-------------------*/
// 全选和反选的操作
$("#qx").click(function() {
if (this.checked) {
$("tdinput[type='checkbox']").each(function() {
this.checked = true;
});
} else {
$("tdinput[type='checkbox']").each(function() {
this.checked = false;
});
}
})
/*----------------上面是全选的事件处理-------------------*/
/*----------------下面是批量删除的事件处理-------------------*/
// 删除的操作
$("#deleteCheckedBtn").click(function() {
$("tdinput[type='checkbox']").each(function() {
if (this.checked) {
// 删除所选中的tr行
$(this).parent().parent().remove();
}
// 并且将复选框设置为没选中的状态
qxDom.checked = false;
});
});
/*----------------上面是批量删除的事件处理-------------------*/
//注册改变的事件
$("#pagesize").change(function(){
pageSize=$(this).val();
pageInfo();
});
var $firstBtn=$("#firstBtn");
var $backBtn=$("#backBtn");
var $nextBtn=$("#nextBtn");
var $lastBtn=$("#lastBtn");
$firstBtn.click(pageInfo);
$backBtn.click(pageInfo);
$nextBtn.click(pageInfo);
$lastBtn.click(pageInfo);
});
/*----------------下面是表格可编辑的事件处理-------------------*/
// 注册的编辑事件处理
var clickTd = function() {
// 获取当前对象中孩子节点为input的集合对象 判断这个集合对象的长度是否大于0
if ($(this).children("input").length 0) {
// 返回程序
return false;
} else {
// 获取点击的td的值
var value = $(this).text();
// td清空
$(this).empty();
// 创建input输入框
var $cinput = $("input type='text' value='" + value + "'");
// 失去焦点的事件
$cinput.blur(blurInput);
// 添加到td中
$(this).append($cinput);
}
}
// 失去焦点触发的函数
var blurInput = function() {
// 获取值
var value = $(this).val();
// 给td重新设置文本
$(this).parent().text(value);
}
/*----------------上面是表格可编辑的事件处理-------------------*/
var pageInfo=function(){
//获取总记录数
countRecord=$("#showUsers tr").size();
//计算总页数
countPage=Math.ceil(countRecord/pageSize);
//点击按钮的判断
if(this.nodeType==1){
//首先获取你点击的按钮的id的值
var idValue=$(this).attr("id");
//判断是否是首页
if("firstBtn"==idValue){
nowPage=1;
//判断是否是上一页
}else if("backBtn"==idValue){
if(nowPage1){
nowPage--;
}
//判断是否是下一页
}else if("nextBtn"==idValue){
if(nowPagecountPage){
nowPage++;
}
//判断是否是末页
}else if("lastBtn"==idValue){
nowPage=countPage;
}
}
startIndex=(nowPage-1)*pageSize+1;//获取每页开始记录数
endIndex=nowPage*pageSize;//获取每页结束记录数
//如果结束的记录大于总记录数
if(endIndex=countRecord){
//让结束的记录数 等于总记录数
endIndex=countRecord;
}
//如果结束的记录数小于显示的记录数
if(countRecord=pageSize){
endIndex=countRecord;
}
//显示操作
$("#showUsers tr:gt("+(startIndex-1)+")").show();
$("#showUsers tr:lt("+(endIndex-1)+")").show();
//隐藏操作
//设置隐藏超出页数之外的数据
$("#showUsers tr:lt("+(startIndex-1)+")").css("display","none");
$("#showUsers tr:gt("+(endIndex-1)+")").css("display","none");
$pageInfo.html("当前从"+startIndex+"记录到"+endIndex+"记录数，共"+countRecord+"记录当前是"+nowPage+",共"+countPage+"页");
}
