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 之 Service Broker
由于某些原因,我们的缓存依赖于数据库,而数据库反向通知需要依赖和使用ServiceBroker, 由于Deploy的人往往不是很清楚这个SB需要如何部署,特此记录. 判断数据库是否启用了Service ...
- RBF高斯径向基核函数【转】
XVec表示X向量.||XVec||表示向量长度.r表示两点距离.r^2表示r的平方.k(XVec,YVec) = exp(-1/(2*sigma^2)*(r^2))= exp(-gamma*r^2) ...
- hdu 4393 优先队列
用优先队列储存每个人的初始距离和编号,每轮求出最快的人,然后pop掉 一开始想遍历队列的,后来发现队列没办法遍历,汗-_-! 题意,给几个第一秒冲出的距离和以后速度,求每秒后最前面人的编号,求完后最前 ...
- CC2540开发板学习笔记（七）—— 睡眠唤醒
(一)中断唤醒 一.实验内容 通过中断唤醒在睡眠模式下的CC2540 二.实验原理 1.系统电源管理(工作方式) (1)全功能模式: 高频晶振(16M或者32M)和低频晶振(32.768K RCOSC ...
- Android 用adb pull或push 拷贝手机文件到到电脑上，拷贝手机数据库到电脑上，拷贝电脑数据库到手机上
先说一下adb命令配置,如果遇到adb不是内部或外部命令,也不是可运行的程序或批量文件.配置下环境变量 1.adb不是内部或外部命令,也不是可运行的程序或批量文件. 解决办法:在我的电脑-属性-高级计 ...
- Hark的数据结构与算法练习之若领图排序ProxymapSort
算法说明 若领图排序是分布排序的一种. 个人理解,若领图排序算是桶排序+计数排序的变异版,桶排序计数排序理解了,那么若领图排序理解起来就会比较容易.区别其实就是存储中间值的方式做了调整…… 话说,这个 ...
- IoC模式(转)
IoC模式 1.依赖 依赖就是有联系,有地方使用到它就是有依赖它,一个系统不可能完全避免依赖.如果你的一个类或者模块在项目中没有用到它,恭喜你,可以从项目中剔除它或者排除它了,因为没有一个地方会依赖它 ...
- 模拟 POJ 1573 Robot Motion
题目地址:http://poj.org/problem?id=1573 /* 题意:给定地图和起始位置,robot(上下左右)一步一步去走,问走出地图的步数 如果是死循环,输出走进死循环之前的步数和死 ...
- 【BZOJ】1441: Min（裴蜀定理）
http://www.lydsy.com/JudgeOnline/problem.php?id=1441 这东西竟然还有个名词叫裴蜀定理................ 裸题不说....<初等数 ...
- 获取当前 Windows 的安装序列号
Dim s s = InputBox("当前Windows系统序列号为:", "Windows序列号", GetWindowsSN) WScript.Quit ...