`
net_liu
  • 浏览: 232768 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js分页

    博客分类：
  • JS
CC++C#JavaScriptHTML 
阅读更多 
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
    <script language="javascript" type="text/javascript" > 
    function showpage(url,num,c_p) 
    { 
        var prev=0;var next=0;var temp=0;var html="";
        if(parseInt(c_p+3)>num)
        {
          prev=num;
        }
        else
        {
            prev=parseInt(c_p+3);
        }
        temp=10-(prev-c_p);
        if(c_p-temp>0)
        {
            next=c_p-temp;
        }
        else
        {
            next=1;
        }
        //如果显示的第一页<10，总页数又大于10
        if(c_p+3<10&&num>c_p+3)
        {
            for(j=1;j<=10-(c_p+3);j++)
            {
                prev++;
            }
        }
        if(c_p!=num)
        {
            html+="<a href='"+url+"index="+(1+c_p)+"'>上一页</a>"+" ";
        }
        for (i=prev;i>=next;i--) 
        { 
            if (i==c_p)
            { 
                html+="<font color=red>"+i+" </font>";
            }
            else
            { 
                html+="<a href='"+url+"index="+i+"'>"+i+"</a>"+" ";
            }
        }
        if(c_p!=1)
        {
            html+="<a href='"+url+"index="+(c_p-1)+"'>下一页</a>"+" ";
        }
        document.getElementById("pagenumber").innerHTML=html+"  转到<input id=\"page\" style=\"width: 33px\" />页 <input type=\"button\" value=\"go\" onclick=\"funcGo()\" />";
    } 
    function funcLoad()
    {
        var num=100;
        var url="testpager.html?";
        var index ;
        index = getUrlParam("index");
        if(index==0)
        {
            index=num;
        }
      showpage(url,num,index);
    }
    function  getUrlParam(name)
    {  
          var  reg  =  new  RegExp("(^|&)"+  name  +"=([^&]*)(&|$)");  
          var  r  =  window.location.search.substr(1).match(reg);  
          if  (r!=null)  
          {
              return parseInt(unescape(r[2])); 
          }
          return  0;  
    } 
    function funcGo()
    {
            var num=100;
            if(parseInt(document.getElementById("page").value)>0&&parseInt(document.getElementById("page").value)<=num)
            {
                window.location.href="testpager.html?index="+parseInt(document.getElementById("page").value);
            }
            else
            {
                alert("页码不存在！");
                return false;
            }
    } 
    
    </script> 
</head>
<body onload="funcLoad(0)">
    <form id="form1" runat="server">
    <div id="pagenumber">
    
    </div>
    
    </form>
</body>
</html>

 一个js脚本实现的简单的分页！

分享到：
| XML数据排序
评论
发表评论

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

相关推荐

    适配所有浏览器的js分页插件

    **JavaScript分页插件概述** 在网页开发中，分页是一种常见的数据展示方式，它能够有效地组织大量数据，提高用户体验。本项目提供的“适配所有浏览器的js分页插件”是一个轻量级且易用的解决方案，尤其适用于那些...

    js分页javascript分页

    2. Pagination.js：一个独立的JavaScript分页库，支持自定义分页样式，支持Ajax请求数据。 3. vue-paginate：针对Vue.js框架的分页组件，易用且高度可定制。 4. react-pagination：适用于React应用的分页组件，可与...

    经典的10种JS分页代码

    3. **纯JavaScript分页**：不依赖任何外部库，通过JavaScript实现分页逻辑。例如，可以使用数组或对象存储数据，根据当前页数动态渲染页面内容。 4. **AJAX分页**：使用AJAX异步加载数据，用户在切换页面时无需刷新...

    漂亮的js分页效果

    综上所述，“漂亮的js分页效果”涉及多个JavaScript和前端开发的关键概念，包括JavaScript基础、DOM操作、事件监听、AJAX请求、CSS样式设计、响应式布局、模块化编程以及用户体验优化等。通过理解并熟练掌握这些知识...

    js分页组件及部分关键代码

    js pagination插件是一个流行的JavaScript分页解决方案，它允许开发者轻松实现无刷新分页。这个插件通常包括CSS样式文件（如pagination.css）用于定义分页元素的外观，以及JavaScript文件（如jquery.pagination.js）...

    自制纯js分页框架

    4. **JavaScript分页逻辑**：`spagination.js` 是核心脚本，包含了分页功能的实现。主要包括计算总页数、生成页码按钮、监听按钮点击事件、更新当前页等功能。开发者需要了解如何根据数据量和每页显示的数量来计算总...

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

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

    servlet+jsp+js分页组件

    在这个案例中，JavaScript分页组件可能是用AJAX（Asynchronous JavaScript and XML）技术实现的。当用户点击分页按钮时，JavaScript会异步发送请求到Servlet，Servlet处理请求并返回新的数据，然后JavaScript更新DOM...

    推荐10个js分页样式

    - 根据文件名，如"12_154640_a8zdJSpage0.06v20050426"，我们可以推测这可能是一个名为"JSpage"的JavaScript分页库的不同版本。"0.06"可能是版本号，而"20050426"可能是发布日期。 - 同理，其他类似命名的文件可能...

    js分页插件（附上用法描述）

    这篇博客 "js分页插件（附上用法描述）" 提供了关于JavaScript分页插件的详细信息，虽然具体的代码没有直接给出，但通常会涵盖以下几个核心知识点： 1. **分页原理**：分页主要基于服务器端和客户端的交互。服务器...

    简单易懂js分页（已封装）

    总结来说，JavaScript分页是一个涉及数据处理、用户交互和页面更新的过程。通过封装分页函数，我们可以使代码更加模块化，易于理解和维护。在实际开发中，可以根据项目需求进行定制，比如结合前端框架（如React、Vue...

    JS分页源代码，非常详细

    你可以通过阅读和分析这两个文件来学习如何实现一个完整的JavaScript分页解决方案。在实际应用中，还可以考虑添加更多的特性，如分页样式定制、分页效果动画、当前页码显示等，以满足不同项目的需求。

    js分页控件--js封装的分页控件

    自己写的一个js分页控件.已经封装,可以直接使用. 适合各种用途的分页控制. 如果界面不够美观,只需要修改css即可.

    javaScript分页

    JavaScript分页是网页开发中一个常见且重要的功能，它用于处理大量数据的显示，通过将数据分割成小块，逐页加载，提高了用户体验并优化了页面性能。在本项目中，我们将探讨如何使用纯JavaScript实现分页功能，以及...

    e路JS分页样式类，e路JS分页样式类

    在这个主题中，我们将深入探讨JavaScript分页的实现原理、设计模式以及如何利用CSS来定制样式。 首先，JavaScript分页的基本原理是通过计算总页数，根据用户的当前页码展示相应的内容。通常，我们会在后端获取数据...

    JS分页控件+CSS

    这里提到的"JS分页控件+CSS"是一个针对网页分页功能的解决方案，结合了JavaScript（JS）和层叠样式表（CSS）的技术。下面我们将深入探讨这两个关键组成部分以及它们如何协同工作。 **JS分页控件** JavaScript是一...

    js 分页插件

    JavaScript分页插件是一种在网页上实现数据分页显示的工具，它可以帮助开发者轻松地将大量数据分成多个页面，提供用户友好的浏览体验。在这个场景中，你提到的"js分页插件"是一个只有2KB大小的轻量级插件，包含3个...

    javascript 分页

    javascript 分页

    js分页实例asp服务端

    在这个“js分页实例asp服务端”的示例中，我们将探讨如何结合JavaScript（js）前端技术和ASP服务端技术来实现动态数据分页。 首先，我们需要理解分页的基本原理。分页通常涉及到两个主要部分：前端的用户界面（UI）...

    js分页效果

    总的来说，"js分页效果"是一个综合性的前端开发任务，涵盖了JavaScript基础、DOM操作、事件处理、数据交互、动画效果等多个方面。通过这个示例，开发者不仅可以学习到分页的实现技巧，还能加深对前端开发整体流程的...

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