• 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. });  
  • 相关阅读:
    2018-04-27 搭建Python官方文档翻译环境-汉化示例代码
    2018-04-21 搭建Python官方文档翻译环境
    2018-01-19 Xtext试用: 5步实现一个(中文)JVM语言
    2018-02-27 "Literate Programming"一书摘记之一
    2018-02-18 Antlr4实现简单语言之条件语句
    2018-02-17 中文代码示例[译]Scala中创建隐式函数
    2018-02-16 中文代码示例之冒泡算法, 后感
    C code example for strdup
    Hash table: why size should be prime?
    Hash table lengths and prime numbers
  • 原文地址:https://www.cnblogs.com/xiaochao12345/p/3937661.html
Copyright © 2020-2023  润新知