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

最新推荐文章于 2023-07-02 16:50:23 发布
最新推荐文章于 2023-07-02 16:50:23 发布
阅读量4k 收藏 1
点赞数
分类专栏： Web

插件官方地址：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每页显示的条目数                      可选参数，默认是10
num_display_entries连续分页主体部分显示的分页条目数                      可选参数，默认是10
current_page当前选中的页面                     可选参数，默认是0，表示第1页
num_edge_entries两侧显示的首尾分页的条目数                     可选参数，默认是0
link_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; 
      } 
      //调用分页的存储过程了
       ……

远有青山
关注
专栏目录
jQuery Pagination分页插件.zip
07-11
jQuery Pagination,分页插件
element ui的Pagination分页组件和Table表格结合使用出现当前显示页不是我们指定条数的问题
最新发布
fightjuanjian的博客
08-01 289
这里element ui的Pagination分页组件和Table表格结合使用出现当前显示页不是我们指定条数的问题
基于js的分页插件使用
zhouyunjian的博客
10-29 141
            这是一个基于淘宝分页功能的插件，基于 maven项目，sping mvc+mybatis框架所完成的功能。开发步骤如下：      1.使用js插件 ：在线测试链接地址：http://pgkk.github.io/kkpager/example/pager_test.html，插件如附件所示kkpager-1.2.rar      2.运用ajax功能，查询数据： ...
jquery.page.js分页插件使用
shengmeshi的博客
07-26 2140
jquery.page.js分页插件使用
JQuery分页插件pagination.js
weixin_44605704的博客
11-16 478
参考文档：分页-pagination.js (v1.5.1) JQuery前台分页插件使用 1、html引用jquery和pagination <script src="js/jquery-1.8.3.min.js" type="text/jscript"></script> <script src="js/jquery.pagination.js" type="te...
jquery.pagination.js实现分页的三种形式，实例
11-17
jQuery pagination.js 是一个轻量级的插件，专门用于实现这种功能。在这个实例中，我们将探讨如何使用 `jquery.pagination.js` 实现三种不同的分页形式：基本分页、AJAX 无刷新分页以及自定义分页属性。 **基本分页...
jQuery分页插件jquery.pagination.js使用方法解析
01-21
jquery.pagination.js插件，此jQuery插件为Ajax分页插件，一次性加载全部数据，故分页切换时无刷新与延迟，只是重写指定dom元素中的html内容，如果数据量较大不建议用此方法，因为加载会比较慢； jQuery的多数插件...
jquery分页插件jquery.pagination.js实现无刷新分页
10-22
在介绍使用jquery分页插件jquery.pagination.js实现无刷新分页的知识点之前，首先要明确什么是分页插件，以及无刷新分页的概念。分页插件是一种用于在网页上实现内容分页展示的工具，它能够将大量数据或内容分成多页...
Spring Data Jpa+SpringMVC+Jquery.pagination.js实现分页示例
10-18
最后，Jquery.pagination.js是一个轻量级的JavaScript分页插件，它能够轻松地集成到现有的JavaScript库中，为Web应用程序提供分页功能。使用Jquery.pagination.js可以快速实现分页显示，使用户能够通过分页控件浏览...
pagination 扩展使用
shadowsick的专栏
02-05 2888
本文章摘编、转载需要注明来源 http://write.blog.csdn.net/postedit/8570591 pagination是jQuery的一个plugin,效果不错,但是由于缺少跳转跟记录数显示的功能,然后就修改了下源码 原本插件效果 修改后的插件效果(可以在参数里设置不显示增加的修改,默认显示) 先增加几个参数 opts = jQuery.exten
分页插件jquery.pagination.js
08-27
分页插件jquery.pagination.js使用起来很爽，自己经常用，做项目时总是要翻以前的项目看。
jquery.myPagination6.0.js
12-29
jquery.myPagination6.0.js
jquery.pagination.js 下载
09-18
jquery.pagination.js 下载,优秀的jquery分页插件,使用IP代理国外网站下载而来
pagination.js下载
02-24
JQuery分页插件 pagination.js下载
jquery-MyPagination分页插件
09-18
jquery-MyPagination分页插件，包括官方实例及所需js等
jquery.myPagination.js 使用
weixin_33937499的博客
10-26 401
<linktype="text/css"rel="...
jQuery插件Paginationjs分页
weixin_46027411的博客
07-02 293
解决数据回显分页问题
jquery.pagination.js+Ajax动态分页
low666的博客
04-20 2083
jquery.pagination.js+Ajax动态分页 首先引入jquery组件 jquery.pagination.js，以及css样式pagination.css <link rel="stylesheet" type="text/css" href="css/pagination.css" /> <script src="./jquery.pagination.js...
jQuery与Ajax无刷新分页实操教程：利用jquery.pagination.js
总结来说，使用jQuery+Ajax实现无刷新分页的关键在于熟练掌握前端框架的使用，理解Ajax的工作原理，并结合合适的分页插件如jquery.pagination.js，为用户提供快速、流畅的浏览体验。同时，注意调整和优化各种设置，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值