pagination 分页
<!DOCTYPE html>
<html>
<head>
<title>pagination</title>
<style type="text/css" media="screen">
a{
padding: 5px;
border:1px solid #ddd;
border-radius: 5px;
margin-right: 5px;
cursor: pointer;
}
span{
border: 1px solid #ddd;
display: inline-block;
width: 60px;
height: 20px;
margin-top: 30px;
text-align: center;
}
input{
width: 60px;
text-align: center;
border:1px solid #ddd;
height: 20px;
}
</style>
</head>
<body>
<div id="content"></div>
<span contenteditable="true"></span>
<button id="btn" type="button">跳转</button>
<input type="text">
<button id="btn2" type="button">总页数</button>
<div id="hidden" type="hidden" num="1"></div>
<script src="jquery-1.12.4.min.js"></script>
<script>
function init(pa,p){
var html = '<a class="pre">上一页</a>';
if(pa<=5){
for(var i=1;i<=pa;i++){
html += '<a>'+i+'</a>';
}
}else{
if(p+3<pa && p-3>1){
html += '<a>1</a><a>...</a>';
for(var i=p-2;i<=p+2;i++){
html += '<a>'+i+'</a>';
}
html += '<a>...</a><a>'+pa+'</a>';
}
if(p+3>=pa && p-3>1){
html += '<a>1</a><a>...</a>';
for(var i=p-2;i<=pa;i++){
html += '<a>'+i+'</a>';
}
}
if(p-3<=1 && p>5){
for(var i=1;i<=p+2;i++){
html += '<a>'+i+'</a>';
}
html += '<a>...</a><a>'+pa+'</a>';
}
if(p-3<=1 && p<5){
for(var i=1;i<=p+2;i++){
html += '<a>'+i+'</a>';
}
html += '<a>...</a><a>'+pa+'</a>';
}
html += '<a class="last">下一页</a>'
}
$('#content').html(html);
}
$(function(){
init(30,1);
var time = setInterval(function(){
$('a:not(a.last):not(a.pre)').on('click',function(){
var p = Number($(this).text());
$('#hidden').attr('num',p);
init(30,p);
});
$('#btn').click(function(){
var p = Number($('span').text());
var pa = Number($('input').val())!=""?Number($('input').val()):5;
init(pa,p)
});
$('#btn2').click(function(){
var p = Number($('span').text())!=""?Number($('span').text()):1;
var pa = Number($('input').val())!=""?Number($('input').val()):5;
init(pa,p)
});
//problem
// $('.last').click(function(){
// var p = $('#hidden').attr('num');
// p++;
// $('#hidden').attr('num',p);
// var pa = Number($('input').val())!=""?Number($('input').val()):30;
// console.log(pa,p)
// init(pa,p)
// });
},400);
})
</script>
</body>
</html>
pagination 分页的更多相关文章
- Slider 滚动条 Pagination分页插件 JS Ajax 数据范围筛选 加载 翻页 笔记
入职以后的第二个任务 根据用户所选的价格范围 筛选数据 修复BUG - 筛选数据后 总数没有更新.列表显示错误.翻页加载错误 用到的一些知识点 jquery插件系列之 - Slider滑块 max ...
- EasyUI基础入门之Pagination(分页)
前言 对于一些企业级的应用来说(非站点),页面上最为基本的内容也就是表格和form了.对于类似于ERP这类系统来说数据记录比較大,前端表格展示的时候必需得实现分页功能了.恰巧EasyUI就提供了分页组 ...
- doT.js模板和pagination分页应用
doT.js模板和pagination分页应用 博客中模拟了数据加载初始化的过程.doT.js渲染每一项内容的数据项.示例如下: <script id="Messtmpl" ...
- jQuery Pagination分页插件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 第二百零九节，jQuery EasyUI，Pagination(分页)组件
jQuery EasyUI,Pagination(分页)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Pagination(分页)组件的使 ...
- Django框架 之 Pagination分页实现
Django框架 之 Pagination分页实现 浏览目录 自定义分页 Django内置分页 一.自定义分页 1.基础版自定义分页 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ...
- jQuery Pagination分页插件--刷新
源码地址:https://github.com/SeaLee02/FunctionModule/blob/master/UploadFiles/WebDemo/FenYE/FenYeDemo.aspx ...
- Angular pagination分页模块 只提供分页参数处理 不处理分页记录数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件
DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...
- jq pagination分页 全选、单选的思考
$().pagination(总条数,配置项); 后端分页的跨页选择: 思路:把浏览过的页整体保存为,整体拥有 curPage(当前页码).allChoice(当前页是否全选).selected当前页 ...
随机推荐
- Ubuntu16.04安装有道词典
1.首先需要安装依赖包gstreamer0.10-plugins-ugly_0.10.19-2.1_amd64.deb,但是该依赖包 仍有两个依赖包需要提前安装,这三个依赖包都可以从这里下载 下载之后 ...
- css中“~”和“>”是什么意思？
css中"~"是: 为所有相同的父元素中位于 p 元素之后的所有 ul 元素设置背景: p~ul{ background:#ff0000; } <p>快乐生活&l ...
- 海外建VPS并支持VPN
推荐 DigitalOcean http://www.digitalocean.com/?refcode=7c26aea99ed6
- direct path read
在11g中,全表扫描可能使用direct path read方式,绕过buffer cache,这样的全表扫描就是物理读了. 在10g中,都是通过gc buffer来读的,所以不存在direct pa ...
- 数据分析师的福音——VS 2017带来一体化的数据分析开发环境
(此文章同时发表在本人微信公众号“dotNET开发经验谈”,欢迎右边二维码来关注.) 题记:在上个月的Connect() 2016大会上,微软宣布了VS 2017 RC的发布,其中为数据分析师带来了一 ...
- 安装HBase
安装HBase 1.默认已经安装好java+hadoop+zookeeper 2.下载对应版本的HBase 3.解压安装包 tar zxvf hbase-1.0.2-bin.tar.gz 4.配置环境 ...
- Linux学习笔记（8）-exec族函数
昨天学习了Linux下的进程创建,创建一个进程的方法极为简单,只需要调用fork函数就可以创建出一个进程,但是-- 介绍fork()函数的时候提到,在创建进程后,子进程与父进程有相同的代码空间,执行的 ...
- html5吹牛扯淡篇，闲话内容。
09年提出对媒体查询的草案,到今天的广泛运用,w3c带我们走进了个性化定制的殿堂.这些之所以会被认可会被写进世界级标准,因为他越来越适应广大用户的需求,需求就像一条锁链带动或者牵引整个互联网开发工作. ...
- xsl: normalize-space(string str) 函数
本文出自http://technet.microsoft.com/zh-cn/magazine/ms256063%28VS.90%29.aspx 通过去掉前导和尾随空白并使用单个空格替换一系列空白字符 ...
- brew管理node的版本
摘要 nvm可以.brew怎么去切换不同的node版本 转载请注明出处:http://my.oschina.net/uniquejava/blog/491030 brew详解:http://stack ...