zoukankan      html  css  js  c++  java
  • page 分页

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    </head>
    <body>
    <ul class="list">


    </ul>
    </body>
    <script type="text/javascript">
    /**
    * 数量多(数据) 假设120条数据
    * 一页N条
    * 一共多少页 120/N
    *
    * 数量123条
    * 每页15条
    * 告诉我第6页 应该取几到几
    *
    * 花 123/15 等于9页
    *
    * 1-15 1
    * 16-30 2
    * 31-45 3
    * 46-60 4
    *
    * 页码-1 * 每页数量 +1
    *
    * (3-1)*15+1 31 ~ 3*15
    *
    * 内容
    * 每页的内容数量
    *
    * 一花多少条
    * 每页(组) 显示多少条
    * 一共有多少组 总条数/每组数量 = 总组数
    * 根据页码取区间的数据 (当前页码-1)*每页数量+1 起始值 页码*每页数量 结束值
    *
    *
    *
    *
    *
    */

    function page(data,num){

    this.data = data || [];

    this.num = num || 10;

    this.total = 0;

    this.prev = 0;

    this.next = 0;

    this.home = 1;

    this.end = 0;

    this.current = 1;

    this.pages;

    return this.init().getPage();



    }

    page.prototype = {

    init:function(){

    var data = this.data.length;

    var total = Math.ceil(data/this.num);

    this.end = total;

    this.total = total;

    return this
    },
    getPage:function(){

    var url = location.search.substr(1).split('&');

    var current = 0;

    for(var i = 0; i<url.length;i++){

    var tmp = url[i].split('=');

    if(tmp[0]=='page'){

    current = tmp[1];

    }

    }

    current = parseInt(current) || 1;

    this.current = current;


    this.next = current<this.total ? current+1:this.end;

    this.prev = current>1 ? current-1 : 1;

    return this

    },

    getContent:function(){

    var cur = this.current;

    var num = this.num;

    var start = (cur-1)*num+1;

    var end = cur*num;

    var pageList = [];

    end = end< this.data.length ? end :this.data.length;

    for(;start<=end;start++){

    pageList.push(start)
    }
    // 起始值 当前页-1*每页条数+1
    // 结束值 当前页*每页条数


    this.pages = pageList;


    return this
    },

    pageList:function(){


    return this
    }

    }

    var data = [];

    for(var i = 0; i<124;i++){

    data.push('第'+(i+1)+'条内容')
    }



    var demo = new page(data).getContent()


    console.log(demo)

    var html = '';

    for(var i = 0; i<demo.pages.length;i++){

    html+='<li><a href="xx.php?id='+demo.pages[i]+'">'+demo.pages[i]+data[demo.pages[i]-1]+'</a></li>';

    }


    document.querySelector('.list').innerHTML = html;






    </script>
    </html>
  • 相关阅读:
    计算机网络通信
    javap查看class文件
    JDK动态代理与CGLib动态代理
    error the @annotation pointcut expression is only supported at Java 5 compliance
    redis清空缓存
    利用HttpURLConnection发送请求
    linux下用命令导出mysql表数据
    adb push和pull使用
    mysqld.exe占比cpu 100% 解决方案
    养成好习惯
  • 原文地址:https://www.cnblogs.com/shuaishuaidejun/p/6580965.html
Copyright © 2011-2022 走看看