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>
page 分页的更多相关文章
- page分页问题,根据页码获取对应页面的数据,接口调用
添加一个log.js文件,进行接口调用. import axios from '@/libs/api.request' const MODULE_URL = '/log'; export const ...
- layui -page 分页类
<?phpnamespace page; // +---------------------------------------------------------------------- / ...
- 封装page分页类
类: <?php //分页工具类 class Page{ /* * 获取分页字符串 * @param1 string $uri,分页要请求的脚本url ...
- page分页
首先封装一个分页类 public class Page<T> { /** * 当前页号 */ private int pageNumber; /** * 总条数 */ private in ...
- page分页类
<?php /** file: Page.class.php 完美分页类 Page */ class Page { private $total; //数据表中总记录数 private $lis ...
- java Page分页显示
//entity层实体类 import java.util.List; //分页展示 //相关属性:当前页,页大小(每页显示的条数),总页数,总条数,数据 //select * from t_user ...
- jQuery.page 分页控件
分享一下自己在项目中引用的Jquery分页控件 index.html内容 <!DOCTYPE html> <html lang="zh-cn" xmlns=&qu ...
- MVC Page分页控件
MVCPage帮助类 控制器代码 public ActionResult Article(int? page) { //Session["ArticleClass"] = cont ...
- JPA+Postgresql+Spring Data Page分页失败
按照示例进行如下代码编写 Repository Page<DeviceEntity> findByTenantId(int tenantId, Pageable pageable); se ...
随机推荐
- Java8 新特性之默认接口方法
摘要: 从java8开始,接口不只是一个只能声明方法的地方,我们还可以在声明方法时,给方法一个默认的实现,我们称之为默认接口方法,这样所有实现该接口的子类都可以持有该方法的默认实现. · 待定 一. ...
- 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 ...
- Codeforces 385C - Bear and Prime Numbers(素数筛+前缀和+hashing)
385C - Bear and Prime Numbers 思路:记录数组中1-1e7中每个数出现的次数,然后用素数筛看哪些能被素数整除,并加到记录该素数的数组中,然后1-1e7求一遍前缀和. 代码: ...
- HTML表单组件
HTML表单组件 一.说明 form标签里面的东西 二.效果图 三.代码 <!DOCTYPE html> <html> <head> <title>Fo ...
- SpringBoot读取war包jar包Resource资源文件解决办法
SpringBoot读取war包jar包Resource资源文件解决办法 场景描述 在开发过程中我们经常会碰到要在代码中获取资源文件的情况,而我在最近在SpringBoot项目中时碰到一个问题,就是在 ...
- Confluence 6 完成你的任务
很好,宇航员们,你已经令人钦佩的展示了你自己的.我们确定你新招募的员工已经对你了解的 Confluence 知识感到赞叹. 在这个指南中,我们已经完成了: 在主面板中对 Confluence 的功能进 ...
- AC自动机练习
多模板串匹配一般有两种方法 暴力kmp, 适用于模板串少的情形 直接trie上暴力, 适用于模板串比较短的情形, 并且可以动态插入合并 建立AC自动机, 复杂度是严格线性的, 但不能动态插入 cons ...
- mysql日期查询大全
-- 查询昨日一整天的数据 DAY) ,'%Y-%m-%d 23:59:59') AS '昨日结束时间' -- 查询今日开始到当前时间的数据 DAY) ,'%Y-%m-%d %H:%i:%s') AS ...
- 使用GAN 进行异常检测——anoGAN,TODO,待用于安全分析实验
先说实验成功的代码: git clone https://github.com/tkwoo/anogan-keras.git mkdir weights python main.py --mode t ...
- Intel DAAL AI加速 ——传统决策树和随机森林
# file: dt_cls_dense_batch.py #===================================================================== ...