分享一个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.结果