最近练习了一些AJAX无刷新分页,写得比较简单,性能不知道怎么样,求大神指点,如有更好的分页提供,欢迎交流!
发话不多说了,直接上代码!
首先从网上下了一个JS分页,感觉挺好用的
1 (function($) { 2 //设定页码方法，初始化 3 $.fn.setPager = function(options) { 4 //合并PagerDefaults和options 5 var opts = $.extend({}, pagerDefaults, options); 6 7 return this.each(function() { 8 //修改,能够动态设置PageSize 9 pagerDefaults.PageSize = options.PageSize; 10 11 //先清空后添加(调用自定义的setPagerHtml方法) 12 $(this).empty().append(setPagerHtml(parseInt(options.RecordCount), parseInt(options.PageIndex), options.buttonClick)); 13 14 $('.pager a').mouseover(function() { document.body.style.cursor = "pointer"; }).mouseout(function() { document.body.style.cursor = "auto"; }); 15 }); 16 }; 17 18 //设定页数及html 19 //参数1:总条目数 20 //参数2:当前页 21 //参数3:页码按钮 22 function setPagerHtml(RecordCount, PageIndex, pagerClick) { 23 //调用pager样式表 24 var $content = $("<div class=\"pager\"></div>"); 25 26 //起始页 27 var startPageIndex = 1; 28 29 //若没有条目数,则按 pagerDefaults.PageSize = options.PageSize;选择的条目数来算 30 if (RecordCount <= 0) RecordCount = pagerDefaults.PageSize; 31 32 //页尺寸 33 var PageSize = pagerDefaults.PageSize; 34 //alert(pagerDefaults.PageSize); 35 36 //末页 37 var endPageIndex = parseInt(RecordCount % parseInt(PageSize)) > 0 ? parseInt(RecordCount / parseInt(PageSize)) + 1 : RecordCount / parseInt(PageSize); 38 39 //当前页若大于末页,则等于末页 40 if (PageIndex > endPageIndex) PageIndex = endPageIndex; 41 42 //当前页小于0,则等于起始页 43 if (PageIndex <= 0) PageIndex = startPageIndex; 44 45 //下一页 46 var nextPageIndex = PageIndex + 1; 47 48 //上一页 49 var prevPageIndex = PageIndex - 1; 50 51 //当前页等于首页 52 if (PageIndex == startPageIndex) { 53 //生成不能点击的首页和上一页 54 $content.append($("<span>首页</span>")); 55 $content.append($("<span>上一页</span>")); 56 } else { 57 //生成一个首页和上一页按钮 58 $content.append(renderButton(RecordCount, 1, pagerClick, "首页")); 59 $content.append(renderButton(RecordCount, prevPageIndex, pagerClick, "上一页")); 60 } 61 62 //这里判断是否显示页码 63 if (pagerDefaults.ShowPageNumber) { 64 // var html = ""; 65 //页码部分隐藏 只显示中间区域 66 if (endPageIndex <= 5 && PageIndex <= 5) { 67 for (var i = 1; i <= endPageIndex; i++) { 68 if (i == PageIndex) { 69 //生成不可点击的页码,也可用于设置样式,加粗 70 $content.append($("<span>" + i + "</span>")); 71 } else { 72 //生成可点击的页码 73 $content.append(renderButton(RecordCount, i, pagerClick, i)); 74 } 75 76 } 77 78 } 79 //生成< 首页 上一页 ...3 4 5 6 7 下一页 末页 >格式 80 else if (endPageIndex > 5 && endPageIndex - PageIndex <= 2) { 81 82 $content.append($("<a>...</a>")); 83 for (var i = endPageIndex - 4; i <= endPageIndex; i++) { 84 if (i == PageIndex) { 85 $content.append($("<span>" + i + "</span>")); 86 } else { 87 $content.append(renderButton(RecordCount, i, pagerClick, i)); 88 } 89 90 } 91 } 92 //生成< 首页 上一页 ... 2 3 4 5 6 ... 下一页 末页 >格式 93 else if (endPageIndex > 5 && PageIndex > 3) { 94 95 $content.append($("<a>...</a>")); 96 for (var i = PageIndex - 2; i <= PageIndex + 2; i++) { 97 if (i == PageIndex) { 98 $content.append($("<span>" + i + "</span>")); 99 } else { 100 $content.append(renderButton(RecordCount, i, pagerClick, i)); 101 } 102 103 } 104 $content.append($("<a>...</a>")); 105 106 } 107 //生成< 首页 上一页 1 2 3 4 5 ... 下一页 末页 >格式 108 else if (endPageIndex > 5 && PageIndex <= 3) { 109 110 for (var i = 1; i <= 5; i++) { 111 if (i == PageIndex) { 112 $content.append($("<span>" + i + "</span>")); 113 } else { 114 $content.append(renderButton(RecordCount, i, pagerClick, i)); 115 } 116 117 } 118 $content.append($("<a>...</a>")); 119 } 120 } 121 //当前页等于末页 122 if (PageIndex == endPageIndex) { 123 //生成不能点击的下一页和末页 124 $content.append($("<span>下一页</span>")); 125 $content.append($("<span>末页</span>")); 126 } else { 127 //生成一个下一页和末页按钮 128 $content.append(renderButton(RecordCount, nextPageIndex, pagerClick, "下一页")); 129 $content.append(renderButton(RecordCount, endPageIndex, pagerClick, "末页")); 130 } 131 //返回生成的分页 132 return $content; 133 } 134 135 //生成页码 136 //参数1:总条目数 137 //参数2:指定页 138 //参数3:页码按钮 139 //参数4:指定页文本 140 function renderButton(recordCount, goPageIndex, EventHander, text) { 141 var $goto = $("<a title=\"第" + goPageIndex + "页\">" + text + "</a>\""); 142 $goto.click(function() { 143 144 EventHander(recordCount, goPageIndex, pagerDefaults.PageSize); 145 }); 146 return $goto; 147 } 148 149 //pagerDefaults变量 150 var pagerDefaults = { 151 // 152 DefaultPageCount: 1, 153 154 //当前页 155 DefaultPageIndex: 1, 156 157 //总条目数 158 PageSize: 20, 159 160 //是否显示页码 161 ShowPageNumber: true 162 }; 163 })(jQuery);