易网时代-编程资源站
易网时代-编程资源站 
基本的分页UI
看到上面的基本ui，不知道大家会想到什么样的html结构。对于我们开发人员来说，html和css要越简单越好，所以最基本的html结构无非就是a标签和span标签的混合，有的同学可能会想到使用ul，li标签，但这其实增加的复杂度，得不偿失。我们编写html代码如下：
<div class="pager"><span class="flip noPage">上一页</span><span class="curPage">1</span><a page="1" href="javascript:;">2</a><a page="2" href="javascript:;">3</a><a page="3" href="javascript:;">4</a><span>...</span> <a href="javascript:;" page="8">9</a> <a page="1" href="javascript:;" class="flip">下一页</a></div>这是最基本html代码结构，包含了分页插件的容器div.pager，当前页span.curPage，其他页码a标签，上一页，下一页等按钮。
.pager { display: inline-block; font: 12 px/21px "宋体"; margin-top: 20px; }.pager a, .pager .flip, .pager .curPage { border: 1px solid #e3e3e3; display: inline-block; height: 22px; line-height: 22px; text-align: center; }.pager a { background: none repeat scroll 0 0 #fff; color: #010101; text-decoration: none; width: 26px; }.pager a:hover { background: none repeat scroll 0 0 #f1f1f1; }.pager .noPage { color: #a4a4a4; }.pager .curPage { background: none repeat scroll 0 0 #49abde; color: #ffffff; width: 26px; }.pager .flip { width: 56px; } 编写js代码; （function （$, window, document, undefined） {"use strict";var defaults = {pageIndex: 0,pageSize: 6,itemCount: 50,maxButtonCount: 7,prevText: "上一页",nextText: "下一页",buildPageUrl: null,onPageChanged: null}; $.fn.pager = function （options） {options = $.extend（defaults, options || {}）;}}）（jQuery, window, document）; 这里主要提供了一些可选参数的默认值，比如页码默认为0，每页数量6条等等。; （function （$, window, document, undefined） {"use strict";var defaults = {pageIndex: 0,pageSize: 6,itemCount: 50,maxButtonCount: 7,prevText: "上一页",nextText: "下一页",buildPageUrl: null,onPageChanged: null};function Pager（$ele, options） {this.$ele = $ele;this.options = options = $.extend（defaults, options || {}）;this.init（）;}Pager.prototype = {constructor: Pager,init: function （） {this.renderHtml（）;this.bindEvent（）;},renderHtml: function （） {var options = this.options;options.pageCount = Math.ceil（options.itemCount / options.pageSize）;var html = [];//生成上一页的按钮if （options.pageIndex > 0） {html.push（"<a page="" + （options.pageIndex - 1） + "" href="" + this.buildPageUrl（options.pageIndex + 1） + "" class="flip">" + options.prevText + "</a>"）;} else {html.push（"<span class="flip noPage">" + options.prevText + "</span>"）;}//这里是关键//临时的起始页码中间页码，当页码数量大于显示的最大按钮数时使用var tempStartIndex = options.pageIndex - Math.floor（options.maxButtonCount / 2） + 1;//计算终止页码，通过max计算一排按钮中的第一个按钮的页码，然后计算出页数量var endIndex = Math.min（options.pageCount, Math.max（0, tempStartIndex） + options.maxButtonCount） - 1;var startIndex = Math.max（0, endIndex - options.maxButtonCount + 1）;// 第一页if （startIndex > 0） {html.push（"<a href="" + this.buildPageUrl（0） + "" page="" + 0 + "">1</a> "）;html.push（"<span>...</span>"）;}//生成页码按钮for （var i = startIndex; i <= endIndex; i++） {if （options.pageIndex == i） {html.push（"<span class="curPage">" + （i + 1） + "</span>"）;} else {html.push（"<a page="" + i + "" href="" + this.buildPageUrl（options.pageIndex + 1） + "">" + （i + 1） + "</a>"）;}}// 最后一页if （endIndex < options.pageCount - 1） {html.push（"<span>...</span> "）;html.push（"<a href="" + this.buildPageUrl（options.pageCount - 1） + "" page="" + （options.pageCount - 1） + "">" + options.pageCount + "</a> "）;}//生成下一页的按钮if （options.pageIndex < options.pageCount - 1） {html.push（"<a page="" + （options.pageIndex + 1） + "" href="" + this.buildPageUrl（options.pageIndex + 1） + "" class="flip">" + options.nextText + "</a>"）;} else {html.push（"<span class="flip noPage">" + options.nextText + "</span>"）;}this.$ele.html（html.join（""））;},bindEvent: function （） {var that = this;that.$ele.on（"click", "a", function （） {that.options.pageIndex = parseInt（$（this）.attr（"page"）, 10）;that.renderHtml（）;that.options.onPageChanged && that.options.onPageChange（that.options.pageIndex）;}）},buildPageUrl: function （） {if （$.isFunction（this.options.buildPageUrl）） {return this.options.buildPageUrl（pageIndex）;}return "javascript:;";} };$.fn.pager = function （options） {options = $.extend（defaults, options || {}）;return new Pager（$（this）, options）;}}）（jQuery, window, document）; 这段代码中有两个关键点要记住：getPageIndex: function （） {return this.options.pageIndex;},setPageIndex: function （pageIndex） {this.options.pageIndex = pageIndex;this.renderHtml（）;},setItemCount: function （itemCount） {this.options.pageIndex = 0;this.options.itemCount = itemCount;this.renderHtml（）;} 提供了这三个api，假设用户需要跳转页码的功能，可以直接使用setPageIndex方法来跳转，UI完全由用户自定义，插件本身只专注基本功能，不干涉其它。