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. });  
  • 相关阅读:
    关于Asp.net应用程序生命周期
    xmlHttpRequest 以Post方式发数据到Asp.net页,在gb2312编码下的解决办法
    Asp.net中TreeView gb2312状态PopulateNodesFromClient乱码问题
    Subsonic中的MarkOld与MarkNew的一些使用
    非递归一次性加载分类数据到TreeViw
    Atitit rss没落以及替代品在线阅读器
    Atitit 2016年attilax事业成就表
    Atitit HTTP 认证机制基本验证 (Basic Authentication) 和摘要验证 (Digest Authentication)attilax总结Atitit HT
    Atitit 项目语言的选择 java c#.net  php??
    atitit 商业项目常用模块技术知识点 v3 qc29
  • 原文地址:https://www.cnblogs.com/xiaochao12345/p/3937661.html
Copyright © 2011-2022 走看看