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. });  
  • 相关阅读:
    小白学Python(13)——pyecharts 绘制 柱状图/条形图 Bar
    小白学Python(12)——pyecharts ,生成词云图 WordCloud
    小白学Python(11)——pyecharts,绘制饼图 Pie
    小白学Python(10)——pyecharts 绘制仪表图 Gauge
    小白学Python(9)——pyecharts 绘制漏斗图 Funnel
    小白学Python(8)——pyecharts 入门
    小白学Python(7)——利用Requests下载网页图片、视频
    小白学Python(6)——python-pptx 添加图表
    python2/3 利用psycopg2 连接postgreSQL数据库。
    linux debian 9 / centos 7配置postgresSQL数据库
  • 原文地址:https://www.cnblogs.com/xiaochao12345/p/3937661.html
Copyright © 2011-2022 走看看