javascript分页源代码

来源：互联网发布：淘宝补差价编辑：程序博客网时间：2024/06/05 00:53

分页这东西几乎在所有的B/S项目中都会用到，我把最近自己在项目中写的分页代码独立出来。在代码中我添加了部分注解，不明白的可以留言。

js代码

/***total:总共多少分页*now:当前页码*id:接受添加分页按钮的ID*/function createPagedButton(total,now, id) {if(now<=0 || now>total) {return;}var $o = $("#" + id);$o.empty();var c = 1;//添加首页按钮var span = $("<span class=\"paged\" onclick=\"gotoPage(1,'" + id + "'," + total + ")\"><<首页</span>");span.css("width", "65px");$o.append(span);//添加上一页按钮span = $("<span class=\"paged\" onclick=\"nextPage(-1,'" + id + "'," + total + ")\"><上一页</span>");span.css("width", "65px");$o.append(span);//计算从第几页开始创建分页按钮，之所以要用now-5是因为我设定成最多可以显示11个分页按钮var t = now - 5;t = total-t>=10?t:total-10;t = t<=0?1:t;if(t > 1) {$o.append("<span class=\"paged\">…</span>");}while(t < now) {span = $("<span class=\"paged\" onclick=\"everyPage(this,'" + id + "'," + total + ");\">" + t + "</span>");$o.append(span);t++;c++;}$o.append("<span class=\"paging\">" + now + "</span>");c++;t = now+1;while(t<=total) {if(c>11) {$o.append("<span class=\"paged\">…</span>");break;}span = $("<span class=\"paged\" onclick=\"everyPage(this,'" + id + "'," + total + ");\">" + t + "</span>");$o.append(span);t++;c++;}//添加下一页按钮span = $("<span class=\"paged\" onclick=\"nextPage(1,'" + id + "'," + total + ")\">下一页></span>");span.css("width", "65px");$o.append(span);//添加尾页页按钮span = $("<span class=\"paged\" onclick=\"gotoPage("+total+",'" + id + "'," + total + ")\">尾页>></span>");span.css("width", "65px");$o.append(span);$o.append("<span>第" + now + "页/共" + total + "页</span>");}/***obj:响应事件的按钮DOM对象*id:接受添加分页按钮的ID*total:总共多少分页*/function everyPage(obj, id, total) {var nowpage = obj.innerHTML - 0;createPagedButton(total, nowpage, "bsssu");}/***num：-1上一页、1下一页*id:接受添加分页按钮的ID*total:总共多少分页*/function nextPage(num, id, total) {var nowpage = $(".paging").text() - 0;nowpage += num;createPagedButton(total, nowpage, "bsssu");}/***num:跳到那一页*id:接受添加分页按钮的ID*total:总共多少分页*/function gotoPage(num, id, total) {createPagedButton(total, num, "bsssu");}function test() {createPagedButton($("#total").val(), 1, "bsssu");}

分页按钮css样式

<style>.paged{border:2px solid #EFEFEF; width:25px; height:20px; text-align:center; cursor:pointer; float:left; margin-right:3px;}.paging{width:25px; height:20px; text-align:center; float:left; margin-right:3px; color:#00F;}.paged:hover{ background-color:#F7F7F7;}</style>

注意：本代码依赖于jquery

html测试代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script src="jquery-1.7.1.min.js"></script><script src="paged.js"></script><style>.paged{border:2px solid #EFEFEF; width:25px; height:20px; text-align:center; cursor:pointer; float:left; margin-right:3px;}.paging{width:25px; height:20px; text-align:center; float:left; margin-right:3px; color:#00F;}.paged:hover{ background-color:#F7F7F7;}</style></head><body>    分页按钮数量:<input type="text" id="total" value="5" />    <input type="button" onclick="test();" value="测试按钮" /><div id="bsssu">    <span class="paged">1</span>        <span class="paged">2</span>        <span class="paged">3</span>        <span class="paging">4</span>        <span class="paged">5</span>        <span class="paged">6</span>        <span class="paged" value="7" id="ac">7</span>   </div></body></html>