wf-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>
wf-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.创建一个分页 ...
随机推荐
- 九度 1557：和谐答案 (LIS 变形)
题目描述: 在初试即将开始的最后一段日子里,laxtc重点练习了英语阅读的第二部分,他发现了一个有意思的情况.这部分的试题最终的答案总是如下形式的:1.A;2.C;3.D;4.E;5.F.即共有六个空 ...
- 线程同步 –Mutex和Semaphore
上一篇介绍了同步事件EventWaitHandle,以及它的两个子类型AutoResetEvent和ManualResetEvent.下面接着介绍WaitHandle的另外两个子类型Mutex和Sem ...
- WPF送走控件的focus方法
我们可以调用Focus()方法,让WPF控件获得焦点, 那我现在不想要焦点了, 如何把这个包袱抛出去? 可以, 恩, 没有Unfocus(), 但下面的方法也许可行(把焦点抛给另一个不知道的控件): ...
- ios开发之--textview意见反馈页面（占位label，字数统计，提交按钮的交互设置）
记录一个页面的功能: textview的占位符,字数统计,提交按钮的交互设置,具体效果图如下:
- Java获取项目当前请求的全部URL，Java获取Referer，Java获取完整链接地址URL
Java获取项目当前请求的全部URL,Java获取Referer,Java获取完整链接地址URL >>>>>>>>>>>>> ...
- form提交表单没接收到$_POST
分享一个最近做项目遇到的奇葩经历: 很奇怪的,我在弄一个表单提交的时候,后台验证就报了非post提交错误 我就郁闷了,我form明明写的method为post,不可能是非post错误啊 经历反应测试, ...
- c++的字节对齐
win32平台下的微软C编译器对齐策略: 1)结构体变量的首地址能够被其最宽数据类型成员的大小整除.编译器在为结构体变量开辟空间时,首先找到结构体中最宽的数据类型,然后寻找内存地址能被该数据类型大小整 ...
- Python学习--字符串slicing
Found this great table at http://wiki.python.org/moin/MovingToPythonFromOtherLanguages Python indexe ...
- mybatis 之resultType="HashMap" parameterType="list"
<!-- 查询商品仓库信息 --> <select id="loadGoodsStock" resultType="HashMap" para ...
- Couldn’t load locSDK3
在项目的libs目录下新建一个文件夹,命名为armeabi-v7a,然后将liblocSDK3.so复制一份到该文件夹 ok