分页是前端经常会用到的一个非常实用的一个知识点,今天闲来没事,做了一个小demo,虽然样子,比较丑,哈哈哈,但是这是分页的核心思想都在,希望能给某个小伙伴一些启发。可直接复制在编辑器中运行。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
a{
margin:5px;
}
</style>
</head>
<body>
<div id="div1"> </div>
</body>
<script>
//采用组件的写法
page({
id:'div1',
nowNum:10,    //当前的页码
allNum:10,    //总共的页码
callBack:function(now,all){
alert('当前页:'+now+'总共页:'+all);
}
})
function page(opt){
if(!opt.id)return false; //如果没有传元素,就不向下执行了
var obj = document.getElementById(opt.id);
var nowNum = opt.nowNum || 1; //默认的处理
var allNum = opt.allNum || 5;
var callBack = opt.callBack || function(){};
//首页
if(nowNum>=4&&allNum>=6){
var oA = document.createElement('a');
oA.href = '#1';
oA.innerHTML = '首页';
obj.appendChild(oA);
}
//上一页
if(nowNum>=2){
var oA = document.createElement('a');
oA.href = '#'+(nowNum-1);
oA.innerHTML = '上一页';
obj.appendChild(oA);
}
//当总页数小于等于5页的情况
if(allNum<=5){
for(var i=1;i<=allNum;i++){
var oA = document.createElement('a');
oA.href = '#'+i;
if(nowNum == i){ //当前页的处理
oA.innerHTML = i;
}else{
oA.innerHTML = '[' + i + ']';
}
obj.appendChild(oA);
}
}else{ //当总页数大于5页的情况 for(var i=1;i<=5;i++){
var oA = document.createElement('a');
if(nowNum == 1 || nowNum == 2){ //对当前页是第一页和第二页的时候做一个特殊处理
oA.href = '#'+ i;
if(nowNum == i){
oA.innerHTML = i;
}else{
oA.innerHTML = '[' + i + ']';
}
}else if((allNum-nowNum) == 0 || (allNum-nowNum) == 1){ //最后两个页码做特殊处理
oA.href = '#'+ (allNum-5+i);
if((allNum - nowNum) == 0 && i == 5){ //这一块的逻辑较为复杂
oA.innerHTML = (allNum -5+i);
}else if((allNum - nowNum) == 1 && i == 4){
oA.innerHTML = (allNum -5+i);
}else{
oA.innerHTML = '['+(allNum-5+i)+']';
}
}else{
oA.href = '#'+ (nowNum-3+i);
if(i==3){
oA.innerHTML = (nowNum-3+i);
}else{
oA.innerHTML = '['+(nowNum-3+i)+']';
} }
obj.appendChild(oA);
}
} //下一页
if((allNum-nowNum)>=1){
var oA = document.createElement('a');
oA.href = '#'+(nowNum+1);
oA.innerHTML = '下一页';
obj.appendChild(oA);
}
//尾页
if((allNum-nowNum)>=3 && allNum>=6){
var oA = document.createElement('a');
oA.href = '#'+allNum;
oA.innerHTML = '尾页';
obj.appendChild(oA);
}
//执行回调
callBack(nowNum,allNum);
//添加点击事件
var aA = obj.getElementsByTagName('a');
for(var i=0;i<aA.length;i++){
aA[i].onclick = function(){
var nowNum = parseInt(this.getAttribute('href').substring(1)) //注意这里获取href的时候不要用this.href,因为这样获取到的是一个绝对地址,要用getAttribute
//获取到此刻的页码,重新渲染
obj.innerHTML = ''; //清空
page({
id:opt.id,
nowNum:nowNum,
allNum:allNum,
callBack:callBack
});
return false; //阻止默认事件
}
} }
</script>
</html>

js中的分页的更多相关文章

  1. asp.net mvc核心、实体框架和simplepagin .js中的分页

    下载demo - 516.1 KB , 介绍 这篇文章将解释如何在asp.net mvc核心应用程序中进行分页,目标是enity框架,并使用jquery模板simplepagin .js. 我的一个应 ...

  2. js实现前端分页页码管理

    用JS实现前端分页页码管理,可以很美观的区分页码显示(这也是参考大多数网站的分页页码展示),能够有很好的用户体验,这也是有业务需要就写了一下,还是新手,经验不足,欢迎指出批评! 首先先看效果图: 这是 ...

  3. JS中也可以使用JSTL和EL标签

    //往上滑是调用分页 function Ajax(currPage, pageSize) { // ajax后台交互String currPage,String pageSize var el, Pl ...

  4. web下c#用jquery.tmpl.min.js插件实现分页查询_yginuo

    背景:webform或者mvc下实现插件快速分页 ps:我这里用的mvc开发的,数据库连接.用的ADO.NET实体数据模型 此案例下载地址(内含需要用到的一个插件与数据库):http://downlo ...

  5. springboot中使用分页,文件上传,jquery的具体步骤(持续更新)

    分页: pom.xml     加依赖 <dependency> <groupId>com.github.pagehelper</groupId> <arti ...

  6. 修改bootstrap-table中的分页样式

    使用bootstrap-table时,使用$("")选择器没办法选中下方的分页button按钮,可能跟它是动态生成的有关吧. 最终找到与之对应的js(bootstrap-table ...

  7. 在angular中利用分页插件进行分页

    必需:angular分页js和css  当然还有angular.js   还需要bootstrap的css angular.min.js (下面我直接把插件粘贴上去了,以免有的同学还要去找.是不是很贴 ...

  8. JS(vue iview)分页解决方案

    JS(vue iview)分页解决方案 一.解决思路 使用分页组件 使用组件API使组件自动生成页面数量 调用组件on-change事件的返回值page 将交互获得的数组存在一个数组list中 通过p ...

  9. 单纯用JS做的分页插件

    最近公司需要用到分页插件,由于市面上大多都是jQuery的分页插件,而且项目中有自己的工具类,所以说我在工具类中又添加了不依赖jQuery的分页插件,而且分页插件来说对DOM的操作也不是很多,就是用J ...

随机推荐

  1. iOS技术面试03:Foundation

    是否可以把比较耗时的操作放在NSNotificationCenter中 如果在异步线程发的通知,那么可以执行比较耗时的操作: 如果在主线程发的通知,那么就不可以执行比较耗时的操作 3.Foundati ...

  2. Blender模型导入进Unity,旋转缩放的调整

    Blender跟Unity的XYZ轴不同的原因,导致Blender模型导入Unity之后会发生模型朝向不对. 请先看看下边这个情况: 首先,Blender物体模式下,对模型进行 旋转 缩放,将会在右边 ...

  3. Vue 拖拽组件 vuedraggable 、 vue-dragging 、awe-dnd

    参考链接:http://www.ptbird.cn/vue-draggable-dragging.html vue-draggable 学习和使用:https://www.jianshu.com/p/ ...

  4. selenium 获取不了标签文本的解决方法

    selenium 获取不了标签文本的解决方法 ------ 即driver.find_element_by_xxx().text() 为空的解决办法 如果得到的文本只为空,而非我们期望的baidu,那 ...

  5. 洛谷 题解 P1908 【逆序对】

    一开始竟然妄想用\(n^2\)的算法过这题,然而这是不可能的 所以只好写归并排序来求逆序対惹 比如将下面两个区间排序 3 4 7 9 1 5 8 10 首先将右区间的\(1\)取出,放到\(r_k\) ...

  6. nginx rewrite 规则

    rewrite功能:使用nginx提供的全局变量或自设定的变量,结合正则表达式和标志位实现url重写以及重定向. 配置域:server,localtion. flag标志位     last : 相当 ...

  7. EMR的fair-scheduler.xml

    cat /etc/ecm/hadoop-conf/fair-scheduler.xml <?xml version="1.0"?> <allocations> ...

  8. Beginning Linux Programming 学习-chapter2-Shell programming-Pipes and Redirection

    "为了从事创造性工作,人类需要孤独,可是在孤独中,广义的人类仍存在于内心."--(德国)奥铿                                             ...

  9. 用户字符串操作,这里面包括字符串的decode、encode、substract等等操作

    工具类描述:用户字符串操作,这里面包括字符串的decode.encode.substract等等操作 package cn.hgnulb; import java.io.UnsupportedEnco ...

  10. 获取Android手机日志

    方式一:使用USB连接 1.在手机上启用USB调试2.在终端输入adb devices 3.获取日志 只连接一个设备:1)清除已缓存日志:adb logcat -c2)获取日志并保存到本地:adb l ...