改写Jquery的一个分页插件

最近网上看到一个JQuery的一个分页插件，个人感觉，插件这些东西，用起来不一定附和自己的风格，所以就在这个插件基础上改写了一下，按照自己兴趣做了一下修改；修改后的插件（严格说不规范的插件），使用起来会比较简单，只需要几步就可以完成整个分页操作：

1、导入jquery.js文件和分页插件文件；
2、页面中必须有一个<div class="mypagination"> </div> 作为存放分页控件的层。同时又一个层用于作为呈现，这个div的id可以

随便取，不过为了不会与别的页面控件id一样，可以尽量取有意义的id值；
3、在ready方法中添加代码，Paging(handleUrl, showField, showNameField, containerID, PageSize, ItemSize)来初始化页面;
其中：
handleUrl： 处理分页数据的url，可以带参数。
showField： 显示的字段，写*号表示所有字段都显示，各个字段间用逗号，分开。如：showField="id,name,department";
showNameField：显示的每个字段头的名称，在显示所有字段的情况下，这个头只显示字段名；格式与showField对应，如：

showNameField="id,名称,部门";
containerID：呈现数据的div的id值
PageSize：初始化每页显示大小
ItemSize：初始化每页显示控件页码的数量。

该控件handlerUrl的处理后返回是json对象数据，格式如下：
{'RecordCount':'1000','Data':[{'id':'111','name':'bill'},{'id':'123','name':'biao'}]}

数据库访问层可以使用存储过程返回数据集，并返回记录数，以便构造json数据时候可以设置RecordCount。

 

效果如下：

 

插件代码：jquery.pagination.js

var _PageSize = 10; //每页显示数量 var _ItemSize = 10; //按键数量 var _CurrentPage = 1; var _RecordCount = 0; var _ShowField = ""; var _ShowNameField = ""; var _ContainerID = ""; var _HandlerUrl = ""; Paging = function(handleUrl, showField, showNameField, containerID, pageSize, itemSize) { var flag = true; if (showField != "*" && showField != "" && showNameField != "*" && showNameField != "") { if (showField.split(",").length != showNameField.split(",").length) { flag = false; alert("参数不正确"); } } if (flag == true) { _PageSize = pageSize; _ItemSize = itemSize; _ShowField = showField; _ShowNameField = showNameField; _ContainerID = containerID; _HandlerUrl = handleUrl; GetData(); } }; GetUrl = function() { var pi = parseInt(_CurrentPage) - 1; var url = ""; var arg = "pi=" + pi + "&ps=" + _PageSize; if (_HandlerUrl.indexOf("?") != undefined && _HandlerUrl.indexOf("?") > 0) url = _HandlerUrl + "&" + arg; else url = _HandlerUrl + "?" + arg; return url; } GetData = function() { $("#" + _ContainerID).css("text-align", "center").html("<img src="images/wait.gif" mce_src="images/wait.gif" alt='' />"); var url = GetUrl(); $.ajax({ type: "get", url: url, dataType: "json", success: function(data) { GetDataSuccess(data); }, //成功时候调用另外一个函数 error: function(XMLHttpRequest, textStatus, errorThrown) { alert(XMLHttpRequest.responseText); } }); } GetDataSuccess = function(retData) { _RecordCount = retData.RecordCount; var data = retData.Data; if (data.length > 0) { if (showField == "" || showField == "*") { ShowAllInPage(data); } else { ShowFieldInPage(data); } } $("div[class='mypagination']").pagination(_RecordCount, _CurrentPage, { pageSize: _PageSize, itemSize: _ItemSize, callback: function(page) { //alert("选中第 " + page + " 页"); //return true; _CurrentPage = page; GetData(); return true; } }); //alert(eval("data[0].aa")); //alert(RecordCount); }; ShowAllInPage = function(data) { _ShowField = ""; _ShowNameField = ""; for (var key in data[0]) { //获取属性名 _ShowField += key + ","; _ShowNameField += key + ","; } if (_ShowField != "") { _ShowField = _ShowField.substr(0, _ShowField.length - 1); _ShowNameField = _ShowNameField.substr(0, _ShowNameField.length - 1); } ShowFieldInPage(data); //调用显示field函数 /* for (var i in data) { for (var key in data[i]) { //alert(key + ':' + data[i][key]); } } */ } ShowFieldInPage = function(data) { var fieldArray = _ShowField.split(","); //转换成数组 var nameArray = _ShowNameField.split(","); //alert(fieldArray[0]); var filld = ""; var value = ""; var html = ""; html += "<table cellpadding='0' cellspacing='1' border='0' width='100%'>"; html += "<tr class='listTitleClass'>"; for (var n in nameArray) { html += "<td>" + nameArray[n] + "</td>"; //alert(fieldArray[f]); } html += "</tr>"; for (var i in data) { html += "<tr class='listDataClass'>"; for (var f in fieldArray) { value = eval("data[" + i + "]." + fieldArray[f]); if (value == undefined) value = "数据出错了"; html += "<td>" + value + "</td>"; } html += "</tr>"; } html += "</table>"; //alert(html); $("#" + _ContainerID).html(html); $("#" + _ContainerID).find("table").find("tr.listDataClass:odd").each(function() { $(this).addClass("trodd"); //alert("dd"); }); } $.fn.pagination = function(totalProperty, currPage, opts) { opts = $.extend({ pageSize: 10, itemSize: 10, callback: function() { } }, opts || {}); var pages = new Array(); var synchronization = function(page) { for (var i = 0; i < pages.length; i++) { var tmp = pages[i]; tmp.synchronization(page); } } return this.each(function() { function numPages() { return Math.ceil(totalProperty / opts.pageSize); } function selectPage(page) { return function() { currPage = page; if (page < 1 || page > numPages()) { } else { var rs = opts.callback(page); if (rs) { synchronization(currPage); } } } } function createItems(itemSize, beginNum, pageNums) { //alert(itemSize); //alert(beginNum); //alert(pageNums); var html = ''; var num = 1; var size = itemSize; if (beginNum + itemSize > pageNums) { size = pageNums - beginNum + 1; } for (var i = 0; i < size; i++) { num = beginNum + i; if (num == currPage) { html += '<li><span>' + num + '</span></li>'; } else { html += '<li><a>' + num + '</a></li>'; } } return html; } function countBeginNum(pageNums, currPage) { if (pageNums <= opts.itemSize) { return 1; } else if (currPage > opts.itemSize / 2) { var beginNum = currPage - parseInt( opts.itemSize / 2); //防止奇数时候出现小数点页码；去除小数点取整 if (beginNum + opts.itemSize > pageNums) { beginNum = pageNums - opts.itemSize + 1; if (beginNum < 1) beginNum = 1; } return beginNum; } return 1; } function render() { var pageNums = numPages(); var itemsHtml = ''; var beginNum = countBeginNum(pageNums, currPage); if (pageNums > 0) { itemsHtml = createItems(opts.itemSize, beginNum, pageNums); } var html = '<div class="pagination">' + '<li class="page-frist"></li>' + '<li class="page-prev"></li>' + itemsHtml + '<li class="page-next"></li>' + '<li class="page-last"></li>' + '<li>   共' + pageNums + '页 ' + totalProperty + '条记录</li>' + '</div>'; panel.empty(); panel.append(html); $('li.page-frist', panel) .bind('click', selectPage(1)); $('li.page-prev', panel) .bind('click', selectPage(currPage - 1)); $('li.page-next', panel) .bind('click', selectPage(currPage + 1)); $('li.page-last', panel) .bind('click', selectPage(numPages())); $('a', panel).each( function() { var obj = $(this); var value = parseInt(obj.text()); obj.bind('click', selectPage(value)); }); } var panel = $(this); panel.synchronization = function(page) { currPage = page; render(); } render(); pages[pages.length] = panel; }); }

 测试页面：demo.htm

<!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> <title></title> <mce:style><!-- body { font-family: Verdana,Tahoma; font-size: 12px; } .pagination { text-align:center; } .pagination li { padding: 0; float: left; margin-right: 2px; display: block; cursor: pointer; } .pagination span { display: block; padding: 2px 5px 2px 5px; background: #FFFFCC; font-weight: bold; border: 1px solid #CCC; color: #7B7B7B; cursor: text; } .pagination a { display: block; text-decoration: none; margin: 0px; color: #0066CC; padding: 2px 5px 2px 5px; border: 1px solid #0099FF; } .pagination a:link, a:visited { border: 1px solid #CCCCCC; } .pagination a:hover { border: 1px solid #0099FF; background: #CCFFFF; } .pagination .page-frist { background: url(images/page-first.gif) no-repeat; width: 13px; height: 16px; } .pagination .page-prev { background: url(images/page-prev.gif) no-repeat; width: 13px; height: 16px; } .pagination .page-last { background: url(images/page-last.gif) no-repeat; width: 13px; height: 16px; } .pagination .page-next { background: url(images/page-next.gif) no-repeat; width: 13px; height: 16px; } .listTitleClass { background-color: Gray; line-height: 20px; font-weight: bold; font-size: 14px; text-align: center; } .listDataClass { line-height: 20px; } .treven { background-color: Silver; } .trodd { background-color: Silver; } .mypagination { margin-top:10px; padding:4px; height:20px; border:1px solid blue; background-image:url(images/tb-bg.gif); } --></mce:style><style mce_bogus="1"> body { font-family: Verdana,Tahoma; font-size: 12px; } .pagination { text-align:center; } .pagination li { padding: 0; float: left; margin-right: 2px; display: block; cursor: pointer; } .pagination span { display: block; padding: 2px 5px 2px 5px; background: #FFFFCC; font-weight: bold; border: 1px solid #CCC; color: #7B7B7B; cursor: text; } .pagination a { display: block; text-decoration: none; margin: 0px; color: #0066CC; padding: 2px 5px 2px 5px; border: 1px solid #0099FF; } .pagination a:link, a:visited { border: 1px solid #CCCCCC; } .pagination a:hover { border: 1px solid #0099FF; background: #CCFFFF; } .pagination .page-frist { background: url(images/page-first.gif) no-repeat; width: 13px; height: 16px; } .pagination .page-prev { background: url(images/page-prev.gif) no-repeat; width: 13px; height: 16px; } .pagination .page-last { background: url(images/page-last.gif) no-repeat; width: 13px; height: 16px; } .pagination .page-next { background: url(images/page-next.gif) no-repeat; width: 13px; height: 16px; } .listTitleClass { background-color: Gray; line-height: 20px; font-weight: bold; font-size: 14px; text-align: center; } .listDataClass { line-height: 20px; } .treven { background-color: Silver; } .trodd { background-color: Silver; } .mypagination { margin-top:10px; padding:4px; height:20px; border:1px solid blue; background-image:url(images/tb-bg.gif); } </style> <mce:script type="text/javascript" src="js/jquery-1.3.2.js" mce_src="js/jquery-1.3.2.js"></mce:script> <mce:script type="text/javascript" src="jquery.pagination.js" mce_src="jquery.pagination.js"></mce:script> <mce:script type="text/javascript"><!-- var PageSize = 10; //每页显示数量 var ItemSize = 5; //按键数量 var handleUrl = "handler/Handler.ashx"; var showField = "*"; var showNameField = ""; var containerID = "divContentList"; $(document).ready(function() { Paging(handleUrl, showField, showNameField, containerID, PageSize, ItemSize); }); // --></mce:script> </head> <body> <div id="divContentList"> </div> <div class="mypagination"> </div> </body> </html>   

 

因找不到插件原作者是谁，在此表示感谢！