`
as1001001
  • 浏览: 91013 次
  • 性别: Icon_minigender_1
  • 来自: 鞍山
社区版块
存档分类
最新评论

js分页代码

AjaxJavaScriptXHTMLHTML 
阅读更多 
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<title>JS静态分页程序</title>
</head>
<style type="text/css">
a:link,a:visited,a:hover,.current,#info{
    border:1px solid #DDD;
    background:#F2F2F2;
    display:inline-block;
    margin:1px;
    text-decoration:none;
    font-size:12px;
    width:15px;
    height:15px;
    text-align:center;
    line-height:15px;
    color:#AAA;
    padding:1px 2px;
}
a:hover{
    border:1px solid #E5E5E5;
    background:#F9F9F9;
}
.current{
    border:1px solid #83E7E4;
    background:#DFF9F8;
    margin:1px;
    color:#27CBC7;
}
#info{
    width:auto;
}
</style>
<body>
<div id="setpage"></div>
<script type="text/javascript">
<!--
var totalpage,pagesize,cpage,count,curcount,outstr;
//初始化
cpage = 1;
totalpage = 56;
pagesize = 10;
outstr = "";
function gotopage(target)
{    
    cpage = target;        //把页面计数定位到第几页
    setpage();
    //reloadpage(target);    //调用显示页面函数显示第几页,这个功能是用在页面内容用ajax载入的情况
}
function setpage()
{
    if(totalpage<=10){        //总页数小于十页
        for (count=1;count<=totalpage;count++)
        {    if(count!=cpage)
            {
                outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'>"+count+"</a>";
            }else{
                outstr = outstr + "<span class='current' >"+count+"</span>";
            }
        }
    }
    if(totalpage>10){        //总页数大于十页
        if(parseInt((cpage-1)/10) == 0)
        {            
            for (count=1;count<=10;count++)
            {    if(count!=cpage)
                {
                    outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'>"+count+"</a>";
                }else{
                    outstr = outstr + "<span class='current'>"+count+"</span>";
                }
            }
            outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'> next </a>";
        }
        else if(parseInt((cpage-1)/10) == parseInt(totalpage/10))
        {    
            outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+(parseInt((cpage-1)/10)*10)+")'>previous</a>";
            for (count=parseInt(totalpage/10)*10+1;count<=totalpage;count++)
            {    if(count!=cpage)
                {
                    outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'>"+count+"</a>";
                }else{
                    outstr = outstr + "<span class='current'>"+count+"</span>";
                }
            }
        }
        else
        {    
            outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+(parseInt((cpage-1)/10)*10)+")'>previous</a>";
            for (count=parseInt((cpage-1)/10)*10+1;count<=parseInt((cpage-1)/10)*10+10;count++)
            {        
                if(count!=cpage)
                {
                    outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'>"+count+"</a>";
                }else{
                    outstr = outstr + "<span class='current'>"+count+"</span>";
                }
            }
            outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'> next </a>";
        }
    }    
    document.getElementById("setpage").innerHTML = "<div id='setpage'><span id='info'>共"+totalpage+"页|第"+cpage+"页<\/span>" + outstr + "<\/div>";
    outstr = "";
}
setpage();    //调用分页
//-->
</script>
</body>
</html>
分享到：
| div居中的一种方法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    经典的10种JS分页代码

    这篇内容将详细介绍10种经典的JS分页代码实现方法，帮助开发者理解和应用这些技术。 1. **基础HTML和CSS分页**：最简单的分页实现，通常结合HTML链接和CSS样式来创建分页条目。开发者需要计算总页数，然后创建相应...

    js分页代码,分页代码

    根据提供的文件信息，我们可以总结出以下关于使用JavaScript实现分页技术的相关知识点： ### 一、JavaScript 分页技术概述 在Web开发中，特别是在处理大量数据时，为了提高用户体验和减轻服务器压力，通常会采用...

    10种JS分页代码!,喜欢的来拿了

    JavaScript（简称JS）是一种轻量级的解释型编程语言，广泛应用于网页和网络应用开发，特别是在客户端渲染的应用中...无论是学习基础的JavaScript编程，还是提升Web开发技能，这10种JS分页代码都是一份宝贵的学习资源。

    Javascript分页效果（收集了很多强大的JS分页代码）

    这个压缩包中包含了多个JavaScript分页代码示例，适合网页开发者参考和直接应用。 分页效果的实现通常包括以下几个核心部分： 1. 数据获取：首先，需要获取要分页展示的数据。这些数据可以来源于服务器端（如通过...

    10经典常用的js分页代码(开发必备)

    "10经典常用的js分页代码(开发必备)"这个资源集合了十个在实际开发中广泛使用的JavaScript分页实现方案。 1. **基础概念**：分页通常涉及到数据的动态加载，通过将大量数据分成若干页，每次只显示一部分，用户可以...

    JS+HTML分页代码

    本示例提供的"JS+HTML分页代码"是一个利用JavaScript（JS）和超文本标记语言（HTML）实现的分页功能，主要包含了首页、前页、后页、尾页以及自定义分页页号的功能。 **HTML基础**： HTML是网页的基础，用于构建页面...

    10种JS分页代码

    本篇文章将详细介绍10种JavaScript分页代码实现方式，帮助你理解和掌握这一关键技能。 1. **基础HTML+CSS+JS分页**：最简单的分页实现，通过JavaScript计算总页数，创建HTML元素，绑定点击事件，更新显示内容。 2....

    经典JavaScript分页代码

    这个经典JavaScript分页代码实现了一个名为`Page`的类，用于处理分页逻辑。下面将详细解析这个代码中的关键知识点。 1. **类定义与构造函数**： 类`Page`通过构造函数接收三个参数：`iAbsolute`（每页显示记录数）...

    10种JavaScript分页代码.rar

    这个"10种JavaScript分页代码.rar"压缩包文件包含了一系列实现JavaScript分页功能的源代码示例，旨在帮助开发者理解和应用不同的分页策略。 1. 基本原理： 分页的基本思想是将大量数据分成若干小块（页），每次只...

    jquery分页程序,js分页代码

    **jQuery分页程序和JavaScript分页代码详解** 在网页开发中，当数据量过大时，为了提高用户体验，通常会采用分页技术来展示数据。本篇文章将深入探讨JavaScript（JS）和jQuery实现分页的原理与方法。 首先，我们要...

    10种JS分页代码.rar

    这个压缩包提供的10种JS分页代码示例，可能涵盖了上述各种实现方式，对于学习和理解JavaScript分页原理及其实践非常有价值。通过研究这些代码，开发者可以掌握不同的实现思路，为自己的项目选择最适合的分页解决方案...

    多种JS用户分页代码

    下面将详细介绍这些JavaScript分页代码的关键知识点。 1. **基础概念** - **分页**：分页是将大量数据分割成多个小块（页），每次只加载一部分，以提高网页加载速度和用户体验。 - **JavaScript**：一种轻量级的...

    10js分页代码十分好用啊

    "10js分页代码"可能包含的是10种不同的JavaScript实现方式，用于实现网页的分页功能。接下来，我们将深入探讨js分页的核心原理和相关知识点。 **1. 分页的基本概念** 分页是将大量数据分割成多个小部分，每次只...

    Javascript分页代码

    本文将详细解析提供的JavaScript分页代码及其调用方式。 首先，我们来看核心的`showpage()`函数： ```javascript function showpage(url, num, c_p) { if (num ) { stnum = num; } else { stnum = 8; } for ...

    超实用的10种JS分页代码

    超实用的10种JS分页代码 Example ---------------------- var pg = new showPages('pg'); pg.pageCount = 12; //定义总页数(必要) pg.argName = 'p'; //定义参数名(可选,缺省为page) pg.printHtml(); //显示页数

    10种JavaScript分页代码

    这些分页代码示例提供了多种实现方式，可以帮助开发者理解和应用JavaScript分页功能。 首先，JavaScript分页的核心原理是通过计算当前页面的数据范围，根据总数据量和每页显示的数量来生成相应的导航链接。当用户...

    非要优秀的前端js 分页代码

    本文将详细介绍一种优秀的前端JavaScript分页代码及其应用场景、实现原理和优化策略。 首先，我们要理解前端分页的基本需求。在网页上，当数据集过大时，我们不会一次性加载所有数据，而是分批加载，每批数据对应一...

Magicbox
Global site tag (gtag.js) - Google Analytics