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

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

 插件js源码

/** * This jQuery plugin displays pagination links inside the selected elements. * * @author Gabriel Birke (birke *at* d-scribe *dot* de) * @version 1.2 * @param {int} maxentries Number of entries to paginate * @param {Object} opts Several options (see README for documentation) * @return {Object} jQuery Object */jQuery.fn.pagination = function(maxentries, opts){    opts = jQuery.extend({        items_per_page:10,        num_display_entries:10,        current_page:0,        num_edge_entries:0,        link_to:"#",        prev_text:"Prev",        next_text:"Next",        ellipse_text:"...",        prev_show_always:true,        next_show_always:true,        callback:function(){return false;}    },opts||{});        return this.each(function() {        /**         * 计算最大分页显示数目         */        function numPages() {            return Math.ceil(maxentries/opts.items_per_page);        }            /**         * 极端分页的起始和结束点，这取决于current_page 和 num_display_entries.         * @返回 {数组(Array)}         */        function getInterval()  {            var ne_half = Math.ceil(opts.num_display_entries/2);            var np = numPages();            var upper_limit = np-opts.num_display_entries;            var start = current_page>ne_half?Math.max(Math.min(current_page-ne_half, upper_limit), 0):0;            var end = current_page>ne_half?Math.min(current_page+ne_half, np):Math.min(opts.num_display_entries, np);            return [start,end];        }                /**         * 分页链接事件处理函数         * @参数 {int} page_id 为新页码         */        function pageSelected(page_id, evt){            current_page = page_id;            drawLinks();            var continuePropagation = opts.callback(page_id, panel);            if (!continuePropagation) {                if (evt.stopPropagation) {                    evt.stopPropagation();                }                else {                    evt.cancelBubble = true;                }            }            return continuePropagation;        }                /**         * 此函数将分页链接插入到容器元素中         */        function drawLinks() {            panel.empty();            var interval = getInterval();            var np = numPages();            // 这个辅助函数返回一个处理函数调用有着正确page_id的pageSelected。            var getClickHandler = function(page_id) {                return function(evt){ return pageSelected(page_id,evt); }            }            //辅助函数用来产生一个单链接(如果不是当前页则产生span标签)            var appendItem = function(page_id, appendopts){                page_id = page_id<0?0:(page_id<np?page_id:np-1); // 规范page id值                appendopts = jQuery.extend({text:page_id+1, classes:""}, appendopts||{});                if(page_id == current_page){                    var lnk = jQuery("<span class='current'>"+(appendopts.text)+"</span>");                }else{                    var lnk = jQuery("<a>"+(appendopts.text)+"</a>")                        .bind("click", getClickHandler(page_id))                        .attr('href', opts.link_to.replace(/__id__/,page_id));                        }                if(appendopts.classes){lnk.addClass(appendopts.classes);}                panel.append(lnk);            }            // 产生"Previous"-链接            if(opts.prev_text && (current_page > 0 || opts.prev_show_always)){                appendItem(current_page-1,{text:opts.prev_text, classes:"prev"});            }            // 产生起始点            if (interval[0] > 0 && opts.num_edge_entries > 0)            {                var end = Math.min(opts.num_edge_entries, interval[0]);                for(var i=0; i<end; i++) {                    appendItem(i);                }                if(opts.num_edge_entries < interval[0] && opts.ellipse_text)                {                    jQuery("<span>"+opts.ellipse_text+"</span>").appendTo(panel);                }            }            // 产生内部的些链接            for(var i=interval[0]; i<interval[1]; i++) {                appendItem(i);            }            // 产生结束点            if (interval[1] < np && opts.num_edge_entries > 0)            {                if(np-opts.num_edge_entries > interval[1]&& opts.ellipse_text)                {                    jQuery("<span>"+opts.ellipse_text+"</span>").appendTo(panel);                }                var begin = Math.max(np-opts.num_edge_entries, interval[1]);                for(var i=begin; i<np; i++) {                    appendItem(i);                }                            }            // 产生 "Next"-链接            if(opts.next_text && (current_page < np-1 || opts.next_show_always)){                appendItem(current_page+1,{text:opts.next_text, classes:"next"});            }        }                //从选项中提取current_page        var current_page = opts.current_page;        //创建一个显示条数和每页显示条数值        maxentries = (!maxentries || maxentries < 0)?1:maxentries;        opts.items_per_page = (!opts.items_per_page || opts.items_per_page < 0)?1:opts.items_per_page;        //存储DOM元素，以方便从所有的内部结构中获取        var panel = jQuery(this);        // 获得附加功能的元素        this.selectPage = function(page_id){ pageSelected(page_id);}        this.prevPage = function(){             if (current_page > 0) {                pageSelected(current_page - 1);                return true;            }            else {                return false;            }        }        this.nextPage = function(){             if(current_page < numPages()-1) {                pageSelected(current_page+1);                return true;            }            else {                return false;            }        }        // 所有初始化完成，绘制链接        drawLinks();        // 回调函数        opts.callback(current_page, this);    });}

 

 分页插件参数说明：

参数名描述参数值maxentries总条目数                          必选参数，整数items_per_page每页显示的条目数                      可选参数，默认是10num_display_entries连续分页主体部分显示的分页条目数                      可选参数，默认是10current_page当前选中的页面                     可选参数，默认是0，表示第1页num_edge_entries两侧显示的首尾分页的条目数                     可选参数，默认是0link_to分页的链接                 字符串，可选参数，默认是"#"prev_text“前一页”分页按钮上显示的文字                字符串参数，可选，默认是"Prev"next_text“下一页”分页按钮上显示的文字               字符串参数，可选，默认是"Next"ellipse_text省略的页数用什么文字表示                  可选字符串参数，默认是"…"prev_show_always是否显示“前一页”分页按钮          布尔型，可选参数，默认为true，即显示“前一页”按钮next_show_always是否显示“下一页”分页按钮          布尔型，可选参数，默认为true，即显示“下一页”按钮callback回调函数             当点击链接的时候此函数被调用，此函数接受两个参数，新一页的id和pagination容器（一个DOM元素）。如果回调函数返回false，则pagination事件停止执行

 

 

demo

html代码

 

 

<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> 

 

 

 

后台处理代码GetData.ashx

     //具体的页面数 
      int pageIndex; 
      int.TryParse(context.Request["pageIndex"], out pageIndex); 
      //排序的依据 
      string orderType = "ProductID"; 
      int sortType = 1; 
      if (!string.IsNullOrEmpty(context.Request["sortType"])) 
      { 
      string[] strArr = context.Request["sortType"].Split('_'); 
      if (strArr[1] == "0") 
      { 
      orderType = strArr[0]; 
      sortType = 0; 
      } 
      else 
      { 
      orderType = strArr[0]; 
      sortType = 1; 
      } 
      } 
      if (pageIndex == 0) 
      { 
      pageIndex = 1; 
      } 
      //调用分页的存储过程了
       ……