今天写了下关于分页的js代码，写完的感觉就是有点小麻烦，需要很多if判断，思路要清晰

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style type="text/css">

a{

    margin: 5px;

}

</style>

<title>分页</title>

<script type="text/javascript">

window.onload=function(){

    page(

        {id:'div1',

        nowNum:8,

        allNum:10,

        callback:function(now,all){

            alert('当前页：'+now+','+'总共'+all+'页')

        }

        }

    )

}

function page(json){

    if(!json.id){

        return false

    }

    var obj=document.getElementById(json.id);

    var nowNum=json.nowNum||1;

    var allNum=json.allNum||5;

    var callback=json.callback||function(){};

    if(nowNum >3 && allNum >5){

        var oA=document.createElement('a');

        oA.href="#"+1;

        oA.innerHTML="首页";

        obj.appendChild(oA)

    }

    if(nowNum>1){

        var oA=document.createElement('a');

        oA.href="#"+(nowNum-1);

        oA.innerHTML="上一页";

        obj.appendChild(oA)

    }

    if(allNum<=5){

        for(var i=0;i<allNum;i++){

            var oA=document.createElement('a');

            oA.href='#'+(i+1);

            if(nowNum==i){

                oA.innerHTML=(i+1);

            }else{

                oA.innerHTML='['+ (i+1) +']';

            }

            obj.appendChild(oA);

        }

    }else{

        for(var i=1;i<=5;i++){

            var oA=document.createElement('a');

            if(nowNum==1||nowNum==2){

                oA.href='#'+i;

                oA.innerHTML='['+i+']';

                if(nowNum==i){

                    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)>0){

        var oA=document.createElement('a');

        oA.href='#'+(nowNum+1);

        oA.innerHTML = '下一页'

        obj.appendChild(oA);

    }

    if((allNum - nowNum)>2){

        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));

            obj.innerHTML='';

            page(

                {

                    id:    json.id,

                    nowNum:nowNum,

                    allNum:allNum

                }

            )

        }

    }

}

</script>

</head>

<body>

<div id="div1">

    <!-- <a href="#1">1</a>

    <a href="#1">2</a>

    <a href="#1">3</a>

    <a href="#1">4</a>

    <a href="#1">5</a> -->

</div>

</body>

</html>

js分页的更多相关文章

  1. js分页小结

     今天解决了JS分页的问题1 页码 给每页的内容套一个相同的类名 通过选择器加上.length或者.size() 来获得总页数2当前页的页码可以使用each(function(index,DOMsss ...

  2. 自己封装的JS分页功能[用于搭配后台使用]

    * 2016.7.03 修复bug,优化代码逻辑 * 2016.5.25 修复如果找不到目标对象的错误抛出. * 2016.5.11 修复当实际页数(pageNumber)小于生成的页码间隔数时的bu ...

  3. jsp、js分页功能的简单总结

    一.概述 首先,我们要明确为何需要分页技术,主要原因有以下: 1.分页可以提高客户体验度,适当地选择合适的数据条数,让页面显得更有条理,使得用户体验感良好,避免过多数据的冗余. 2.提高性能的需要.分 ...

  4. 一个重构的js分页类

    // JavaScript Document /**//** * js分页类 * @param iAbsolute 每页显示记录数 * @param sTableId 分页表格属性ID值,为Strin ...

  5. 面向对象版js分页

    基于前一个js分页,我将代码改成一个面向对象版的js分页,代码如下 http://peng666.github.io/blogs/pageobj <!DOCTYPE html> <h ...

  6. 纯js分页代码(简洁实用)

    纯js写的分页代码. 复制代码代码如下: //每页显示字数 PageSize=5000; //分页模式 flag=2;//1:根据字数自动分页 2:根据[NextPage]分页 //默认页 start ...

  7. JS分页 + 获取MVC地址栏URL路径的最后参数

    @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport&quo ...

  8. 浅谈js分页的几种方法

    一个项目中必然会遇到分页这种需求的,分页可以使数据加载更合理,也让页面显示更美观,更有层次感!那么js分页到底如何实现呢?下面我就来讲一下三种循序渐进的方法 1.自己纯手写分页 更深入的去理解分页的意 ...

  9. JS分页条插件

    目标 制作js分页导航jq插件,用于无刷新分页或者刷新分页 实现目标参考京东和天猫的分页条. 有四个固定按钮,前页码,后页码,首页,末页. 程序关键点在于计算中间页面的起止位置.逻辑是以当前页码为参照 ...

  10. js分页实例

    js分页实例 案例1 1.js_pageusers.html <!DOCTYPE html> <html> <head> <title>js_pageu ...

随机推荐

  1. 举例详解CSS中的继承

    CSS的继承是由所使用的样式属性定义的.换句话说,当你查看CSS属性backgruound-color,你会看到一栏「继承性」,也许你几乎没有在意过它,但是它还是十分有用的.什么是CSS继承 每一个元 ...

  2. string，stringbuilder，stringbuffer

    String可以储存和操作字符串,即包含多个字符的字符数据.这个String类提供了存储数值不可改变的字符串. StringBuilder是线程不安全的,运行效率高,如果一个字符串变量是在方法里面定义 ...

  3. [原]Django调试工具--django-debug-toolbar

    请摒弃简单粗暴的print --马云 我比较习惯在windows中安装pycharm开发,项目部署在虚拟机中,在本地浏览器中查看效果,这种方式在调试上会有点麻烦,django-debug-toolba ...

  4. webshell + xss 猥琐刷某投票

    团队成员发来一个投票的地址,需要撸某某网站的一个某某投票,果断看了下,ip限制了,看到post 数据包 额 随便找个大流量shell post 数据 Js代码代码 <script type=&q ...

  5. Java do while求和

    用do while结构求0~100的整数数字之和. 代码如下: public class DoWhileDemo { public static void main(String[] args) { ...

  6. 点击后弧形展开的炫酷菜单--第三方开源-- CircularFloatingActionMenu（一）

    CircularFloatingActionMenu在github上项目主页地址:https://github.com/oguzbilgener/CircularFloatingActionMenu ...

  7. php框架学习的步骤

    一,选择一个合适的php框架 在国内,使用zf,ci和tp框架的人比较多,新手可以从中选一个去学习,新手不建议一开始就去学习zf,功力还不够深,学习zf会让你更迷茫. 二,选定一个php框架之后,如何 ...

  8. Mayan游戏 （codevs 1136）题解

    [问题描述] Mayan puzzle是最近流行起来的一个游戏.游戏界面是一个7行5列的棋盘,上面堆放着一些方块,方块不能悬空堆放,即方块必须放在最下面一行,或者放在其他方块之上.游戏通关是指在规定的 ...

  9. python二叉树递归算法之后序遍历，前序遍历，中序遍历

    #!/usr/bin/env python # -*- coding: utf-8 -*- # @Date : 2016-11-18 08:53:45 # @Author : why_not_try ...

  10. Linux环境下常用regexp的使用

    正则表达式 REGular EXPression   的简写元字符 匹配次数 位置锚定 分组 --------------------------------------元字符. 匹配任意单个字符 [ ...