jquery.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){  //maxentries   分页总条数 此参数为必选 其它都为可选参数
 opts = jQuery.extend({
  items_per_page:20,  //每页显示的条目数
  num_display_entries:4,  //主体部分显示的分页条目数
  current_page:0,  //当前选中的页数
  num_edge_entries:2,  //指的是首尾要显示的页数 多的用省略方式显示
  link_to:"#",  //分页的链接
  prev_text:"上一页",
  next_text:"下一页",
  ellipse_text:"....", //在此设置省略时所显示的符号
  prev_show_always:true, //上一页标签是否显示 若为false只有当没有上一页时隐藏
  next_show_always:true, //  下一页标签是否显示 若为false只有当没有上一页时隐藏
  callback:function(){return false;} //回调函数，当点击链接的时候此函数被调用，此函数接受两个参数，新一页

                                                     //的id和新一页的pagination容器（一个DOM元素）。如果回调函数返回false，则

                                                     //pagination事件停止执行。

  },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);

    });

}

页面Demo

<link href="css/pagination.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.6.min.js"></script>
<script type="text/javascript" src="js/jquery.pagination.js"></script>
<script type="text/javascript">
  //分页
  function pageselectCallback(page_id, jq){
      window.location.href="selBooksByPage.action?nowPage="+(page_id+1);
     }
      
     $(document).ready(function(){
           $("#Pagination").pagination(${pagemodel.rowsCount }, {
      num_edge_entries: 2,
      current_page: ${pagemodel.currentPage - 1 },
      num_display_entries: 2,
      items_per_page:${pagemodel.pageSize},
           callback: pageselectCallback
           });
     });
</script>
<body>

<span id="Pagination" class="pagination"></span>

</body>