zoukankan      html  css  js  c++  java
  • jQuery分页小插件

    源码如下:

    [javascript] view plaincopyprint?
     
    1. $.fn.pager = function (pagerInfo) {  
    2.         var recordCount = this.size();  
    3.         if (recordCount <= pagerInfo.pagesize) return;  
    4.         var currentPageIndex = 1, //当前面,默认为1  
    5.         pageCount = Math.ceil(recordCount / pagerInfo.pagesize); //总页数  
    6.         //构建分页的html  
    7.         $('<div>一共' + this.size() + '条记录,一共' + pageCount + '页,当前第<span>1</span>页</div>')  
    8.             .insertAfter(pagerInfo.container)  
    9.             .append($('<a class="prev-page">上一页</a>').click(function () {  
    10.                 if (currentPageIndex == 1) return;  
    11.                 currentPageIndex--;  
    12.                 showRecords(currentPageIndex);  
    13.                 $(this).prev('span').text(currentPageIndex);  
    14.             }))  
    15.             .append($('<a class="prev-page" href>下一页</a>').click(function () {  
    16.                 if (currentPageIndex == pageCount) return;  
    17.                 currentPageIndex++;  
    18.                 showRecords(currentPageIndex);  
    19.                 $(this).prevAll('span').text(currentPageIndex);  
    20.             }))  
    21.             .css(pagerInfo.css)  
    22.             .find('span').css({ padding: 0 });  
    23.   
    24.         var jRecords = this;  //保留作用域  
    25.         //pageIndex以1为开始  
    26.         var showRecords = function (pageIndex) {  
    27.             jRecords.hide();  //隐匿所有记录先  
    28.             var startIndex = (pageIndex - 1) * pagerInfo.pagesize,  //当前页的开始记录  
    29.                 endIndex = (pageIndex * pagerInfo.pagesize) - 1;   //当前页的结束记录  
    30.             jRecords.filter(':eq(' + startIndex + '),:gt(' + startIndex + ')').show();  //显示大于开始记录(包含)的所有记录  
    31.             jRecords.filter(':gt(' + endIndex + ')').hide();  //隐藏大于结束记录的所有记录,以达到分页效果  
    32.         };  
    33.   
    34.         showRecords(currentPageIndex);  
    35.     };  

     使用举例:

    [javascript] view plaincopyprint?
     
    1. $('#feedback ul li')  //数据源  
    2. .pager({   
    3. pagesize: 10, //分页大小  
    4. container: $('#feedback'), //容纳分页html的容器  
    5. css: { 'margin-left': '40px'} //分页html的样式  
    6. });  
  • 相关阅读:
    [原创]PostgreSQL Plus Advanced Server批量创建分区表写入亿级别数据实例
    [原创]从Oracle和Microsoft Sql Server迁移到PostgreSQL Plus Advanced Server
    [原创]PostgreSQL Plus Advince Server在 HA环境中一对多的Stream Replication配置(四)
    【译】x86程序员手册41-10.6 TLB(快表)测试
    【译】x86程序员手册40-10.5初始化的例子
    【译】x86程序员手册39-10.3切换到保护模式
    【译】x86程序员手册38-10.2实在址模式下的软件初始化
    【译】x86程序员手册37-第10章 初始化
    【译】x86程序员手册36-9.9异常汇总
    【译】x86程序员手册35-9.8异常条件
  • 原文地址:https://www.cnblogs.com/xiaochao12345/p/3937661.html
Copyright © 2011-2022 走看看