<!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. Android JNI学习(四)——JNI的常用方法的中文API

    本系列文章如下: Android JNI(一)——NDK与JNI基础 Android JNI学习(二)——实战JNI之“hello world” Android JNI学习(三)——Java与Nati ...

  2. scss 覆盖 原有变量

    在scss的variables.scss 中会有很多的变量 $color: red !default; $body-color: $color !default; 这些!default 和我们理解的! ...

  3. MSSQL 一坑 SQL Management Studio 管理工具的快捷方式被删掉了

    如果确定已经安装的情况下,到这里去找下吧(我这里用的是sql 2008) C:\Program Files\Microsoft SQL Server\100\Tools\Binn\VSShell\Co ...

  4. codeforces 993c//Careful Maneuvering// Codeforces Round #488 by NEAR (Div. 1)

    题意:x轴-100和+100的有敌人飞船,纵坐标由输入数据给出,我方有2飞船在x轴0,y坐标待定.0时刻时敌人同时向我方2飞船发出光线,光线会穿透飞船打到敌人自己,问2飞船放在哪敌人损失最大? 假如- ...

  5. Codeforces Round #364 (Div. 1) (差一个后缀自动机)

    B. Connecting Universities 大意: 给定树, 给定2*k个点, 求将2*k个点两两匹配, 每个匹配的贡献为两点的距离, 求贡献最大值 单独考虑每条边$(u,v)$的贡献即可, ...

  6. ubuntu系统连接windows系统

    1,首先我们要在ubuntu系统是输入:sudo apt-get install rdesktop 2, 用法: rdesktop[options] server[:port]     .其实我们就可 ...

  7. zzuli1728(数学期望,组合数)

    1728: 社交网络 Time Limit: 2 Sec  Memory Limit: 128 MBSubmit: 232  Solved: 64 SubmitStatusWeb Board Desc ...

  8. 图片上传--Upload

    图片上传--Upload 图片上传基于spring框架写的代码: 1.首先:我们要再springmvc中添加试图解析器: <!-- 图片解析器 --> <bean id=" ...

  9. 基于zuul实现自定义路由源码分析

    ZuulFilter定义 通过继承ZuulFilter我们可以定义一个新的过滤器,如下 public class IpAddressFilter extends ZuulFilter { @Autow ...

  10. oracle图形界面配置tns

    oracle图形界面配置tns       启动orcl服务