网上有很多分页的插件
但是没有自己想要的
上代码吧,只有分页部分代码,css 省略了
html
<div class="bar2 fr" id="pagecontrol">
<ul>
<li><span id="prepage">上一页</span></li>
<li class="num current"><a>1</a></li>
<li class="num"><a>2</a></li>
<li class="num"><a>3</a></li>
<li class="num"><a>4</a></li>
<li class="num"><a>5</a></li>
<li><span id="nextpage">下一页<span></li>
</ul>
</div>
js
$(function(){
var curpage=1;//当前页码
var maxpage = 10;//最大页码 if(maxpage > 1)
$("#nextpage").addClass("active"); $("#rowsToshow").change(function(){
console.log($("#rowsToshow").val());
})
$("#prepage").live("click",function(){
curpage = curpage - 1;
pageshow(curpage,maxpage);
})
$("#nextpage").live("click",function(){
curpage = curpage + 1;
pageshow(curpage,maxpage);
})
$("#pagecontrol li a").live("click",function(){
curpage = Number($(this).text());
pageshow(curpage,maxpage);
})
}) function pageshow(cp,tp){ var sp = cp - 2;//startpage
var ep = cp + 2;//endpage
var eoff = ep - tp;//tp:totalpage
if(eoff>0){
sp = sp - eoff;
}
if(sp<=0){
ep = ep -sp + 1;
}
var str = ''; if(cp != 1)
str = str + '<ul><li><span id="prepage" class="active">上一页</span></li>'
else
str = str + '<ul><li><span id="prepage">上一页</span></li>'
for(var i= sp;i<=ep;i++){
if(i>0&& i<=tp){
if(i == cp)
str = str + '<li class="num current"><a>'+i+'</a></li>';
else
str = str + '<li class="num"><a>'+i+'</a></li>';
}
} if(cp != tp)
str = str + '<li><span class="active" id="nextpage">下一页<span></li></ul>';
else
str = str + '<li><span id="nextpage">下一页<span></li></ul>';
$("#pagecontrol").html(str);
}
效果图
Js 简单分页(一)的更多相关文章
-
Js 简单分页(二)
此次使用了http://www.purecss.org/ 的前端Css 效果图 上代码 //更新分页工具栏的效果展示 function updatepagetoolshow(){ //判断当前页 及 ...
-
js简单分页,可用
//翻页调用 var pageSize = 1; var counts = 1; var current_page = 1; var rows,total; search(); //查询所有 func ...
-
vue.js 2.0实现的简单分页
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
-
JavaScript简单分页,兼容IE6,~3KB
简介 兼容IE6+及现代浏览器的简单分页,支持同一页面多个分页. 使用 Browser <link rel="stylesheet" href="css/GB-pa ...
-
js前端分页之jQuery
锋利的js前端分页之jQuery 大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的内部比 ...
-
原生js版分页插件
之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件,今天简单改造了一下,改成了原生JavaScript版本的分页插件,可以自定义一些简单配置,特此记录下来.如有不足之处,欢迎指 ...
-
C#设计模式总结 C#设计模式(22)——访问者模式(Vistor Pattern) C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】:利用Swagger调试WebApi
C#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...
-
纯JS前端分页方法(JS分页)
1.JS分页函数:开发过程中,分页功能一般是后台提供接口,前端只要传page(当前页码)和pageSize(每页最大显示条数)及对应的其他查询条件,就可以返回所需分页显示的数据. 但是有时也需要前端本 ...
-
js简单 图片版时钟,带翻转效果
js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
随机推荐
-
如何教你在NIPS会议上批量下载历年的pdf文档(另附04~14年NIPS论文下载链接)
如何获得NIPS会议上批量下载的链接? NIPS会议下载网址:http://papers.nips.cc/ a.点击打开上述网站,进入某一年的所有会议,例如2014年,如下图 b.然后对着当前网页点击 ...
-
关于 MVCC 的基础
作为第一篇对 MVCC 的学习材料,以下内容翻译自 Wikipedia. 1. 什么是MVCC 1.1 基础概念 MVCC,Multi-Version Concurrency Control,多版本并 ...
-
AFNetWorking发送post请求,Code=-1016错误
使用AFNetWorking发送post请求时,可能会出现下面Code=-1016问题.打印的error如下: Error:Error Domain=com.alamofire.error.seria ...
-
BZOJ_1015_[JSOI2008]星球大战_并查集
BZOJ_1015_[JSOI2008]星球大战_并查集 题意:很久以前,在一个遥远的星系,一个黑暗的帝国靠着它的超级武器统治者整个星系.某一天,凭着一个偶然的 机遇,一支反抗军摧毁了帝国的超级武器, ...
-
纯js星级评分
@{ Layout = null;} <!DOCTYPE html> <html><head> <meta name="viewport" ...
-
IDAPython脚本之收集函数的调用信息
转载:All Right 当我们要寻找软件漏洞 bug 的时候,或者做恶意代码分析的时候,首先会找一些常用的而且容易被错误使用的函数.但是有时候程序代码太多找的比较辛苦,并且费时间.所以我们可以写一个 ...
-
C语言 16进制与ascii码互转
/*把ASCII字符转换为16进制 */ uint8_t char_to_hex(const uint8_t *ch) { uint8_t value = 0; if(*ch >= 0 & ...
-
怎样从外网访问内网Tornado
外网访问内网Tornado 本地安装了Tornado,只能在局域网内访问,怎样从外网也能访问本地Tornado? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Tornado 默认安装 ...
-
[转]每天一个linux命令(44):top命令
top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器.下面详细介绍它的使用方法.top是一个动态显示过程,即可以通过用户按键来不断刷新 ...
-
C# 各种导入 Excel 文件的数据的方法总结
在导入之前都需要将上传的文件保存到服务器,所以避免重复的写这些代码,先贴出上传文件并保存到服务器指定路径的代码. protected void btnImport_Click(object sende ...