jquery.pagination.js分页插件的运用

插件官方地址：http://plugins.jquery.com/project/pagination

插件js源码

1. 代码  
2.  
3. /**  
4.  * This jQuery plugin displays pagination links inside the selected elements.  
5.  *  
6.  * @author Gabriel Birke (birke *at* d-scribe *dot* de)  
7.  * @version 1.2  
8.  * @param {int} maxentries Number of entries to paginate  
9.  * @param {Object} opts Several options (see README for documentation)  
10.  * @return {Object} jQuery Object  
11.  */  
12. jQuery.fn.pagination = function(maxentries, opts){  
13.     opts = jQuery.extend({  
14.         items_per_page:10,  
15.         num_display_entries:10,  
16.         current_page:0,  
17.         num_edge_entries:0,  
18.         link_to:"#",  
19.         prev_text:"Prev",  
20.         next_text:"Next",  
21.         ellipse_text:"...",  
22.         prev_show_always:true,  
23.         next_show_always:true,  
24.         callback:function(){return false;}  
25.     },opts||{});  
26.       
27.     return this.each(function() {  
28.         /**  
29.          * 计算最大分页显示数目  
30.          */  
31.         function numPages() {  
32.             return Math.ceil(maxentries/opts.items_per_page);  
33.         }      
34.         /**  
35.          * 极端分页的起始和结束点，这取决于current_page 和 num_display_entries.  
36.          * @返回 {数组(Array)}  
37.          */  
38.         function getInterval()  {  
39.             var ne_half = Math.ceil(opts.num_display_entries/2);  
40.             var np = numPages();  
41.             var upper_limit = np-opts.num_display_entries;  
42.             var start = current_page>ne_half?Math.max(Math.min(current_page-ne_half, upper_limit), 0):0;  
43.             var end = current_page>ne_half?Math.min(current_page+ne_half, np):Math.min(opts.num_display_entries, np);  
44.             return [start,end];  
45.         }  
46.           
47.         /**  
48.          * 分页链接事件处理函数  
49.          * @参数 {int} page_id 为新页码  
50.          */  
51.         function pageSelected(page_id, evt){  
52.             current_page = page_id;  
53.             drawLinks();  
54.             var continuePropagation = opts.callback(page_id, panel);  
55.             if (!continuePropagation) {  
56.                 if (evt.stopPropagation) {  
57.                     evt.stopPropagation();  
58.                 }  
59.                 else {  
60.                     evt.cancelBubble = true;  
61.                 }  
62.             }  
63.             return continuePropagation;  
64.         }  
65.           
66.         /**  
67.          * 此函数将分页链接插入到容器元素中  
68.          */  
69.         function drawLinks() {  
70.             panel.empty();  
71.             var interval = getInterval();  
72.             var np = numPages();  
73.             // 这个辅助函数返回一个处理函数调用有着正确page_id的pageSelected。  
74.             var getClickHandler = function(page_id) {  
75.                 return function(evt){ return pageSelected(page_id,evt); }  
76.             }  
77.             //辅助函数用来产生一个单链接(如果不是当前页则产生span标签)  
78.             var appendItem = function(page_id, appendopts){  
79.                 page_idpage_id = page_id<0?0:(page_id<np?page_id:np-1); // 规范page id值  
80.                 appendopts = jQuery.extend({text:page_id+1, classes:""}, appendopts||{});  
81.                 if(page_id == current_page){  
82.                     var lnk = jQuery("<span class='current'>"+(appendopts.text)+"</span>");  
83.                 }else{  
84.                     var lnk = jQuery("<a>"+(appendopts.text)+"</a>")  
85.                         .bind("click", getClickHandler(page_id))  
86.                         .attr('href', opts.link_to.replace(/__id__/,page_id));          
87.                 }  
88.                 if(appendopts.classes){lnk.addClass(appendopts.classes);}  
89.                 panel.append(lnk);  
90.             }  
91.             // 产生"Previous"-链接  
92.             if(opts.prev_text && (current_page > 0 || opts.prev_show_always)){  
93.                 appendItem(current_page-1,{text:opts.prev_text, classes:"prev"});  
94.             }  
95.             // 产生起始点  
96.             if (interval[0] > 0 && opts.num_edge_entries > 0)  
97.             {  
98.                 var end = Math.min(opts.num_edge_entries, interval[0]);  
99.                 for(var i=0; i<end; i++) {  
100.                     appendItem(i);  
101.                 }  
102.                 if(opts.num_edge_entries < interval[0] && opts.ellipse_text)  
103.                 {  
104.                     jQuery("<span>"+opts.ellipse_text+"</span>").appendTo(panel);  
105.                 }  
106.             }  
107.             // 产生内部的些链接  
108.             for(var i=interval[0]; i<interval[1]; i++) {  
109.                 appendItem(i);  
110.             }  
111.             // 产生结束点  
112.             if (interval[1] < np && opts.num_edge_entries > 0)  
113.             {  
114.                 if(np-opts.num_edge_entries > interval[1]&& opts.ellipse_text)  
115.                 {  
116.                     jQuery("<span>"+opts.ellipse_text+"</span>").appendTo(panel);  
117.                 }  
118.                 var begin = Math.max(np-opts.num_edge_entries, interval[1]);  
119.                 for(var i=begin; i<np; i++) {  
120.                     appendItem(i);  
121.                 }  
122.                   
123.             }  
124.             // 产生 "Next"-链接  
125.             if(opts.next_text && (current_page < np-1 || opts.next_show_always)){  
126.                 appendItem(current_page+1,{text:opts.next_text, classes:"next"});  
127.             }  
128.         }  
129.           
130.         //从选项中提取current_page  
131.         var current_page = opts.current_page;  
132.         //创建一个显示条数和每页显示条数值  
133.         maxentries = (!maxentries || maxentries < 0)?1:maxentries;  
134.         opts.items_per_page = (!opts.items_per_page || opts.items_per_page < 0)?1:opts.items_per_page;  
135.         //存储DOM元素，以方便从所有的内部结构中获取  
136.         var panel = jQuery(this);  
137.         // 获得附加功能的元素  
138.         this.selectPage = function(page_id){ pageSelected(page_id);}  
139.         this.prevPage = function(){   
140.             if (current_page > 0) {  
141.                 pageSelected(current_page - 1);  
142.                 return true;  
143.             }  
144.             else {  
145.                 return false;  
146.             }  
147.         }  
148.         this.nextPage = function(){   
149.             if(current_page < numPages()-1) {  
150.                 pageSelected(current_page+1);  
151.                 return true;  
152.             }  
153.             else {  
154.                 return false;  
155.             }  
156.         }  
157.         // 所有初始化完成，绘制链接  
158.         drawLinks();  
159.         // 回调函数  
160.         opts.callback(current_page, this);  
161.     });  
162. } 

分页插件参数说明：

demo

html代码

1. 代码  
2.  
3. <script src="common/jquery.js" type="text/javascript"></script>   
4. <script src="common/jquery.pagination.js" type="text/javascript"></script>   
5. <link href="common/tablesorter.css" rel="stylesheet" type="text/css" />   
6. <link href="common/pagination.css" rel="stylesheet" type="text/css" />   
7.  
8. <script language="javascript" type="text/javascript">   
9.   var orderby = ""; //进行排序的依据   
10.   $(document).ready(function() {   
11.   InitData(0); //初始化数据   
12.   });   
13.   //这个事件是在翻页时候用的   
14.   function pageselectCallback(page_id, jq) {   
15.   InitData(page_id);   
16.   }   
17.   function InitData(pageIndex) {   
18.   var tbody = ""; //声明表格中body部分   
19.   $.ajax({ //这里使用到Jquery的ajax方法  
20.   type: "POST",   
21.   dataType: "json",   
22.   url: 'GetData.ashx', //请求的处理数据   
23.   data: "pageIndex=" + (pageIndex + 1) + "&sortType=" + orderby,   
24.   //传入的参数，第一个参数就是分页的页数，第二个参数为排序的依据   
25.   //下面的操作就是成功返回数据以后，进行数据的绑定   
26.   success: function(data) {   
27.   $("#linkTable tr:gt(0)").remove();   
28.   var myData = data.Products;   
29.   $.each(myData, function(i, n) {   
30.   var trs = "";   
31.   trs += "<tr><td align='center'>" + n.ProductName + "</td><td>" +   
32.   n.QuantityPerUnit + "</td></tr>";   
33.   tbody += trs;   
34.   });   
35.   $("#linkTable").append(tbody);   
36.   }   
37.   });   
38.   //加入分页的绑定   
39.   $("#Pagination").pagination(<%=pageCount %>, {   
40.   callback: pageselectCallback,   
41.   prev_text: '< 上一页',   
42.   next_text: '下一页 >',   
43.   items_per_page: 20,   
44.   num_display_entries: 6,   
45.   current_page: pageIndex,   
46.   num_edge_entries: 2   
47.   });   
48.   }   
49. </script>   
50.  
51.  
52.  
53.   <div>   
54.   <table id="linkTable" cellpadding="6" cellspacing="1" align="left"   
55.   class="tablesorter" style="width:400px;margin:0 0 20px 5px;">   
56.   <thead>   
57.   <tr class="tableHeader" align="center">   
58.   <th style="width:200px; text-align:center;" >   
59.   产品名称   
60.   </th>   
61.   <th style="width:200px; text-align:center">   
62.   产品单价   
63.   </th>   
64.   </tr>   
65.   </thead>   
66.   </table>   
67.   </div>   
68.   <div id="Pagination" class="digg"></div> 

代码

<script src="common/jquery.js" type="text/javascript"></script> 
<script src="common/jquery.pagination.js" type="text/javascript"></script> 
<link href="common/tablesorter.css" rel="stylesheet" type="text/css" /> 
<link href="common/pagination.css" rel="stylesheet" type="text/css" />

<script language="javascript" type="text/javascript"> 
  var orderby = ""; //进行排序的依据 
  $(document).ready(function() { 
  InitData(0); //初始化数据 
  }); 
  //这个事件是在翻页时候用的 
  function pageselectCallback(page_id, jq) { 
  InitData(page_id); 
  } 
  function InitData(pageIndex) { 
  var tbody = ""; //声明表格中body部分 
  $.ajax({ //这里使用到Jquery的ajax方法
  type: "POST", 
  dataType: "json", 
  url: 'GetData.ashx', //请求的处理数据 
  data: "pageIndex=" + (pageIndex + 1) + "&sortType=" + orderby, 
  //传入的参数，第一个参数就是分页的页数，第二个参数为排序的依据 
  //下面的操作就是成功返回数据以后，进行数据的绑定 
  success: function(data) { 
  $("#linkTable tr:gt(0)").remove(); 
  var myData = data.Products; 
  $.each(myData, function(i, n) { 
  var trs = ""; 
  trs += "<tr><td align='center'>" + n.ProductName + "</td><td>" + 
  n.QuantityPerUnit + "</td></tr>"; 
  tbody += trs; 
  }); 
  $("#linkTable").append(tbody); 
  } 
  }); 
  //加入分页的绑定 
  $("#Pagination").pagination(<%=pageCount %>, { 
  callback: pageselectCallback, 
  prev_text: '< 上一页', 
  next_text: '下一页 >', 
  items_per_page: 20, 
  num_display_entries: 6, 
  current_page: pageIndex, 
  num_edge_entries: 2 
  }); 
  } 
</script>

  <div> 
  <table id="linkTable" cellpadding="6" cellspacing="1" align="left" 
  class="tablesorter" style="width:400px;margin:0 0 20px 5px;"> 
  <thead> 
  <tr class="tableHeader" align="center"> 
  <th style="width:200px; text-align:center;" > 
  产品名称 
  </th> 
  <th style="width:200px; text-align:center"> 
  产品单价 
  </th> 
  </tr> 
  </thead> 
  </table> 
  </div> 
  <div id="Pagination" class="digg"></div>

本文转自linzheng 51CTO博客，原文链接:http://blog.51cto.com/linzheng/1081577