diy-pagination-javascript 分页
1 <?php
isset($_REQUEST['form_single_page_num']) && !empty($_REQUEST['form_single_page_num']) ? $single_page_num = $_REQUEST['form_single_page_num'] : $single_page_num = 50;
isset($_REQUEST['form_go_page_num']) && !empty($_REQUEST['form_go_page_num']) ? $go_page_num = $_REQUEST['form_go_page_num'] : $go_page_num = 1; //setcookie('go_page_num',$go_page_num, time()+60);
$data_sum = 9688;
$db = gen_data($data_sum);
$page_sum = ceil($data_sum / $single_page_num);
$fetch_data = fetch_data($single_page_num, $go_page_num, $db);
$fetch_data = fetch_data($single_page_num, $go_page_num, $db); function fetch_data($single_page_num, $go_page_num, $db)
{
global $page_sum;
global $data_sum;
$fetch_data = array();
if ($go_page_num == $page_sum) {
$end = $data_sum;
$start = $single_page_num * ($go_page_num - 1);
} else {
$end = $single_page_num * $go_page_num;
$start = $end - $single_page_num;
} for ($w = $start; $w < $end; $w++) {
array_push($fetch_data, $db[$w]);
}
return $fetch_data;
} function gen_data($data_sum)
{
$gen = array();
for ($w = 0; $w < $data_sum; $w++) {
$tmp = $w + 1;
$gen[$w]['rand'] = 'rand' . rand(123, 987);
$gen[$w]['w'] = 'w' . $tmp;
}
return $gen;
} ?> <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>pagination-diy</title>
<!-- <script src="jquery-3.1.0.min.js"></script>-->
</head>
<body>
<div style="margin: 0 auto;text-align: center">
<div id="page_area" class="pagination">
</div>
</div>
<form method="post" id="javascript_page">
<input type="hidden" name="form_single_page_num">
<input type="hidden" name="form_go_page_num" id="form_go_page_num">
</form>
<? foreach ($fetch_data as $one) {
echo $one['rand'] . '---' . $one['w'] . '<br>';
} ?> </body>
</html> <style type="text/css">
.page {
display: inline;
padding: 0.3em;
border: 0.1em solid deepskyblue;
border-radius: 0.3em;
margin: 0.31em;
}
</style> <script>
var page_sum = <?=$page_sum?>, go_page_num =<?=$go_page_num?>;
var id_page_area = document.getElementById('page_area');
id_page_area.innerHTML = gen_pagelist();
console.log(go_page_num);
document.getElementById('<?='p'.$go_page_num?>').style.color = "red"; function gen_pagelist() {
var pagelist = '<div class="page">共<?= $page_sum ?>页</div> '
var page_num_remain = page_sum - go_page_num;
if (page_sum < 7) {
switch (page_sum) {
case 0 :
case 1 :
break;
case 2 :
pagelist += '<div class="page" onclick="w()" id="p1">1</div> <div class="page" onclick="w()" id="p2">2</div> ';
break;
case 3 :
pagelist += '<div class="page" onclick="w()" id="p1">1</div> <div class="page" onclick="w()" id="p2">2</div> <div class="page" onclick="w()" id="p3">3</div> ';
break;
case 4 :
pagelist += '<div class="page" onclick="w()" id="p1">1</div> <div class="page" onclick="w()" id="p2">2</div> <div class="page" onclick="w()" id="p3">3</div> <div class="page" onclick="w()" id="p4">4</div> ';
break;
case 5 :
pagelist += '<div class="page" onclick="w()" id="p1">1</div> <div class="page" onclick="w()" id="p2">2</div> <div class="page" onclick="w()" id="p3">3</div> <div class="page" onclick="w()" id="p4">4</div> <div class="page" onclick="w()" id="p5">5</div> ';
break;
case 6 :
pagelist += '<div class="page" onclick="w()" id="p1">1</div> <div class="page" onclick="w()" id="p2">2</div> <div class="page" onclick="w()" id="p3">3</div> <div class="page" onclick="w()" id="p4">4</div> <div class="page" onclick="w()" id="p5">5</div> <div class="page" onclick="w()" id="p6">6</div> ';
break;
case 7 :
pagelist += '<div class="page" onclick="w()" id="p1">1</div> <div class="page" onclick="w()" id="p2">2</div> <div class="page" onclick="w()" id="p3">3</div> <div class="page" onclick="w()" id="p4">4</div> <div class="page" onclick="w()" id="p5">5</div> <div class="page" onclick="w()" id="p6">6</div> <div class="page" onclick="w()" id="p7">7</div> ';
break;
}
} else {
pagelist += '<div class="page" onclick="w()" id="page_start">首页</div> ';
if (page_num_remain < 3) {
var tmp = page_sum - 6;
pagelist += '<div class="page" onclick="w()" id="p' + tmp + '">' + tmp + '</div> ' +
'<div class="page" onclick="w()" id="p' + (++tmp) + '">' + tmp + '</div> ' +
'<div class="page" onclick="w()" id="p' + (++tmp) + '">' + tmp + '</div> ' +
'<div class="page" onclick="w()" id="p' + (++tmp) + '">' + tmp + '</div> ' +
'<div class="page" onclick="w()" id="p' + (++tmp) + '">' + tmp + '</div> ' +
'<div class="page" onclick="w()" id="p' + (++tmp) + '">' + tmp + '</div> ' +
'<div class="page" onclick="w()" id="p' + (++tmp) + '">' + tmp + '</div> ';
} else {
if (go_page_num < 4) {
pagelist += '<div class="page" onclick="w()" id="p1">1</div> <div class="page" onclick="w()" id="p2">2</div> <div class="page" onclick="w()" id="p3">3</div> <div class="page" onclick="w()" id="p4">4</div> <div class="page" onclick="w()" id="p5">5</div> <div class="page" onclick="w()" id="p6">6</div> <div class="page" onclick="w()" id="p7">7</div> '; } else {
var tmp = go_page_num - 3;
pagelist += '<div class="page" onclick="w()" id="p' + tmp + '">' + tmp + '</div> ' +
'<div class="page" onclick="w()" id="p' + (++tmp) + '">' + tmp + '</div> ' +
'<div class="page" onclick="w()" id="p' + (++tmp) + '">' + tmp + '</div> ' +
'<div class="page" onclick="w()" id="p' + go_page_num + '">' + go_page_num + '</div> ' +
'<div class="page" onclick="w()" id="p' + (++go_page_num) + '">' + go_page_num + '</div> ' +
'<div class="page" onclick="w()" id="p' + (++go_page_num) + '">' + go_page_num + '</div> ' +
'<div class="page" onclick="w()" id="p' + (++go_page_num) + '">' + go_page_num + '</div> ';
} }
pagelist += '<div class="page" onclick="w()" id="page_end">尾页</div> '; }
return pagelist;
} function w() {
id_page_area.innerHTML = '';
var id = event.target.id;
switch (id) {
case 'page_start':
go_page_num = 1;
break;
case 'page_end':
go_page_num = <?=$page_sum?>;
break;
default :
go_page_num = id.substr(1);
break;
}
document.getElementById('form_go_page_num').value = go_page_num;
id_page_area.innerHTML = gen_pagelist();
document.getElementById('javascript_page').submit();
}
</script>
diy-pagination-javascript 分页的更多相关文章
- easyUI之Pagination（分页）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- javascript实例学习之四——javascript分页
话不多少,直接上代码 html代码: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- jQuery Pagination Ajax分页插件中文详解（摘）
jQuery Pagination Ajax分页插件中文详解 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxin ...
- 浅谈jQuery Pagination Ajax 分页插件的使用
插件介绍 此插件是jQuery的ajax分页插件.分页切换时无刷新也无延迟,因为是一次性加载的.如果你用到此插件作分页的时候,涉及到的数据量大,建议不要使用此插件,因为加载慢会导致用户体验不好! 插件 ...
- Django-restframework25 Pagination（分页）
Django-restframework25 Pagination(分页) 2017年11月11日 15:14:36 敲代码的伪文青 阅读数:1021 标签: restful 更多 个人分类: res ...
- jquery.pagination.js分页
参数说明 参数名 描述 参数值 maxentries 总条目数 必选参数,整数 items_per_page 每页显示的条目数 ...
- jquery.pagination.js分页插件的使用
Pagination的相关参数: Pagination使用的核心代码: //回调函数 function pageselectCallback(page_index, j ...
- (推荐)jquery.pagination.js分页
序言 本来想自己对这个分页使用做一些总结的,但发现大神们已经总结的很好了.所以给推荐一下. 转自:http://www.cnblogs.com/knowledgesea/archive/2013/01 ...
- RE： Javascript分页处理
背景: 调用PHP后端给的接口,以实现分页的功能.由于我是没造轮子的能力,所以翻了不少技术博客,经过整合才算完成整个分页功能.从一番查阅中,不难看出大概分为两种不同的分页: 一种是纯前端的,就是在一次 ...
- Angular4.+ ngx-bootstrap Pagination 自定义分页组件
Angular4 随笔(二) ——自定义分页组件 1.简介 本组件主要是实现了分页组件显示功能,通过使用 ngx-bootstrap Pagination分页组件实现. 基本逻辑: 1.创建一个分页 ...
随机推荐
- Sql Server REPLACE函数的使用
REPLACE用第三个表达式替换第一个字符串表达式中出现的所有第二个给定字符串表达式. 语法REPLACE ( ''string_replace1'' , ''string_replace2'' , ...
- SQL2005备份数据库到远程服务器中
--打开高级设置EXEC sp_configure 'show advanced options', 1RECONFIGURE--打开xp_cmdshell扩展存储过程EXEC sp_configur ...
- js执行顺序
我们知道有个全局的 window对象,js的一切皆window上的属性和方法.window上有个window.document属性,记录了整个html的dom树,document是顶层. body 和 ...
- 移动端Web开发之我见
Web比App简单? 前两天有人问手机上做网页简单还是做app简单,我真答不上来.很多人会不以为意的说当然是网页简单,但真的是这样吗? 放眼现在上线的手机网页,大多数都是平时pc的技术沿用过来的,鲜有 ...
- Spring AOP 详解
AOP使用场景 AOP用来封装横切关注点,具体可以在下面的场景中使用: Authentication 权限 Caching 缓存 Context passing 内容传递 Error handling ...
- HTML-Canvas02
文字对齐方式 : 水平对齐 //是用 textAlign 属性设置水平对齐方式(默认坐标点) ctx.textAlign = "start"; ctx.font = "3 ...
- 简单几何(线段覆盖) POJ 3347 Kadj Squares
题目传送门 题意:告诉每个矩形的边长,它们是紧贴着的,问从上往下看,有几个还能看到. 分析:用网上猥琐的方法,将边长看成左端点到中心的距离,这样可以避免精度问题.然后先求出每个矩形的左右端点,然后如果 ...
- DFS/BFS Codeforces Round #301 (Div. 2) C. Ice Cave
题目传送门 /* 题意:告诉起点终点,踩一次, '.'变成'X',再踩一次,冰块破碎,问是否能使终点冰破碎 DFS:如题解所说,分三种情况:1. 如果两点重合,只要往外走一步再走回来就行了:2. 若两 ...
- java多次替换(replace不行)
import java.util.regex.Matcher; import java.util.regex.Pattern; public class test { public static vo ...
- Splay 伸展树
废话不说,有篇论文可供参考:杨思雨:<伸展树的基本操作与应用> Splay的好处可以快速分裂和合并. ===============================14.07.26更新== ...