<!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. Java8 新特性之默认接口方法

    摘要: 从java8开始,接口不只是一个只能声明方法的地方,我们还可以在声明方法时,给方法一个默认的实现,我们称之为默认接口方法,这样所有实现该接口的子类都可以持有该方法的默认实现. · 待定 一. ...

  2. Error updating database. Cause: com.mysql.jdbc.MysqlDataTruncation: Data truncation: Truncated incorrect DOUBLE value: 'as3'

    执行更新时的出错信息 Whitelabel Error Page This application has no explicit mapping for /error, so you are see ...

  3. Codeforces 385C - Bear and Prime Numbers(素数筛+前缀和+hashing)

    385C - Bear and Prime Numbers 思路:记录数组中1-1e7中每个数出现的次数,然后用素数筛看哪些能被素数整除,并加到记录该素数的数组中,然后1-1e7求一遍前缀和. 代码: ...

  4. HTML表单组件

    HTML表单组件 一.说明 form标签里面的东西 二.效果图 三.代码 <!DOCTYPE html> <html> <head> <title>Fo ...

  5. SpringBoot读取war包jar包Resource资源文件解决办法

    SpringBoot读取war包jar包Resource资源文件解决办法 场景描述 在开发过程中我们经常会碰到要在代码中获取资源文件的情况,而我在最近在SpringBoot项目中时碰到一个问题,就是在 ...

  6. Confluence 6 完成你的任务

    很好,宇航员们,你已经令人钦佩的展示了你自己的.我们确定你新招募的员工已经对你了解的 Confluence 知识感到赞叹. 在这个指南中,我们已经完成了: 在主面板中对 Confluence 的功能进 ...

  7. AC自动机练习

    多模板串匹配一般有两种方法 暴力kmp, 适用于模板串少的情形 直接trie上暴力, 适用于模板串比较短的情形, 并且可以动态插入合并 建立AC自动机, 复杂度是严格线性的, 但不能动态插入 cons ...

  8. mysql日期查询大全

    -- 查询昨日一整天的数据 DAY) ,'%Y-%m-%d 23:59:59') AS '昨日结束时间' -- 查询今日开始到当前时间的数据 DAY) ,'%Y-%m-%d %H:%i:%s') AS ...

  9. 使用GAN 进行异常检测——anoGAN,TODO,待用于安全分析实验

    先说实验成功的代码: git clone https://github.com/tkwoo/anogan-keras.git mkdir weights python main.py --mode t ...

  10. Intel DAAL AI加速 ——传统决策树和随机森林

    # file: dt_cls_dense_batch.py #===================================================================== ...