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.创建一个分页 ...
随机推荐
- DropDownListFor的种种纠结（禁止转载）
严重禁止转载,好多爬虫软件为了浏览到处抓东西,真缺德 具有键“CorpType”的 ViewData 项属于类型“System.Int64”,但它必须属于类型“IEnumerable<Selec ...
- js中toFixed() 的使用（转）
转载:http://www.studyofnet.com/news/292.html 一.定义和用法 toFixed() 方法可把 Number 四舍五入为指定小数位数的数字. 语法 NumberOb ...
- C语言对文件的基本操作
在C语言中,对于文件的操作是利用FILE结构体进行的. 几个常用的操作文件函数简介 1:打开文件 FILE *fopen( const char *filename, const char *mode ...
- springboot学习过程笔记
1.spring-boot-devtools热部署在IDEA中配置后不起作用(Eclipse设置了自动编译,所以不用额外设置) 1).pom.xml添加spring-boot-devtools依赖后 ...
- 设置js同源
1)设置 document.domain 成一样的就行了(前提是都是同一个顶级域名) 2)例如,域名1:news.xxx.com ,域名2:member.xxx.com,这时可以设置它们的 docum ...
- linux-指定特殊域去重
测试数据: 2017-10-24 14:14:11:1123 [ INFO] order_type=add,order_id=9152017-10-24 14:14:11:1123 [ INFO] o ...
- iOS开发-VFL初窥
VFL是苹果为了简化Autolayout的编码而推出的抽象语言,在上一篇博客中我们发现如果使用NSLayoutConstraint来添加约束是非常繁琐的. 一个简单的Frame需要添加四个NSLayo ...
- [OSX] 使用 MacPorts 安装 Python 和 pip 指南
Mac OS 未预装任何在 Unix/Linux 中常见的命令行包管理工具,Mac OS 中的 App Store 和自身的软件升级功能可以下载更新许多比较好的应用,但这些应用多数是满足普通消费者需求 ...
- oracle nvl,having的用法
select oi.order_id,opl.payment_no,opl.back_no, oi.commit_time, oi.receive_mobile, oi.receive_user, n ...
- Bugly最简单的配置方法
1,注册Bugly帐号 2.项目 build.gradle 中配置 compile 'com.tencent.bugly:crashreport:latest.release'//其中latest.r ...