首页 / 脚本样式 / jQuery / jquery小分页插件，类似aspnetpager的用法

1 /*
2 -- =============================================
3 -- Author:<yyliuliang@gmail.com>
4 -- Create date: <2008-12>
5 -- =============================================
6 */
7 （function（$） {
8 
9 $.fn.pager = function（recordCount, options） {
 10 
 11 var defaults = {
 12 //只有一页时是否仍然显示
 13 alwaysShow: true,
 14 width: "95%",
 15 currentPageIndex: 1,
 16 pageSize: 10,
 17 //button or number
 18 pagerStyle: "button",
 19 onPageIndexChanged: function（） { }
 20 };
 21 var parent = this;
 22 var props = $.extend（defaults, options）;
 23 var pageCount = Math.ceil（（recordCount / props.pageSize））;
 24 
 25 //当数据不满一页时，是否显示pager
 26 if （recordCount > props.pageSize || props.alwaysShow） {
 27 var text = "<table width="" + props.width + ""><tr><td align="left">";
 28 
 29 text += "记录数:" + recordCount + " 页数:" + props.currentPageIndex + "/" + pageCount + " 每页" + props.pageSize + "条";
 30 text += "</td><td align="right"> ";
 31 if （props.pagerStyle === "button"） {
 32 text += "<a id="pagerfirst">首页</a> ";
 33 text += "<a id="pagerprev">上页</a> ";
 34 text += "<a id="pagernext">下页</a> ";
 35 text += "<a id="pagerlast">末页</a> ";
 36 }
 37 
 38 if （props.pagerStyle === "number"） {
 39 ///TODO
 40 }
 41 
 42 text += "<input id="pagernumber" style="width:18px;font-size:11px" /><input type="button" value="GO" style="width:22px;font-size:11px" id="pagerbutton" />";
 43 text += "</td></tr></table>";
 44 
 45 this.html（text）;
 46 
 47 $（"#pagernumber"）.val（props.currentPageIndex）;
 48 
 49 
 50 $（"#pagerbutton"）.click（function（） {
 51 var i = $（"#pagernumber"）.val（）;
 52 if （i < 1 || i > pageCount || ！/^d+$/.test（i）） {
 53 alert（"请输入正确的页数"）;
 54 return false;
 55 }
 56 props.currentPageIndex = i;
 57 raisePageIndexChangedEvent（i）;
 58 }）;
 59 
 60 if （props.currentPageIndex > 1） {
 61 
 62 $（"#pagerfirst"）.attr（"href","javascript:void（0）;"）.click（function（） {
 63 raisePageIndexChangedEvent（1）;
 64 }）;
 65 
 66 $（"#pagerprev"）.attr（"href","javascript:void（0）;"）.click（function（） {
 67 raisePageIndexChangedEvent（--props.currentPageIndex）;
 68 }）;
 69 }
 70 else {
 71 $（"#pagerfirst"）.css（{"color":"gray","text-decoration":"none"}）;
 72 $（"#pagerprev"）.css（{"color":"gray","text-decoration":"none"}）;
 73 }
 74 
 75 if （props.currentPageIndex < pageCount） {
 76 $（"#pagernext"）.attr（"href","javascript:void（0）;"）.click（function（） {
 77 raisePageIndexChangedEvent（++props.currentPageIndex）;
 78 }）;
 79 
 80 $（"#pagerlast"）.attr（"href","javascript:void（0）;"）.click（function（） {
 81 raisePageIndexChangedEvent（pageCount）;
 82 }）;
 83 }
 84 else {
 85 $（"#pagernext"）.css（{"color":"gray","text-decoration":"none"}）;
 86 $（"#pagerlast"）.css（{"color":"gray","text-decoration":"none"}）;
 87 }
 88 
 89 }
 90 
 91 function render（） {
 92 }
 93 
 94 
 95 function raisePageIndexChangedEvent（pageIndex） {
 96 props.onPageIndexChanged（pageIndex）;
 97 }
 98 };
 99 
100 }）（jQuery）;