前两天做一个小的项目的时候，遇到了一个页面分页的问题。刚刚开始做的时候感觉是一脸的懵逼，觉得如果自己敲的话可能会敲很多很多，对于这种东西在网上肯定是有教程或者是方法的，于是按照惯例我就在万能百度上去找啊找，
因为本人是一枚新手所以感觉对自己还是有点的启发的，下面我就将我所学到的给大家看看！
　　多功能JavaScript分页组件&layPage&
　　　　　layPage是一款多功能的js分页组件，即适用于异步分页，又可用于传统的整页刷新跳页，还支持信息流加载，并且可无缝迁移至Node.js平台。layPage不依赖于任何第三方库，直接拿来用即可，它的接口继承了layui系列组件的一贯简洁，极易上手。那么，从现在开始，将一切分页的任务交给layPage吧！
　　异步分页
1 //以下将以jquery.ajax为例，演示一个异步分页
2 $.getJSON('test/demo1.json', {curr: 6}, function(res){ //从第6页开始请求。返回的json格式可以任意定义
cont: 'page1', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：&div id="page1"&&/div&
pages: res.pages, //通过后台拿到的总页数
curr: 6, //初始化当前页
jump: function(e){ //触发分页后的回调
$.getJSON('test/demo1.json', {curr: e.curr}, function(res){
e.pages = e.last = res. //重新获取总页数，一般不用写
<span style="color: #
<span style="color: #
var view = document.getElementById('view1'); //你也可以直接使用jquery
<span style="color: #
var demoContent = (new Date().getTime()/Math.random()/1000)|0; //此处仅仅是为了演示
<span style="color: #
view.innerHTML = res.content + demoC
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: # });
　　整页刷新式跳转
//好像很实用的样子，后端的同学再也不用写分页逻辑了。
cont: 'page11',
pages: 18, //可以叫服务端把总页数放在某一个隐藏域，再获取。假设我们获取到的是18
curr: function(){ //通过url获取当前页，也可以同上（pages）方式获取
var page = location.search.match(/page=(\d+)/);
return page ? page[1] : 1;
jump: function(e, first){ //触发分页后的回调
if(!first){ //一定要加此判断，否则初始时会无限刷新
location.href = '?page='+e.
&　　感觉是不是轻松好多好多，我用到的就是这两种了，在我看来还是比较好的。
友情提示：方法虽好只有学到的才是自己的
　　例子出处：这里还有很多的例子，不用谢-请叫我雷锋
阅读(...) 评论()CSS 分页实例
本章节我们将为大家介绍如何通过使用 CSS 来创建分页的实例。
如果你的网站有很多个页面，你就需要使用分页来为每个页面做导航。
以下实例演示了如何使用 HTML 和 CSS 来创建分页：
ul.pagination {&&& display: inline-&&&
padding: 0;&&& margin: 0;}ul.pagination li
{display:}ul.pagination li a {&&& color:
&&& float:&&& padding: 8px
16&&& text-decoration:}
点击及鼠标悬停分页样式
如果点击当前页，可以使用 .active 来设置当期页样式，鼠标悬停可以使用 :hover
选择器来修改样式：
ul.pagination li a.active {&&& background-color:
#4CAF50;&&& color:}ul.pagination li
a:hover:not(.active) {background-color: #}
ul.pagination li a.active {&&& background-color:
#4CAF50;&&& color:}ul.pagination li
a:hover:not(.active) {background-color: #}
可以使用 border-radius 属性为选中的页码来添加圆角样式:
ul.pagination li a {&&& border-radius: 5}ul.pagination li a.active {&&&
border-radius: 5}
鼠标悬停过渡效果
我们可以通过添加 transition 属性来为鼠标移动到页码上时添加过渡效果:
ul.pagination li a {&&& transition: background-color .3s;}
带边框分页
我们可以使用 border 属性来添加带边框分页:
ul.pagination li a {&&& border: 1px solid # /* Gray
提示: 在第一个分页链接和最后一个分页链接添加圆角：
.pagination li:first-child a {&&& border-top-left-radius:
5&&& border-bottom-left-radius: 5}.pagination li:last-child a {&&&
border-top-right-radius: 5&&&
border-bottom-right-radius: 5}
提示: 你可以使用 margin 属性来为每个页码直接添加空格：
ul.pagination li a {&&& margin: 0 4 /* 0 is for top
and bottom. Feel free to change it */}
分页字体大小
我们可以使用 font-size 属性来设置分页的字体大小:
ul.pagination li a {&&& font-size: 22}
如果要让分页居中，可以在容器元素上 (如 &div&) 添加 text-align:center 样式：
div.center {&&& text-align:}
面包屑导航
另外一种导航为面包屑导航，实例如下：
ul.breadcrumb {&&& padding: 8px 16&&&
list-style:&&& background-color: #}
ul.breadcrumb li {display:}ul.breadcrumb li+li:before {&&&
padding: 8&&& color:&&&
content: &/\00a0&;}
感谢您的支持，我会继续努力的!
扫码打赏，你说多少就多少
记住登录状态
重复输入密码网页中的分页设计_心得技巧_动态网站制作指南
网页中的分页设计
来源：人气：1206
　　说说目前常用的三种分类显示信息方法：　　常规翻页 信息滚动翻页 滚动条　　前者是横向翻页方式，后两者是纵向的信息翻页。作为很小的一个，大多数网站都不会花费什么精力去设计，设计也大同小异，用户已经使用习惯学习成本为0，但如果能够在细节上做的更细致贴心一些，用户的使用体验会有所提升。　　一、 先来看常规翻页　　1) 组成结构　　& 上页+页码+下页　　& 跳转到__页/第__页&;　　& 确认&按钮;　　& 支持键盘操作;　　2) 使用情景　　当网页内容较多、不能在限定区域内显示完全时;　　为了方便用户在多个页面间跳转和快速定位(尤其是按顺序翻页)，通过翻页设计提供多个页面间的导航。　　在电商网站3级页、搜索结果页面等信息量大的页面是很重要的。　　& 分页的内容是什么类型?　　& 页面数量有多少?　　&查看最多的是哪些页面?　　& 手动全部翻一遍的几率　　&是否会不按顺序翻页，为什么?　　&是否会查看已翻过的翻页?　　&翻页是否在列表顶部和底部都出现?　　&&最后一页&是否一定要有?　　&列表顶部什么情况下有翻页?　　按照用户心理模型，浏览邮箱内容时是反复浏览型，且页面较长，此时需要在顶部添加翻页，但电商网站搜索结果页和新浪微博的用户是在浏览到页面底部时才会有翻页动作，因此不必在顶部放翻页。　　&是否可以mouver就显示页面内容?什么时候可以?　　设计前考虑完以上问题，针对情况进行取舍设计。　　3) 交互分析　　&Google翻页　　搜索结果首次只提供10个页码;　　设计猜想：google开发者认为一般用户在这10页内就能找到想要的内容。　　点击任何一页码继续浏览，发现后续提供的页码是：当前页+9;　　设计猜想：当用户往下点击页码时，google开发者认为前10页内容不能满足用户，于是将搜索范围放大。　　但最多提供20个页码;　　设计猜想：但考虑到网页宽度还是不能继续无限制增加页码个数，于是设定最多一次提供20个页码。　　&Baidu翻页　　始终有第&1&页，中间用&&&表示未显示的页码;　　设计猜想：用户翻到后面页码也找不到想要的内容时，会返回第一页重新查找，此时第&1&页是home的作用。　　选中页码和mouseover页码样式始终在一个位置不变，不需移动鼠标就可点击下一页，而后页码自动替换状态;　　设计猜想：瞄准页码点击较困难，可以减少用户瞄准位置的次数。但没有做完美，用户每刷新一个页面，还是要滚动浏览器条到下方瞄准页码位置。这个微小的友好交互可以运用到轮播图设计中，减少鼠标瞄准操作。　　但也最多提供20个页码;　　&Sina微博小分页　　滚动翻页与翻页的结合使用;　　上页与下页放在一起更便于点击;　　通常情况下用户按&下一页&的情况最多，那么上页样式可以更简单些;　　4) 用户心智模型分析　　&以Taobao搜索结果列表页为例：　　用户输入关键词进行模糊搜索，然后出现相关结果列表，用户需要逐页翻看查找，此时&上一页&&下一页&使用最多,因此要设计的便于点击切换;或间隔两三页查看，因此样式上要区分查看过的页码和未查看过的;前几页浏览的几率最大，当翻到后面相关内容越来越少，用户会想要返回第一页，因此最好一直显示首页;页码数量不宜过长，不要导致用户视觉辨识困难;也不宜过短，以免给用户造成网站信息较少的错觉。　　&新浪微博信息列表翻页用户心智模型：　　用户浏览的信息是关注的信息，会像读报纸一样逐页的浏览下去，因此&上一页&&下一页&用的次数最多;其次是跳转翻页，为体现轻量微博的概念，将传统翻页的中间页码部分简化成下拉菜单，既能标识当前页位置又能翻页切换跳转;　　5) 总结　　缺点是会打断用户阅读，影响用户关注的主要内容。　　优点是条理清晰，便于分段查找信息，后台请求压力小;　　与别的组件一样，分页不是单独存在的也要结合使用环境来交互设计。　　二、 信息滚动翻页 　　GOOGLE图片　　& &无限滚动翻页&，当用户浏览到页面底部，自动刷新页面展示新的信息;　　& 连续翻过很多页后，当再无内容可以展示时，自动出现关联信息按钮&查看更多信息&，引导用户去浏览其他相关信息;　　& 或需要点击一下才可翻页;　　&页面过长时须提供&回到顶部&按钮;　　更多贴近用户心智模型，方便阅读浏览。缺点是当一段信息不能及时刷新出来时，无法跳跃浏览其下面的信息。　　三、 滚动条　　1) 滚动条与横向分页优先级　　当同时使用滚动条和翻页时，该如何设计。　　翻页与滚动条的相辅相成，都是页面过长，为分段呈现内容的方法;　　&翻页在滚动条内部　　设计猜想：滚动条到最底部方出现翻页。大概出自浏览器，滚动条内放页面翻页;　　邮箱　　例如浏览器，是因为软件与其内容的嵌套关系;　　&有翻页也滚动条，滚动内容不宜过长(PC端产品)　　设计猜想：滚动条需要拖动滑块浏览，如果滑块过短便更不容易操作;统计过IE、FF、Office等常用软件，一般滑块高度到8px时就不再缩小。当滑块高度只剩8px时，滚动条的拖动体验就相当的差。　　&移动端产品则貌似无限制　　设计猜想：不需拖动鼠标，移动端上手动点击是最方便常用的操作;　　2) 分页不一定是click跳转的　　有上下翻页同时能快速拖动浏览不同页的信息，适用于内容能够粗略浏览的页面;
　　四、 总结　　1) 从信息的结构来看，传统翻页是横向信息分段显示，而&无限滚动翻页&属于纵向信息递增显示(随滚动页面信息增长)。　　&区分访问过/未访问过的页码样式，能更好的帮助用户记忆，不重复浏览;　　& 链接的可点击区域尽量大，方便用户点击，页码间距足够避免用户误点击;　　&清晰标识当前页位置，一般处于页码中部;　　&可提供批量翻页(如，下10页);　　&页面过长时，增加&返回顶部&;　　&不需要&上一页&&下一页&时就不显示，如后者比前者使用更频繁，前者可简化成符号&;　　&显示总页数(当不显示总数时，翻到最后一页就不能再翻页了);　　&&上一页&&下一页&位置固定;　　&页码数量不宜过长(一下呈现过多导致视觉混乱，用户翻看页码困难)或过短(特别是搜索结果，会造成网站信息较少的印象);　　&尽量使用首页和末页链接，且放在普通页码区外的固定位置;　　&除放第一页外，可选择放前面三页的页码，视觉上稳定些;　　&避免花哨交互，精简;　　&页码过多时，允许跳转翻页;　　2) 同方向分页的Tab与翻页很少同时使用，滚动翻页与滚动条也是如此。但横向与纵向的组件可以交叉配合使用，比如滚动条与翻页。　　3) 没有规定横向的一定是翻页，纵向的一定是滚动条，可以发散开来：横向为滚动条，纵向翻页，但此种方式似乎不便于操作。　　所有组件的灵魂是用户操作方式。
优质网站模板关于HTML页面分页显示问题-CSDN论坛
JavaScript
关于HTML页面分页显示问题
请问各位大虾：
&&&&我的HTML页面中有一篇文章（文章长度不定），文章比较长，我想在页面上写四个按钮：“首页”、“上一页”、“下一页”、“末页”，可以实现在同一页上进行翻页显示，用JavaScript怎么实现？
&&&&希望曾经遇到过这个问题的人给我些帮助。
多层，点哪层哪层跳到最上面
maozhongpei(毛中培)同志可否说的详细些，菜鸟们急切想知道咋跳法。
我在论坛以前的文章中看到是使用是scrollTop，但是只能往下翻页，若要往上翻页，必须自己计算，但用户希望文章由他们更换，所以文章长度不定，所以用scrollTop方式不好做。maozhongpei(毛中培)能把你的方法详细的告诉我吗？急切地想得到高手的指点。
在一个页面里，放在不同的table或tr里，然后给每个起一个不一样的name，通过javascript，使用
[隐藏]document.all.yourtableORtrname.style.display="none";
[显示]document.all.yourtableORtrname.style.display="";
就可以了，记得在显示一个的同时，隐藏其它的哦
还有一个办法就是，将文章分成四部分，然后放在四个不同的html里，通过按钮或链接（建议使用链接）：“首页”、“上一页”、“下一页”、“末页”
调用不同的html就可以了：）
Save&as&this&page...
http://www.iht.com/articles/509203.html
&&&&&//创建数组存放车牌号
&&&&&var&cars&=&new&Array();
&var&tempArray&=&new&Array();
&var&list_NUM&=&10;&&&//一页存放的个数
&&&&&//车辆id和车牌号的对象
&function&car(id&,&cph)
&&this.id&=&
&&this.cph&=&
&&//总页数
&function&getPageNum()
&&&&var&page&=&parseInt(tempArray.length/list_NUM);
if((tempArray.length%list_NUM)&&&0)
page&+=&1;
&function&showCars(page)
var&htmlStr&=&"&table&width=\"220\"&&tr&height=32&&td&background=\"images/title.jpg\"&&&&&&车辆编号&/td&&/tr&";
&&&if(page&&&0&&&&page&&=&getPageNum())
&&&var&star_n&=&(page&-&1)&*&list_NUM;
&&&var&end_n&&=&page&*&list_NUM&-&1;
&&&if(star_n&&&0)
&&&star_n&=&0
&&&if(end_n&&=&tempArray.length)
&&&end_n&=&tempArray.length&-&1;
&&&for(var&i&=&star_n&;&i&&=&end_n&;&i++)
&&&htmlStr&+=&"&tr&&td&&&&&&image&src=\"images/point.gif\"&&&&a&href=\"javascript:showCarInfo("&+&tempArray[i].id&+&")\"&"&+&tempArray[i].cph&+&"&/a&&/td&&/tr&";
&&&&&&&&&&&//htmlStr&+=&"&tr&height=30&&/tr&&tr&&td&&&&&&a&href=\"javascript:showCars("&+&(page&-1&)&+&")\"&上一页&/a&&&&a&href=\"javascript:showCars("&+&(page&+&1)&+&")\"&下一页&/a&&&共有&"&+&getPageNum()&+&"&页&/td&&/tr&&/table&";
&&&&&&&&&&&if&(getPageNum()==1)
&&&&&&&&&&&&&&&&htmlStr&+=&"&/table&";
&&&&&&&&&&&else&if&(page&==1)
&&&&&&&&&&&&&&&&htmlStr&+=&"&tr&height=30&&/tr&&tr&&td&&&&&&a&href=\"javascript:showCars("&+&(2)&+&")\"&下一页&/a&&&共有&"&+&getPageNum()&+&"&页&/td&&/tr&&/table&";
&&&&&&&&&&&else&if&(page&==&getPageNum())
&&&&&&&&&&&&&&&&htmlStr&+=&"&tr&height=30&&/tr&&tr&&td&&&&&&a&href=\"javascript:showCars("&+&(getPageNum()&-1&)&+&")\"&上一页&/a&&&共有&"&+&getPageNum()&+&"&页&/td&&/tr&&/table&";
&&&&&&&&&&&else
&&&&&&&&htmlStr&+=&"&tr&height=30&&/tr&&tr&&td&&&&&&a&href=\"javascript:showCars("&+&(page&-1&)&+&")\"&上一页&/a&&&&a&href=\"javascript:showCars("&+&(page&+&1)&+&")\"&下一页&/a&&&共有&"&+&getPageNum()&+&"&页&/td&&/tr&&/table&";
&document.all.htmlCar.innerHTML&=&htmlS
&function&stringToArray(value)
&&&var&car_v1&=&value.split("&");
&&&for(i=0;i&car_v1.i++)
&&&&&&cars[i]&=&new&car(car_v1[i].split(",")[0]&,&car_v1[i].split(",")[1]);
&&&tempArray&=&
&function&SearchByCHP()
&&&var&cph=document.all.search_cph.
&&&if(cph.length&0)
&&&tempArray&=&
&&&tempArray&=&new&Array();
&&&&&&&for(i=0;i&cars.i++)
&&&&&if(cars[i].cph.indexOf(cph)&=0)
&&&&tempArray[tempArray.length]=cars[i];
&&&showCars(1);
&alert("请输入车牌号码！");
&function&showAllCHP()
&&&&tempArray&=&
tempArray&=&new&Array();
tempArray&=&
showCars(1);
&&&&/script&
&#xe60a;回复jQuery简单分页样式代码
相关最新源码
jQuery简单分页样式代码基于jquery-1.8.3.min.js制作，根据总页数进行分页操作，代码附带详细中文注释，方便修改。
&&&&&&&&&&&&&&&&&&&&&&&&&
源码下载地址