改写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
+ "</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>

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