jquery【插件】 pagination使用_pagination.js 对应jq版本-优快云博客

本文链接：https://blog.youkuaiyun.com/zhanjianshinian/article/details/45030911

果学网 -专注IT在线www.prismcollege.com

原文：http://zccst.iteye.com/blog/1415848，http://blog.youkuaiyun.com/luoyeyu1989/article/details/7000865

http://my.oschina.net/alexgaoyh/blog/225397

先分享一个jquery分页插件演示大全，很强大啊。http://tool.oschina.net/jquery

1，下载3个文件
分别为：jquery-1.7.1.js、jquery.pagination.js、pagination.css

2，准备好服务器端返回结果
主要代码如下：

   Php代码  
   
  
 $members = array(array().......);  //详见附件  
 $total          = count($members);  
 $pageIndex      = $_POST['pageIndex'];  
 $items_per_page = $_POST['items_per_page'];  
   
 $result = array();  
 $start = $pageIndex * $items_per_page;  
 $end   = ($pageIndex+1) * $items_per_page;  
 if($end > $total){$end = $total;}  
 for($i = $start; $i < $end; $i++){  
     $result[] = $members[$i];  
 }  
   
 print json_encode(array('total'=>$total,'result'=>$result));  

3，前端js代码（核心）

   Js代码  
   
  
 var items_per_page = 3;  
 var page_index = 0;  
   
 function getDataList(index){  
     var pageIndex = index;  
     $.ajax({  
         type: "POST",  
         url: "members.php",  
         data: "pageIndex="+pageIndex+'&items_per_page='+items_per_page,  
         dataType: 'json',  
         contentType: "application/x-www-form-urlencoded",  
         success: function(msg){  
             var total = msg.total;  
             var html = '<table><tr><th>姓名</th><th>工作时间</th><th>籍贯</th><th>职务</th><th>生卒年</th><th>操作</th></tr>';  
             $.each(msg.result,function(i,n){      
                 html += '<tr><td>'+n[0]+'</td><td>'+n[1]+'</td><td>'+n[2]+'</td><td>'+n[3]+'</td><td>'+n[4]+'</td>'  
                 html += '<td><a href=#>删除</a></td></tr>';  
             });  
             html += '</table>';  
             $('#Searchresult').html(html);  
               
             //分页-只初始化一次  
             if($("#Pagination").html().length == ''){  
                 $("#Pagination").pagination(total, {  
                     'items_per_page'      : items_per_page,  
                     'num_display_entries' : 10,  
                     'num_edge_entries'    : 2,  
                     'prev_text'           : "上一页",  
                     'next_text'           : "下一页",  
                     'callback'            : pageselectCallback  
                 });  
             }  
         }  
     });  
 }  
   
   
 function pageselectCallback(page_index, jq){  
     getDataList(page_index);  
 }  
   
 $(document).ready(function(){  
     getDataList(page_index);  
 });  

4，前端html

   Html代码  
   
  
 <dl id="Searchresult">  
     <dt>Search Results will be inserted here ...</dt>  
 </dl>  
 <br style="clear:both;" />  
 <div id="Pagination" class="pagination"></div>  
 <br style="clear:both;" />  

批注：
（1）jquery.js和jquery.pagination.js插件的加载有先后顺序，不能颠倒。特别是在复杂的页面中。
（2）jquery.pagination.js实现可以有很多种。不同的分页插件，使用时可能会有差别，所以最好有足够的js功底，读懂那些插件是如何实现，以及如何引用。
（3）pagination.css是样式，可以独立出来。也即可以使用很多种不同的样式修饰，不必是给出的那一个。

当然这样的话数据会重复加载2次

--第一次
$(document).ready(function(){
    getDataList(page_index);
});
---第二次
'callback': pageselectCallback

暂时解决方法是：

第一次加载且求出数据和分页大小，分页count等，等callback的时候判断一个DOM或input的状态，然后修改即可，
如：
$(document).ready(function() {
        $.ajax({
            type: "get",
            data: "page='' &S=" + S + "&domain=" + domain + "&pagesize="+dopagesize,
            url: "<?php echo $cmsapi; ?>/news",
            dataType: "jsonp",
            jsonp: "callback",
            jsonpCallback: "jsonpNewsList",
            success: function(data) {
                if (data.result == 200) {
                    $('#aresult').empty();
                    if (!$.isEmptyObject(data.data.list)) {

                        $.each(data.data.list, function(a, list) { //装载对应分页的内容
                            $("#aresult").append('<li><span><a href=" detail-' + list.id + '.html"><div>' + list.title + '</div></a></span></li>');
                        });
                    } else {
                        $("#aresult").append('<li><span class="s_check">            暂无数据</span></li>');
                    }
                }
                /**
                 * 初始化完成显示分页
                 */
                initPagination(data.data.pages.itemCount, dopagesize);

            },
            error: function() {
                alert('参数错误');
            }
        });
    });

function initPagination(count, pagesize) {

        // 创建分页
        $("#Pagination").pagination(count, {//共24条
            num_edge_entries: 1, //边缘页数隐藏之前或之后个数
            num_display_entries: 4, //主体页数显示8个多出隐藏
            callback: pageselectCallback,
            items_per_page: pagesize, //每页显示的3条目数   $this->pagesize
            prev_text: "前一页",
            next_text: "后一页"
        });
    }

function pageselectCallback(page_index, jq) {   //page_index 前一个表示您当前点击的那个分页的页数索引值
        /**
         * 扩展: 查询客户的关键字搜索
         */
        var search_type = $("#search_type").val();
        var orderby = $("#orderby").val();
        var keywords = '';
        var search = {};
        var online_ajax = $("#online_ajax").val();

        if (online_ajax != 1) {
            $.ajax({
                type: "get",
                data: "page=" + (page_index + 1) + " &S=" + S + "&domain=" + domain + "&pagesize=3",
                url: "<?php echo $cmsapi; ?>/news",
                dataType: "jsonp",
                jsonp: "callback",
                jsonpCallback: "jsonpNewsList",
                success: function(data) {
                    if (data.result == 200) {
                        $('#aresult').empty();
                        if (!$.isEmptyObject(data.data.list)) {

                            $.each(data.data.list, function(a, list) { //装载对应分页的内容
                                $("#aresult").append('<li><span><a href=" detail-' + list.id + '.html"><div>' + list.title + '</div></a></span></li>');
                            });
                        } else {
                            $("#aresult").append('<li><span class="s_check">            暂无数据</span></li>');
                        }
                    }
                },
                error: function() {
                    alert('参数错误');
                }
            });
        } else {
            $("#online_ajax").val('2');
        }

        return false;
    }

*********************************************************************************************************************

可以参考下如下改进：

说明
-----------
当您有很多很多数据，需要在网页中以分页的形式显示出来时，这个插件将会帮您创建分页。

使用说明
-----
在页面中引用jQuery和本分页的js及对应的css文件.
在body中创建一对容纳分页链接的标签。
给这个标签加上一个id或class属性(如： "News-Pagination").
这个属性将被用于jQuery选择器。

接下来，写一个含有new_page_index和paging_container这两个参数的js方法。这个方法是在你单击分页链接后的回调函数。
当你单击页码时，对应的页码会被选中。
    function handlePaginationClick(new_page_index, pagination_container) {
        // 这将选择20个内容数组中的元素
        for(var i=new_page_id;i<;i++) {
            $('#MyContentArea').append(content[i]);
        }
        return false;
    }

这个回调函数中需要用到jQuery对dom操作的相关知识。
里面的代码就可以自己去写。

在页面初始化中，当你知道有很多记录要显示出来时，创建如下的分页元素：
   // 第一个参数: 记录总数
   // 第二个参数: 对象options
   $("#News-Pagination").pagination(122, {
       items_per_page:20, //pageSize每页最多显示多少条
       callback:handlePaginationClick
   });

这将在容器中创建分页的导航链接。您会看到
数字1-7，第一个数字是高亮显示的。当您单击另一个页码数字时，
高亮将会改变并且回调函数“handlePaginationClick”
被调用。

通过option和一些元素可以高度配置本插件。

可用的Options：
-----------------
以下为options的具体描述：

callback
   当用户单击页码时，回调函数被调用.这个函数接收到两个参数: 新的页码index和分页容器（dom）.
   如果回调函数返回false，则事件不执行.
   分页中这个回调函数是必不可少的！
   它应该包括你所补充的一些代码。
   为了加快用户体验，你不应该在此通过AJAX来加载内容。相反，您可以预加载一些内容然后通过此函数来分页浏览。
        默认值: "function(){return false;}".

current_page
   分页初始化时，被选中的那一页. 也就是当前页
   默认值: 0

items_per_page
   pageSize，每页最多显示的记录数。
   默认值: 10

link_to
   分页上的链接. 通常分页是通过onclick事件来触发的. 如果这个链接包含id之类的参数等
   , 它将会替换掉原始的分页链接.
   默认值: "#"

num_display_entries
   可见的页码数量. 建议设置为奇数（对称好看些）
   默认值: 11

next_text
   “下一页”的文字
   默认值: "Next"

next_show_always
   是否总是显示“下一页”。
   默认值: `true`

prev_text
   “上一页”的文字。
   默认值: "Previous"

prev_show_always
   是否总是显示“上一页”。
   默认值: true

num_edge_entries
   如果设置为1，则显示“首页”与“尾页”。你也可以把它设置大点的数，以便显示更多的链接。
   默认值: 0

ellipse_text
   当页码数之间的数字相差很远时，比如：1 2 3 ... 10 11 12
   显示的字符(在span中)
   默认值: "..."

load_first_page
    如果为true则当插件初始化时回调函数被执行。如果你通过ajax来显示内容，那么在初始化分页插件时应把它设置为false;
    默认值: true

自定义事件触发分页
----------------------------------------
   // 跳到第5页
   $("#News-Pagination").trigger('setPage', [4]);
   // 下一页
   $("#News-Pagination").trigger('nextPage');
   // 上一页
   $("#News-Pagination").trigger('prevPage');

   注：如果指定的页码在页码的范围之内则触发分页事件，否则不触发。

下载地址：http://ishare.iask.sina.com.cn/f/21330704.html

说明下：

1：ie6下面CSS问题，由于IE6不支持多项选择类（如：".current .next"中间没有空格），导致样式不对。把pagination.css的最后一个样式去掉。

.pagination {
            font-size: 80%;
        }

.pagination a {
    text-decoration: none;
   border: solid 1px #AAE;
   color: #15B;
}

.pagination a, .pagination span {
    display: block;
    float: left;
    padding: 0.3em 0.5em;
    margin-right: 5px;
   margin-bottom: 5px;
   min-width:1em;
   text-align:center;
}

.pagination .current {
    background: #eee;
    color: #555;
   border: solid 1px #AAE;
}

2：手动设置"link_to"属性（让页面的url地址像样，xxxxxx.html?id=123）：

[javascript]view plaincopy 
   
      <script type="text/javascript">  
        
          // This is a very simple demo that shows how a range of elements can  
          // be paginated.  
          // The elements that will be displayed are in a hidden DIV and are  
          // cloned for display. The elements are static, there are no Ajax   
          // calls involved.  
        
          /** 
           * Callback function that displays the content. 
           * 
           * Gets called every time the user clicks on a pagination link. 
           * 
           * @param {int} page_index New Page index 
           * @param {jQuery} jq the container with the pagination links as a jQuery object 
           */  
          function pageselectCallback(page_index, jq){  
              var new_content = jQuery('#hiddenresult div.result:eq('+page_index+')').clone();  
              $('#Searchresult').empty().append(new_content);  
              //return false;  
          }  
           
          /**  
           * Initialisation function for pagination 
           */  
          function initPagination() {  
              // count entries inside the hidden content  
              var num_entries = jQuery('#hiddenresult div.result').length;  
              // Create content inside pagination element  
              $("#Pagination").pagination(num_entries, {  
                  callback: pageselectCallback,  
                  items_per_page:3,// Show only one item per page  
         num_edge_entries:2,  
         link_to:"?id=__id__"//分页的js中会自动把"__id__"替换为当前的数。0为第一页  
     });  
     //页面加载时选中指定页  
     $("#Pagination").trigger('setPage', [parseInt(getQueryString("id"))]);  
           }  
            
          // When document is ready, initialize pagination  
          $(document).ready(function(){        
              initPagination();  
          });  
 //获取url参数  
          function getQueryString(name) {  
     var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");  
     var r = window.location.search.substr(1).match(reg);  
     if (r != null) return unescape(r[2]); return null;  
 }  
      </script>  

3：ajax就很简单了。不说了。

jquery.pagination.js 新增首页尾页功能

在使用 jquery.pagination.js 的时候，发现现有的jquery.pagination.js文件并不包含首页尾页的功能，只有上一页下一页的功能，故修改了第三方的 jquery.pagination.js 的文件，使他可以实现首页尾页的功能，以下为修改后的文件，并加上update的注释

废话不多说，直接上修改后的代码，修改部分已经用 update 注释包含

17-20行

99-103行

141-145行

 
         /**
        
         * 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:
         "#"
         ,
        
         //update firstPage、lastPage
        
         first_text:
         "首页"
         ,
        
         last_text:
         "尾页"
         ,
        
         //update
        
         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
         () {
        
         /**
        
         * Calculate the maximum number of pages
        
         */
        
         function
         numPages() {
        
         return
         Math.ceil(maxentries/opts.items_per_page);
        
         }
        
         /**
        
         * Calculate start and end point of pagination links depending on 
        
         * current_page and num_display_entries.
        
         * @return {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];
        
         }
        
         /**
        
         * This is the event handling function for the pagination links. 
        
         * @param {int} page_id The new page number
        
         */
        
         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;
        
         }
        
         /**
        
         * This function inserts the pagination links into the container element
        
         */
        
         function
         drawLinks() {
        
         panel.empty();
        
         var
         interval = getInterval();
        
         var
         np = numPages();
        
         // This helper function returns a handler function that calls pageSelected with the right page_id
        
         var
         getClickHandler = 
         function
         (page_id) {
        
         return
         function
         (evt){
         return
         pageSelected(page_id,evt); }
        
         }
        
         // Helper function for generating a single link (or a span tag if it's the current page)
        
         var
         appendItem = 
         function
         (page_id, appendopts){
        
         page_id = page_id<0?0:(page_id<np?page_id:np-1); 
         // Normalize page id to sane value
        
         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);
        
         }
        
         // update firstPage
        
         if
         (opts.first_text && (current_page > 0 || opts.prev_show_always)) {      
        
         appendItem(0, { text: opts.first_text, classes: 
         "prev disabled" 
          });           
        
         }
        
         // update
        
         // Generate "Previous"-Link
        
         if
         (opts.prev_text && (current_page > 0 || opts.prev_show_always)){
        
         appendItem(current_page-1,{text:opts.prev_text, classes:
         "prev"
         });
        
         }
        
         // Generate starting points
        
         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);
        
         }
        
         }
        
         // Generate interval links
        
         for
         (
         var
         i=interval[0]; i<interval[1]; i++) {
        
         appendItem(i);
        
         }
        
         // Generate ending points
        
         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);
        
         }
        
         }
        
         // Generate "Next"-Link
        
         if
         (opts.next_text && (current_page < np-1 || opts.next_show_always)){
        
         appendItem(current_page+1,{text:opts.next_text, classes:
         "next"
         });
        
         }
        
         // update lastPage
        
         if
         (opts.last_text && (current_page < np - 1 || opts.next_show_always)) {           
        
         appendItem(np, { text: opts.last_text, classes: 
         "prev disabled" 
          });          
        
         }
        
         // update
        
         }
        
         // Extract current_page from options
        
         var
         current_page = opts.current_page;
        
         // Create a sane value for maxentries and items_per_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;
        
         // Store DOM element for easy access from all inner functions
        
         var
         panel = jQuery(
         this
         );
        
         // Attach control functions to the DOM element 
        
         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
         ;
        
         }
        
         }
        
         // When all initialisation is done, draw the links
        
         drawLinks();
        
         // call callback function
        
         //opts.callback(current_page, this);
        
         });
        
         }