分享一个jQuery 客户端分页插件

1.引用样式文件：

<link href="pagination.css" rel="stylesheet" type="text/css" />

2.引用JS文件：

<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>

<script type="text/javascript" src="js/jquery.pagination.js"></script>

3. html 代码

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="table" id="tblList">
<tr>
    <th width="50">
        序号
    </th>
    <th width="140">
        申请日期
    </th>
    <th width="140">
        申请项目
    </th>
    <th width="100">
        是否成功
    </th>
    <th>
        批单号或收据号
    </th>
    <th width="120">
        申请途径
    </th>
</tr>
</table>

<div id="pager"></div>

4.初始化

var dataList = null; //数据源
var $tblList = $('#tblList');
var pageSize = 10; //每页10条
// 查询记录列表
function recordListQuery() {
    $.ajax({
        url: __request__.policyQuery.getOperationTransactRecord,
        data: {
            refreshFlag: true,
            polNo: $("#polNo").val(),
            regionCode: $("#regionCode").val()
        },
        type: 'GET',
        dataType: 'xml',
        success: function (xml) {
            //设置数据源
            dataList = $(xml).find('session > AcceptInformationDTO'); 
            //初始化分页控件
            $("#pager").pagination(dataList.length, {
                callback: pageselectCallback,
                items_per_page: pageSize //每页10条
            });
        }
    }); //end ajax
};
//分页回调函数
function pageselectCallback(pageIndex, jq) {
    // 移除之前的数据
    $tblList.find('tr:not(:first)').remove();
    var len = dataList.length; //总记录条数
    var max_elem = Math.min((pageIndex + 1) * pageSize, len);
    var arr = [];
    //分页输出数据
    for (var i = pageIndex * pageSize; i < max_elem; i++) {
        var o = $(dataList[i]);
        arr.push(i % 2 == 0 ? "<tr>" : "<tr class='gh'>");
        arr.push('<td align="center">' + (i + 1) + '</td>');
        arr.push('<td align="center">' + formatDate(o.find('acceptDate').text()) + '</td>');
        //...
        arr.push("</tr>");
    }
    $tblList.append(arr.join(''));
    return false;
}

5.下载

http://github.com/gbirke/jquery_pagination

6.结果