易网时代-编程资源站
易网时代-编程资源站 /*** This jQuery plugin displays pagination links inside the selected elements.** @author Gabriel Birke （birke *at* d-scribe *dot* de）* @version 1.2* @param {int} maxentries Number of entries to paginate* @param {Object} opts Several options （see README for documentation） * @return {Object} jQuery Object */ jQuery.fn.pagination = function（maxentries, opts）{ opts = jQuery.extend（{ items_per_page:10, num_display_entries:10, current_page:0, num_edge_entries:0, link_to:"#", prev_text:"Prev", next_text:"Next", ellipse_text:"...", prev_show_always:true, next_show_always:true, callback:function（）{return false;}},opts||{}）; return this.each（function（） { /** * 计算最大分页显示数目*/ function numPages（） { return Math.ceil（maxentries/opts.items_per_page）;} /** * 极端分页的起始和结束点，这取决于current_page 和 num_display_entries. * @返回 {数组（Array）}*/function getInterval（） {var ne_half = Math.ceil（opts.num_display_entries/2）; var np = numPages（）;var upper_limit = np-opts.num_display_entries; var start = current_page>ne_half?Math.max（Math.min（current_page-ne_half, upper_limit）, 0）:0; var end = current_page>ne_half?Math.min（current_page+ne_half, np）:Math.min（opts.num_display_entries, np）; return [start,end];} /** * 分页链接事件处理函数 * @参数 {int} page_id 为新页码*/ function pageSelected（page_id, evt）{ current_page = page_id;drawLinks（）;var continuePropagation = opts.callback（page_id, panel）; if （！continuePropagation） {if （evt.stopPropagation） {evt.stopPropagation（）;}else { evt.cancelBubble = true;}}return continuePropagation; }/*** 此函数将分页链接插入到容器元素中 */function drawLinks（） {panel.empty（）;var interval = getInterval（）; var np = numPages（）;// 这个辅助函数返回一个处理函数调用有着正确page_id的pageSelected。 var getClickHandler = function（page_id） {return function（evt）{ return pageSelected（page_id,evt）; }}//辅助函数用来产生一个单链接（如果不是当前页则产生span标签）var appendItem = function（page_id, appendopts）{page_id = page_id<0?0:（page_id<np?page_id:np-1）; // 规范page id值appendopts = jQuery.extend（{text:page_id+1, classes:""}, appendopts||{}）;if（page_id == current_page）{var lnk = jQuery（"<a href class="currentPage">" + （appendopts.text） + "</a>"）;}else{ var lnk = jQuery（"<a>"+（appendopts.text）+"</a>"）.bind（"click", getClickHandler（page_id））.attr（"href", opts.link_to.replace（/__id__/,page_id））;} if （appendopts.classes） { lnk.addClass（appendopts.classes）; } panel.append（lnk）;} //产生描述panel.append（"<span>共有 " + maxentries + " 条记录，当前第 <b>" + （current_page + 1） + "</b>/" + np + " 页</span>"）; // 产生"Previous"-链接 if（opts.prev_text && （current_page > 0 || opts.prev_show_always））{ appendItem（current_page-1,{text:opts.prev_text, classes:"prev"}）; } // 产生起始点 if （interval[0] > 0 && opts.num_edge_entries > 0） { var end = Math.min（opts.num_edge_entries, interval[0]）; for（var i=0; i<end; i++） { appendItem（i）; } if（opts.num_edge_entries < interval[0] && opts.ellipse_text） { jQuery（"<a href>"+opts.ellipse_text+"</a>"）.appendTo（panel）;} } // 产生内部的些链接 for（var i=interval[0]; i<interval[1]; i++） { appendItem（i）; }// 产生结束点 if （interval[1] < np && opts.num_edge_entries > 0）{ if（np-opts.num_edge_entries > interval[1]&& opts.ellipse_text）{ jQuery（"<a href>"+opts.ellipse_text+"</a>"）.appendTo（panel）; } var begin = Math.max（np-opts.num_edge_entries, interval[1]）; for（var i=begin; i<np; i++） { appendItem（i）; } } // 产生 "Next"-链接 if（opts.next_text && （current_page < np-1 || opts.next_show_always））{ appendItem（current_page+1,{text:opts.next_text, classes:"next"}）; }}//从选项中提取current_page var current_page = opts.current_page; //创建一个显示条数和每页显示条数值maxentries = （！maxentries || maxentries < 0）?1:maxentries; opts.items_per_page = （！opts.items_per_page || opts.items_per_page < 0）?1:opts.items_per_page; //存储DOM元素，以方便从所有的内部结构中获取 var panel = jQuery（this）; // 获得附加功能的元素 this.selectPage = function（page_id）{ pageSelected（page_id）;} this.prevPage = function（）{if （current_page > 0） { pageSelected（current_page - 1）; return true; } else {return false;}}this.nextPage = function（）{ if（current_page < numPages（）-1） {pageSelected（current_page+1）; return true;}else {return false; }}// 所有初始化完成，绘制链接 drawLinks（）; // 回调函数 //opts.callback（current_page, this）;}）;}代码还是比较容易看明白的，可以根据自己需要修改，这里使用的是自己的样式 .pages {display: inline-block; overflow: hidden;padding: 15px 0;text-align: center; width:100%; margin:50px 0;} .pages b{ color:#e75f49;} .pages a { color:#666; border: 1px solid #e5e5e5;cursor: pointer;font-size: 12px;margin-right: 5px; padding: 8px 12px; text-decoration: none; background-color:#fafafa;} .pages .currentPage{ background-color: #00a0e9; border: 1px solid #00a0e9;color: #fff; font-weight: bold;}显示效果如下： 
原来的css样式：
.pagination a { text-decoration: none;border: 1px solid #AAE;color: #15B; } .pagination a, .pagination span {display: inline-block; padding: 0.1em 0.4em;margin-right: 5px; margin-bottom: 5px; } .pagination .current { background: #26B; color: #fff; border: 1px solid #AAE; } .pagination .current.prev, .pagination .current.next{color:#999;border-color:#999;background:#fff; }可以根据自己设计显示样式<div class="second-ul-ctn"> <ul class="second-ul" id="ulProducts"> </ul><div class="pages"> <input type="hidden" id="hideTotalCount" /><div id="Pagination" class="pagination"></div> </div></div>ulProducts中放的是要显示的数据，生成的分页的工具条是放在Pagination中的
$（function （） { searchMyme（0）; pageInit（）; $（"#btnSearch"）.on（"click", function （） {searchMyme（0）;pageInit（）;return false; }）;}）;function searchMyme（page, pageination） { var month = $（"#btnMonth"）.val（）; var obj = {Month: month,OpType: "getme",page: （page + 1）, rows: 10 }; var url = "../../Controler/FinaceMo/GetStaffIncome_H.ashx"; $.get（url, obj, function （data） {$（"#tbIncome"）.empty（）;var obj = JSON.parse（data）;var total = obj.Total;$（"#hideTotalCount"）.val（total）;var arrHtml = [];$.each（obj.Rows, function （i, data） { arrHtml.push（"<tr><td>" + （i + 1） + "</td>"）; arrHtml.push（"<td>" + data.Account + "</td>"）; arrHtml.push（"<td>" + data.Name + "</td>"）; arrHtml.push（"<td>" + data.Month + "</td>"）; arrHtml.push（"<td>" + data.IncomeAmount + "</td>"）; arrHtml.push（"<td><a href="MyDetail.aspx?Account="+data.Account+"&Month="+data.Month+"" class="a-blue">查看明细</a></td></tr>"）;}）;$（"#tbIncome"）.append（arrHtml.join（""））; }）;};function pageInit（） { var totalCount = $（"#hideTotalCount"）.val（）; $（"#Pagination"）.pagination（parseInt（totalCount）, {items_per_page: 10,//current_page: 1,//当前选中的页面默认是0，表示第1页num_edge_entries: 2,//两侧显示的首尾分页的条目数,默认为0，好像是尾部显示的个数num_display_entries: 2,//连续分页主体部分显示的分页条目数,默认是10link_to: "javascript:void（0）",//分页的链接prev_text: "上一页",next_text: "下一页",prev_show_always: true,next_show_always: true,callback: searchMyIncome }）;}searchMyme是获取分页的数据，将总数放到一个隐藏的控件中，总数分页控件需要使用，这里ajax调用需要同步执行，不然取不到返回的总数pageInit（） 就是初始化控件，这样设置基本就OK了。