最近项目里大量使用Ajax组合分页，借此也在网上学习了很多关于Ajax和分页的知识，相对于文字，我更适合直接看源码，可是网上很多文章废话太多，贴的代码还不能实现。今天这篇博客主要介绍分页的原理及样式上
最近项目里大量使用Ajax组合分页，借此也在网上学习了很多关于Ajax和分页的知识，相对于文字，我更适合直接看源码，可是网上很多文章废话太多，贴的代码还不能实现。今天这篇博客主要介绍分页的原理及样式上的实现。后面会介绍Ajax的实现。话不多说，直接上效果图吧……
。
这个效果大家如果看不明白，我也没什么好说的了。
这个样式其实主要是通过 js 向页面绘制出来，每次触发 click 事件的时候都会清空该区域，然后重新绘制。并通过页面隐藏域保留状态值。和Ajax原理其实差不多。
下面是html代码：
<!doctype html><html><head><meta charset="utf-8"><title>html分页显示</title><script type="text/javascript" src="jquery-2.1.3.min.js"></script><script type="text/javascript" src="paging_red.js"></script><style type="text/css">#pageNumberUpAndDown{ position: absolute; left: 100px; top: 229px;}a{ text-decoration:none; }.pagination{ width:953px; height:30px; overflow:hidden; text-align:right; margin-top:20px; padding-top:10px; line-height:22px;}.pagination a{ border:1px solid #c5c5c5; padding:6px 8px; color:#7E858B;}.pagination a:hover{background:#999;}.pagination a.selected{ background:#ff534f; color:#FFF; border:1px solid #ff534f;}.page-text{ width:35px; height:21px; margin:0px 5px; border:1px solid #c5c5c5; text-align:center;}.button-qd{ width: 48px; height: 25px;border:1px solid #c5c5c5; background:none; font-family:"黑体" ; color:#7E858B; cursor:pointer }</style></head><body> <input type="hidden" id="allPageSize" value=70> <input type="hidden" id="pageNum" value=1> <input type="hidden" id="pageSize" value=10 /> <input type="hidden" id="worksTypeId" value=""> <div id="pageNumberUpAndDown"> </div></body></html><div id="pageNumberUpAndDown">分页的按钮都是绘制在该 div 下。
<script type="text/javascript" src="jquery-2.1.3.min.js"></script><script type="text/javascript" src="paging_red.js"></script>导入外部 js ，jQuery使用1.9以上版本。项目里的 UI 使用的是1.4的版本，导致我们写的代码出现很多兼容问题。这里我使用的2.1.3版本，是官网下载的最新版。
下面是 paging_red.js 的全部内容，我加了很多注释，应该不难看懂，里面我使用了很多状态判断，这也是我个人比较喜爱的一种编程方式。不过确实可读性会比较差。
// JavaScript Document$(document).ready(function(){ var v = $('#allPageSize').val(); $('#allPageSize').val(v);//设置总行数 pageSize();});function pageSize(){ //总数 var allSize = $('#allPageSize').val(); //每页显示条数 var pageSize = $('#pageSize').val(); //当前页码 var pageNum = $('#pageNum').val(); //基数，表示页数 var base = Math.ceil(allSize/pageSize); //储存分页元素 var info = ''; //当且仅当一页显示不完全部数据时 if(allSize > pageSize){ var index = pageNum; var i = 1; if(pageNum>1){ index--; if(pageNum<=base&&pageNum>base-2){//确保除掉base页，始终只有三页 index = base-2; } }else{ index = 1; } info += '<div class="pagination">'; //当前页不为第一页时显示上一页 if(pageNum!=1){ info += '<a href="JavaScript:void(0);" name="-1">上一页</a> '; } while(index<=base&&i<4){ if(index==pageNum){//当前页 info += '<a href="JavaScript:void(0);" id="pageNum'+index+'" class="selected" name='+index+'>'+index+'</a> '; }else{ info += '<a href="JavaScript:void(0);" id="pageNum'+index+'" name='+index+'>'+index+'</a> '; } i++; index++; } if(index < base){ info += '<span >...</span> '; } if(pageNum < base-1&&base != 3){//确保最后一页必须且只显示一次 info += '<a href="JavaScript:void(0);" name='+base+'>'+base+'</a> '; } //当前页不为最后一页时显示下一页 if(pageNum!=base){ info += '<a href="JavaScript:void(0);" name="0">下一页</a> '; } info += '<span>到<input name="" type="text" class="page-text"/>页</span> '; info += '<span><input name="" type="button" value="确定" class="button-qd" /></span></div>'; } $('#pageNumberUpAndDown').append(info);}$(document).ready(function(){ $(document).on('click','.pagination a',function(){ var num = $(this).attr("name"); var pageNum = $('#pageNum').val(); $('#pageNumberUpAndDown').html(''); if(num > 0){//页码点击 $('#pageNum').val(num); pageSize(); }else{ //num=0 : 下一页，否则，表示上一页 var index = num==0?++pageNum:pageNum-1; $('#pageNum').val(index); pageSize(); } }); //通过输入页码，跳转页面 $(document).on('click','.button-qd',function(){ var allSize = $('#allPageSize').val(); var size = $('#pageSize').val(); var base = Math.ceil(allSize/size); var num = $('.page-text').val(); if(num<=base&&num>0){ $('#pageNumberUpAndDown').html(''); $('#pageNum').val(num); pageSize(); $('#pageNum'+num).click(); }else{ alert("'"+num+"':"+"不在查询范围内，请重新输入……"); $('.page-text').val(''); } }); $(document).on('click','.pagination a',function(){ var num = $('#pageNum').val(); alert(num); }); });该 js 里很多地方都使用到了
$('#pageNum').val();这是保存当前页码的隐藏域，正是通过它实现了分页各个方法之间的连接。
$(document).on('click','.pagination a',function(){ var num = $('#pageNum').val(); alert(num); });最下面的这个 click 监听，则是为了实现对于页码的每次变化做出反应动作。我们这种分页的方式就是为了组合上 Ajax ，实现异步请求数据。而所有Ajax的代码都可以放在这段 监听里。因为我觉得分页和Ajax 是应该分开的，它们可以单独出现。所以有关Ajax的内容，我很快会在下一篇博客里更新。上面的代码 copy 出来就可以直接运行。通过断点不断的调试才是王道。
应该之前写过一次分页，所以这次写起来并不困难，都是手写的，希望有一天能帮到大家，毕竟总是从大家那里偷取知识长了，多少也得自己贡献点。嘿嘿
