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.创建一个分页 ...
随机推荐
- win32_11gR2_database安装教程
- 电赛初探（一）——正弦波、方波、锯齿波转换
一.题目要求: 1.使用555做出脉冲方波 2.使用TL084运放做出方波和锯齿波 3.使用TLM314稳压做直流偏置 4.方波要求峰峰值为1V,正弦波要求峰值为0~2V,锯齿波要求峰峰值为1V. 二 ...
- zookeeper 4 letter 描述与实践
命令示例描述 Conf echo conf | nc localhost 2181 (New in 3.3.0)输出相关服务配置的详细信息.比如端口.zk数据及日志配置路径.最大连接数,session ...
- Oracle查询表里的重复数据方法：
一.背景 一张person表,有id和name的两个字段,id是唯一的不允许重复,id相同则认为是重复的记录. 二.解决 select id from group by id having count ...
- LightOJ1158 Anagram Division（状压DP）
题目问一个数字字符串的不重复全排列有几个能被d整除. dp[S][m]表示用字符集合S构成的%d为m的数字字符串个数 dp[0][0]=0 我为人人转移,dp[S+{x}][(m*10+str[x]- ...
- LightOJ1064 Throwing Dice（DP）
第一眼以为是概率DP,我还不会.不过看题目那么短就读读,其实这应该还不是概率DP,只是个水水的DP.. dp[n][s]表示掷n次骰子点数和为s的情况数 dp[0][0]=1 dp[i][j]=∑dp ...
- LightOJ1037 Agent 47（状压DP）
dp[S]表示已经消灭目标集合为S的最少射击数 dp[0]=0 dp[S]=min( dp[S'] + min( health[i] , health[i]/demage[j][i] ) ) 其中S ...
- BZOJ3595 : [Scoi2014]方伯伯的Oj
由于n很大,有2e8,所以不能直接用splay来维护排名 把splay修改一下 每个节点维护一个区间[l,r],表示编号在[l,r]之间的所有点都在这里 需要支持一个takeout操作: 把编号为k的 ...
- 【BZOJ】1821: [JSOI2010]Group 部落划分 Group（最小生成树+贪心）
http://www.lydsy.com:808/JudgeOnline/problem.php?id=1821 这题裸题. 本题要求最短距离最长,很明显,我们排序. 这里存在贪心,即我们把边权最小的 ...
- 理解with(nolock)(转载)
本文导读:要 提升SQL的查询效能,一般来说大家会以建立索引(index)为第一考虑.其实除了index的建立之外,当我们在下SQL Command时,在语法中加一段WITH (NOLOCK)可以改善 ...