纯js分页，如何添加上一个，下一页！

Web 开发 > JavaScript
收藏 回复
[问题点数：20分，结帖人a4321262]
更多帖子
私信 空间 博客
a4321262
本版专家分：0
结帖率 87.5%
拜托各位大神、大侠们，帮我实现一下，下一页上一页的功能，谢谢你们了！


<!DOCTYPE html PUBLIC "-//W3C//Da XHTML 1.0 liansitional//EN" "http://www.w3.org/li/xhtml1/Da/xhtml1-liansitional.da">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>中国站长天空-网页特效-综合特效-静态代码的分页效果</title>

<meta http-equiv="content-Type" content="text/html;charset=gb2312">

<!--把下面代码加到<head>与</head>之间-->

<style type="text/css">

.wrap{ width:500px; margin:0 auto; overflow:hidden; *zoom:1; text-align:center;}



#mydiv li{display:none; float:left; margin-left:10px;}



#changpage{ clear:both; float:left;}

</style>

</head>

<body>

<!--把下面代码加到<body>与</body>之间-->

<div class="wrap">

<ul id="mydiv">

<li><a>01</a></li>

<li><a>02</a></li>

<li><a>03</a></li>

<li><a>04</a></li>

<li><a>05</a></li>

<li><a>06</a></li>

<li><a>07</a></li>

<li><a>08</a></li>

<li><a>09</a></li>

<li><a>10</a></li>

<li><a>11</a></li>

<li><a>12</a></li>

<li><a>13</a></li>

<li><a>14</a></li>

<li><a>15</a></li>

<li><a>16</a></li>

<li><a>17</a></li>

<li><a>18</a></li>

<li><a>19</a></li>

<li><a>20</a></li>

<li><a>21</a></li>

<li><a>09</a></li>

<li><a>10</a></li>

<li><a>11</a></li>

<li><a>12</a></li>

<li><a>13</a></li>

<li><a>14</a></li>

<li><a>15</a></li>

<li><a>16</a></li>

<li><a>17</a></li>

<li><a>18</a></li>

<li><a>19</a></li>

<li><a>20</a></li>

<li><a>21</a></li>

<li><a>09</a></li>

<li><a>10</a></li>

<li><a>11</a></li>

<li><a>12</a></li>

<li><a>13</a></li>

<li><a>14</a></li>

<li><a>15</a></li>

<li><a>16</a></li>

<li><a>17</a></li>

<li><a>18</a></li>

<li><a>19</a></li>

<li><a>20</a></li>

<li><a>21</a></li>

<li><a>09</a></li>

<li><a>10</a></li>

<li><a>11</a></li>

<li><a>12</a></li>

<li><a>13</a></li>

<li><a>14</a></li>

<li><a>15</a></li>

<li><a>16</a></li>

<li><a>17</a></li>

<li><a>18</a></li>

<li><a>19</a></li>

<li><a>20</a></li>

<li><a>21</a></li>



</ul>

<div id="changpage"></div>

</div>

<script language="javascript">

var obj,j;

var page=0;

var nowPage=0;//当前页

var listNum=6;//每页显示<ul>数

var PagesLen;//总页数

var PageNum=4;//分页链接接数(5个)

onload=function(){

obj=document.getElementById("mydiv").getElementsByTagName("li");

j=obj.length

PagesLen=Math.ceil(j/listNum);

upPage(0)

}

function upPage(p){

nowPage=p

//内容变换

for (var i=0;i<j;i++){

obj[i].style.display="none"

}

for (var i=p*listNum;i<(p+1)*listNum;i++){

if(obj[i])obj[i].style.display="block"

}

//分页链接变换

sliS='<a href="###" onclick="upPage(0)">首页</a>  '

var PageNum_2=PageNum%2==0?Math.ceil(PageNum/2)+1:Math.ceil(PageNum/2)

var PageNum_3=PageNum%2==0?Math.ceil(PageNum/2):Math.ceil(PageNum/2)+1

var sliC="",startPage,endPage;

if (PageNum>=PagesLen) {startPage=0;endPage=PagesLen-1}

else if (nowPage<PageNum_2){startPage=0;endPage=PagesLen-1>PageNum?PageNum:PagesLen-1}//首页

else {startPage=nowPage+PageNum_3>=PagesLen?PagesLen-PageNum-1: nowPage-PageNum_2+1;var t=startPage+PageNum;endPage=t>PagesLen?PagesLen-1:t}

for (var i=startPage;i<=endPage;i++){

 if (i==nowPage)sliC+='<a href="###" style="color:red;font-weight:700;" onclick="upPage('+i+')">'+(i+1)+'</a> '

 else sliC+='<a href="###" onclick="upPage('+i+')">'+(i+1)+'</a> '

}

sliE=' <a href="###" onclick="upPage('+(PagesLen-1)+')">尾页</a>  '

sliE2=nowPage+1+"/"+PagesLen+"页"+"  共"+j+"条"

 

document.getElementById("changpage").innerHTML=sliS+sliC+sliE+sliE2

}

</script>

</body>

</html>
只看楼主 引用 举报 楼主 收起
展开阅读全文
更多帖子
私信 空间 博客
挨踢直男
本版专家分：42450
Blank
红花 2011年7月 Web 开发大版内专家分月排行榜第一
Blank
黄花 2011年6月 Web 开发大版内专家分月排行榜第二

javascript分页
只看TA 引用 举报 #1得分 0
更多帖子
私信 空间 博客
a4321262
本版专家分：0
引用 1 楼 aspwebchh 的回复:
javascript分页

 您好，这个分页效果很好，可是我不会添加数据，我不想alert 1、2、3数子之类的，你能帮改改你发的连接里面的代码，我想点击的时候，一个层里面显示的是文字之类的数据！ 谢谢了
只看TA 引用 举报 #2得分 0
更多帖子
私信 空间 博客
挨踢直男
本版专家分：42450
Blank
红花 2011年7月 Web 开发大版内专家分月排行榜第一
Blank
黄花 2011年6月 Web 开发大版内专家分月排行榜第二 
//当点击分页时触发此事件。 一些外加的效果可以放在此处， 如加载数据

p.addListener( 'pageChanged', function() {

	alert('第' + p.pageIndex + '页');

	p.render();

} );

这个里面自己写好了
只看TA 引用 举报 #3得分 20
更多帖子
私信 空间 博客
a4321262
本版专家分：0
引用 3 楼 aspwebchh 的回复:
JavaScript code?12345//当点击分页时触发此事件。 一些外加的效果可以放在此处， 如加载数据p.addListener( 'pageChanged', function() {    alert('第' + p.pageIndex + '页');    p.render();} );
这个里面自己写好了


我是个新手，对js不是很懂，你能帮我写下麽，结贴给你了
只看TA 引用 举报 #4得分 0
更多帖子
私信 空间 博客
a4321262
本版专家分：0
拜托各位了！555555555555
只看TA 引用 举报 #5得分 0
更多帖子
私信 空间 博客
qq137051908
本版专家分：2816
http://download.csdn.net/download/qq137051908/3541744
只看TA 引用 举报 #6得分 0
收起
收藏 回复
a4321262

等级：

关注 私信 TA的帖子
原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）

虽然写的很烂，但至少全部都是自己写的，因为这个没有固定的顺序，所以就没有封装，如果你技术好的话，可以你写的分享给我，谢谢。 <!DOCTYPE html><html lang="en"><head> <meta charset=...

js上一页/下一页真分页的页码生成

//返回按钮上的文本内容，如：pageBtns(2,10,75) 返回："上一页,1,2,3,4,...,8,下一页" 以逗号分隔的字符串 function pageBtns(currentPageIndex,currentPageSize,dataCount){  var cpIndex=parseInt

js简单分页，只有上一页和下一页

/*制作分页 *参数分别为，目标位置id，数据总数，当前页，每页显示条数，回调函数(即，点击分页按钮触发的方法) *其中class为pagebar_1和pagebar_2的区别是能上一页和下一页能否点击，以及颜色变化 */ function ...

Js 简单上下分页

Js简单上下分页 [代码]Js代码： var currentPage = 1; //当前页 var pageSize = 10; //每页中显示的数据数 var totalpage = 0; //总页数 var recordCount = 1000; //假设总数据条数100 var numCount = 4; ...

万能分页显示上一页下一页

初学者使用,大牛勿喷!那里不足请多多提示,在此感谢

自己写的分页 支持首页末页下一页上一页

看到有人问分页的问题，就写了一个，其实如果嫌自己写分页麻烦，完全可以用bootstrap分页，当然，如果你不想用插件，也可以自己写，这是我写的分页，分享给大家

layui table 分页 上一页 : 下一页 回调

layui table 分页回调 上一页 : 下一页 回调 学习类的文章，因为最近需要用到这个，所以作为学习记录一下 回调的参数是 done table.render({ elem: '#main', width: 900, url: '/api/get', //数据接口 title: '...

java分页，上一页，下一页，123页这种

求java分页，分成1、2、3、4、5页类型的和上一页下一页结合，谢谢！！！，想研究一下！！！已经会上一页下一页了！！！

hql分页上一页下一页的问题

public List<Teacher> query(int pageIndex) { List<Teacher> list=null; Configuration cof=null; SessionFactory sf=null; Session s=null;... 这是daoimpl中的分页语句，怎么在jsp页面中显示上一页下一页，

JQuery AJAX 分页，跳页下一页，上一页【总结了一天啊干货】

网上的分页基本有问题，自己总结下：代码如下 var pagesi = "2";//每页行数 var totalPage = "0";//总页数 var currentPage = "1";//当前页 $(function(){ $('.menu_item').click(function () { $('.menu_

使用mybatis在分页中对上一页下一页逻辑判断

使用EL表达式来对上一页和下一页进行逻辑判断从而不会无限制的跳转 代码如下 <a href="page?pageNumber=${PageInfo.pageNumber-1 }&pageSize=${PageInfo.pageSize}" <c:if test="${PageInfo.pageNumber<...

HTML静态分页（形如：首页，上一页，下一页，尾页）

在HTML中有时候我们会用到静态分页，一次拿回一定量的数据结果条目，我们会以形如：第2页，共12页首页 上一页下一页尾页 的方式进行静态分页，以下是该种静态分页的代码，供兄弟姐妹们参考。 <div class="page"&...

分页表格中，点击下一页的时候，保存上一页勾选的信息

引入cookie，/js/jquery.cookie.js"&gt; 1，点击勾选的时候将已选的id保存到cookie中。 $(".table1 input[name=chk]").on(“click”,function (){ var str=“ssssdId”; var arryCookie = ...

基于VUE的一个分页组件（可上一页，下一页，输入页码跳转，页码过多时省略号显示）

一：组件代码Pager.vue <template id="pager"> <div> <div class="pager" v-if="totalPage > 1"> <div> <a v-if="pageArr.length > 1" href="javascrip...

ngx-bootstrap 分页修改上一页/下一页文字

&lt;pagination [totalItems]="totalElments" (pageChanged)="pageChanged($event)"...'上一页'" [nextText]="'下一页'"&gt;&lt;/pagination&gt;  

nodejs+express+mysql(后台实例项目练习8—实现分页功能 上一页 下一页功能)

nodejs+express+mysql(后台实例项目练习—搭建项目) nodejs+express+mysql(后台实例项目练习2—数据库链接 网页跳转 iframe框架路径问题 模板引擎 ) nodejs+express+mysql(后台实例项目练习3—增加路由与iframe ...

关于分页标签，上一页和下一页不可点击。

前几天遇到了分页问题。 在第一页的时候，上一页依然是一个可点击的状态。 于是开始想解决办法 页面中，上下页都套用了bootstrap中分页的“disabled” 的class，这个...在ul里面设置一个id， 通过js加载页面时候取得上

JS返回上一页下一页功能

返回上一页JS代码 按钮可表示为返回上一页 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <head> <script> function goBack() { window.history.back() } </...

列表页转内容页-实现上一页下一页效果

自己制作的一款小程序里面，为了实现上一页下一页的效果，以及点击view组件后跳转并提取指定的文章页面内容。并且用户在内容页点击上一页下一页时进行相应的变化。 开发困惑：一个冒号和等号的区别让我折磨了两三天...

分页综合应用(分页下拉、当前页、上一页、下一页)

先看需求： 本次练习的数据库sql文件以及代码地址： http://pan.baidu.com/s/1jIdV7r4 使用Bootstrap构建显示层 JSP+Servlet+EL+JSTL+Dao+MySql+JDBC 主页的jsp代码 ... charset=utf-8

相关热词 c#中如何设置提交按钮 c#帮助怎么用 c# 读取合并单元格的值 c#带阻程序 c# 替换span内容 c# rpc c#控制台点阵字输出 c#do while循环 c#调用dll多线程 c#找出两个集合不同的