<!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>

page 分页的更多相关文章

  1. page分页问题，根据页码获取对应页面的数据，接口调用

    添加一个log.js文件,进行接口调用. import axios from '@/libs/api.request' const MODULE_URL = '/log'; export const ...

  2. layui -page 分页类

    <?phpnamespace page; // +---------------------------------------------------------------------- / ...

  3. 封装page分页类

    类: <?php //分页工具类 class Page{ /*         * 获取分页字符串         * @param1 string $uri,分页要请求的脚本url       ...

  4. page分页

    首先封装一个分页类 public class Page<T> { /** * 当前页号 */ private int pageNumber; /** * 总条数 */ private in ...

  5. page分页类

    <?php /** file: Page.class.php 完美分页类 Page */ class Page { private $total; //数据表中总记录数 private $lis ...

  6. java Page分页显示

    //entity层实体类 import java.util.List; //分页展示 //相关属性:当前页,页大小(每页显示的条数),总页数,总条数,数据 //select * from t_user ...

  7. jQuery.page 分页控件

    分享一下自己在项目中引用的Jquery分页控件 index.html内容 <!DOCTYPE html> <html lang="zh-cn" xmlns=&qu ...

  8. MVC Page分页控件

    MVCPage帮助类 控制器代码 public ActionResult Article(int? page) { //Session["ArticleClass"] = cont ...

  9. JPA+Postgresql+Spring Data Page分页失败

    按照示例进行如下代码编写 Repository Page<DeviceEntity> findByTenantId(int tenantId, Pageable pageable); se ...

随机推荐

  1. 技术分享：SSH实战项目

    1.需求分析 系统概述: 企业人事管理系统. 要求对员工信息进行维护. 后台系统先登录,才能操作员工;添加.修改.删除. 没有登录,只能查看列表,不能操作. 功能分类: 1)[管理员模块] 注册/登录 ...

  2. Java入门：零碎的知识点

    实例变量经常被称为属性 成员变量和局部变量:前者在类中定义,后者在类的方法中定义且系统不会自动赋初始值 我们创建一个对象的时候实际上执行的是无参的构造方法 静态变量 static String arr ...

  3. android照相及照片上传

        Java代码 package com.android.cist.camera.view; import java.io.ByteArrayOutputStream; import java.i ...

  4. js 基础数据类型和引用类型 ，深浅拷贝问题，以及内存分配问题

    js 深浅拷贝问题 浅拷贝一般指的是基本类型的复制 深拷贝一般指引用类型的拷贝,把引用类型的值也拷贝出来 举例 h5的sessionStorage只能存放字符串,所以要存储json时就要把json使用 ...

  5. 20170228VBA提取邮件部分信息

    Sub 获取OutLook收件箱主题和正文() On Error Resume Next Dim sht As Worksheet Dim olApp As Outlook.Application D ...

  6. Java 主要特性

    Java 有下面的一些主要特性. 面向对象 在 Java 中,所有的都是对象.正式因为 Java 基于对象模型,所以 Java 更加容易进行扩展. Java语言提供类.接口和继承等面向对象的特性,为了 ...

  7. 从mysql数据库删除重复记录只保留其中一条

    这两天做了一个调用第三方接口的小程序,因为是实时更新数据,所以请求接口的频率就很高,这样有时会出现往数据库插入重复的数据,对数据库造成压力也不方便管理,因为要通过原生sql语句,解决数据库的去重问题. ...

  8. turbine是怎么收集指标数据的

    turbine是怎么收集指标数据的 我们通过spring cloud图形化dashboard是如何实现指标的收集展示的知道了,图形化的指标是从turbine获取到指标数据的.那么turbine的数据是 ...

  9. 使用SAE（VAE）检测信用卡欺诈——感觉误报率还是比较高啊 70%+误报 蛋疼

    from sklearn.model_selection import train_test_split from sklearn.preprocessing import StandardScale ...

  10. spark RDD操作的底层实现原理

    RDD操作闭包外部变量原则 RDD相关操作都需要传入自定义闭包函数(closure),如果这个函数需要访问外部变量,那么需要遵循一定的规则,否则会抛出运行时异常.闭包函数传入到节点时,需要经过下面的步 ...