分页工具

JSP

   < div >
      < ul id= "notice_list" ></ ul>
   </ div>
   < div >
       < div id= "paginationdiv" class ="pagination" style=" display: inline-block ;float : right ;">
       </ div>
   </ div>

JS

    $( function(){
              getNoticesList( null );
          });

           function getNoticesList(pn){
              $.ajax({
                   url : ' xxx.do',
                   data : {
                        pn : pn
                   },
                   dataType : 'json' ,
                   type : 'POST' ,
                   async : false ,
                   success : function (data){
                        appendNotice(data);
                        loadPagination(data);
                   },
                   error : function (e){
                         //alert(1);
                   }
              });
          }

           function appendNotice(data){
               var ul = $("#notice_list" );
               var cosups = data.notices;
               var html = '' ;
               if (cosups.length>0){
                   html = '' ;
                   $.each(cosups, function (i, cosup){
                       ...
                   });
              }
              ul.empty();
              ul.append(html);
          }

           function loadPagination(data){
              $( "#paginationdiv" ).pagination({
                    //pn:当前页码
                   pn : data.pn,
                    //allpn:总页数
                   allpn :  data.allpn,
                    //总记录数
                   total :  data.total,
                   url : 'xxx.do' ,
                    // 外部事件名称
                   pagefn : 'searchNotice'
              });
          }
           var searchNotice = function(pn){
              getNoticesList(pn);
          };

    (function($) {
    var settings = {
        // 页码
        pn : 1,
        // 总页数
        allpn : 1,
        // 总记录数
        total : 0,
        // 访问地址
        url : "",
        //翻页事件 : ''
        pagefn : 'void(0);',
        // 外部事件名称
        outfn : function(pn) {
        }

    };

    $.fn.pagination = function(options) {
        //合并setting 和 options,如果setting和options有重复项，则options覆盖settings
        //返回值为合并后的对象
        //allpn ： 页数
        settings = $.extend({}, settings, options);
        var $this = $(this);
        init();
        $this.html(createFunction());  
    };

    /**
     * 初始化
     */
    function init() {
        settings.pn = parseInt(settings.pn);
        settings.allpn = parseInt(settings.allpn);
        settings.total = parseInt(settings.total);
        if (settings.pn <= 0 || settings.allpn <= 0)
            settings.pn = settings.allpn = 1;
        if (settings.total <= 0) {
            settings.pn = settings.allpn = 1;
            settings.total = 0;
        }
    }

    function createFunction() {
        var pn = settings.pn;
        var allpn = settings.allpn;
        var total = settings.total;
        //pagefn : 外部事件函数名称
        var pagefn = settings.pagefn;
        var html = [];
        if (pn > 1) {
            html.push('<a href="javascript:' + pagefn + '(1)">首页</a>');
            html.push('<a href="javascript:' + pagefn + '(' + (pn - 1) + ');">上一页</a>');
        }
        var firstpn, lastpn;
        //如果总页数小于10页
        if (allpn <= 10) {
            firstpn = 1;
            lastpn = allpn;
        } else {
            //显示的页标 比当前页多一页
            firstpn = pn - 4;
            lastpn = pn + 5;
            while (firstpn <= 0 || lastpn > allpn) {
                if (firstpn <= 0) {
                    var s = 1 - firstpn;
                    firstpn += s;
                    lastpn += s;
                    continue;
                }
                if (lastpn > allpn) {
                    var s = lastpn - allpn;
                    firstpn -= s;
                    lastpn -= s;
                    continue;
                }
            }
        }
        for ( var i = firstpn; i <= lastpn; i++) {
            if (i == pn)
                html.push('<span class="span1">' + i + '</span>');
            else
                html.push('<a href="javascript:' + pagefn + '(' + i + ')">' + i + '</a>');
        }
        if (pn < allpn) {
            html.push('<a href="javascript:' + pagefn + '(' + (pn + 1) + ')">下一页</a>');
            html.push('<a href="javascript:' + pagefn + '(' + allpn + ')">尾页</a>');
        }
        html.push('<span class="span2">&nbsp;共有</span>');
        html.push('<span class="span3">' + allpn + '</span>');
        html.push('<span class="span2">页&nbsp;共有</span>');
        html.push('<span class="span3">' + total + '</span>');
        html.push('<span class="span2">条记录</span>');
        return html.join('');
    }
})(jQuery);