JS静态分页程序

最新推荐文章于 2024-07-30 10:56:44 发布
最新推荐文章于 2024-07-30 10:56:44 发布
阅读量1.3k 收藏
点赞数
分类专栏： AJAX 文章标签： javascript border class function div ajax

<html>
<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)' οnclick='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)' οnclick='gotopage("+count+")'>"+count+"</a>";
                 }else{
                     outstr = outstr + "<span class='current'>"+count+"</span>";
                 }
             }
             outstr = outstr + "<a href='javascript:void(0)' οnclick='gotopage("+count+")'> next </a>";
         }
         else if(parseInt((cpage-1)/10) == parseInt(totalpage/10))
         {   
             outstr = outstr + "<a href='javascript:void(0)' οnclick='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)' οnclick='gotopage("+count+")'>"+count+"</a>";
                 }else{
                     outstr = outstr + "<span class='current'>"+count+"</span>";
                 }
             }
         }
         else
         {   
             outstr = outstr + "<a href='javascript:void(0)' οnclick='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)' οnclick='gotopage("+count+")'>"+count+"</a>";
                 }else{
                     outstr = outstr + "<span class='current'>"+count+"</span>";
                 }
             }
             outstr = outstr + "<a href='javascript:void(0)' οnclick='gotopage("+count+")'> next </a>";
         }

     }   
     document.getElementById("setpage").innerHTML = "<div id='setpage'><span id='info'>共"+totalpage+"页|第"+cpage+"页<//span>" + outstr + "<//div>";
     outstr = "";
}


setpage();     //调用分页

//-->
</script>


</body>
</html>
 

rigger21
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯js分页模板
08-30
纯js分页模板
div+css百分比表格+DIV+CSS+JS静态分页程序+DIV+CSS像素表格
08-31
div+css百分比表格+DIV+CSS+JS静态分页程序+DIV+CSS像素表格 百分比表格(用DIV+CSS)以百分比显示，可以根据窗口的大小自动调节所显示的大小！ DIV+CSS+JS静态分页程序可兼容主流浏览器（IE、FF、Opera） DIV+CSS表格...
非常不错的一个JS分页效果代码，值得研究
上班搞IT，下班搞ITF。
01-21 1426
<br />本来想用网上找来的分页程序,不过都得做修改,感觉麻烦了,还是自己写一个好了,以后自己用的时候修改就方便了~~大家都多动手,自己写的才是最好的,日后想干什么的,做修改也是很容易的~~顺便也扩充一下自己的代码库~~ <br />补充一句,cpage是页面计数,应为全局变量,这样可以随处调用它,totalpage是总页数 <br /><!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/
css+js实现静态分页
weixin_34068198的博客
03-19 211
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"&gt;&lt;he
php 分页 静态,php生成静态页,分页
weixin_35144647的博客
03-10 175
我们先回顾一些基本的概念。一、PHP脚本与动态页面。PHP脚本是一种服务器端脚本程序，可通过嵌入等方法与HTML文件混合，也可以类，函数封装等形式，以模板的方式对用户请求进行处理。无论以何种方式，它的基本原理是这样的。由客户端提出请求，请求某一页面　----->　WEB服务器引入指定相应脚本进行处理　----->　脚本被载入服务器　----->　由服务器指定的PHP解析器对脚本进...
php 分页 静态,php静态页面及分页
weixin_32262035的博客
03-10 155
一，PHP脚本与动态 页面 PHP脚本是一种服务器端脚本程序，可通过 嵌入等方法与HTML文件混合，也可以类，函数封装等形式，以模板的方式对用户请求进行处理无论以何种方式，它的基本原理是这样的由客户端提出请求， 请求某一 页面 -----WEB服务器引入指定相应一，PHP脚本与动态页面PHP脚本是一种服务器端脚本程序，可通过 嵌入等方法与HTML文件混合，也可以类，函数封装等形式，以模板的方式对用...
html 弹出层分页,JavaScript仿静态分页实现方法
weixin_39575850的博客
06-09 135
本文实例讲述了JavaScript仿静态分页实现方法。分享给大家供大家参考。具体如下：这里基于JavaScript模仿网页不刷新静态分页的功能，实际用的时候估计要做些改动，因为目前需要分页的内容是作为一个字符串变量存在JS里，使用时这里的数据要变为数据库中读取的数据，不知道它的实用性有多高，需要的朋友慢慢调整一下。运行效果如下图所示：具体代码如下： 静态分页* {font-size:10.2pt;...
jS静态分页代码
01侠 caijianwen.com
01-10 563
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静态分页程序t
layui实现动态和静态数据表分页
qq_36495140的博客
06-30 2404
这篇文章主要介绍了关于layui实现动态和静态数据表分页，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下 开发管理后台是每一个开发人员都要熟悉的一个环节，作为后端程序员，公司的所有机密数据都掌握在我们手上，所以这个时候，如果不是公司的核心成员，是不能接触到某些数据的，这个时候所有的工作都落到了我们的手上，从PS到Linux都需要我们亲历亲为，还好发现了layui这个前端框架，很大程度上减轻了我们的压力． 今天我们先来学习一下layui实现动态数据表，静态数据表，以及表格的分页，其中还涉及到
jsp生成静态页并分页
07-27
**标题：“jsp生成静态页并分页”** 在Web开发中，JSP（JavaServer Pages）是一种常用的动态网页技术，允许开发者将HTML代码与Java代码混合编写，从而实现动态内容的生成。本话题主要探讨如何利用JSP技术来生成静态...
ASP源码—AJAX 静态分页示例.zip
10-14
在本示例中，"ASP源码—AJAX 静态分页示例.zip" 提供了一个使用ASP和AJAX技术实现静态分页功能的代码实例。这涉及到两个主要的技术领域：ASP和AJAX，它们在网页开发中都扮演着重要的角色。 1. ASP（Active Server ...
分页插件与静态页面管理
05-05
### 分页插件与静态页面管理 #### 一、静态页面管理 静态页面是指那些无需服务器端脚本处理，直接由浏览器解析显示的网页。在Web应用开发中，静态页面通常用于展示固定的信息或者作为动态内容的基础框架。为了更好...
Asp+AJAX静态分页 亲测 可用
04-13
Asp+AJAX静态分页 亲测 可用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta ...
php静态页面及分页
流浪的虾壳
08-06 1045
一，PHP脚本与动态页面 PHP脚本是一种服务器端脚本程序，可通过 嵌入等方法与HTML文件混合，也可以类，函数封装等形式，以模板的方式对用户请求进行处理无论以何种方式，它的基本原理是这样的由客户端提出请求， 请求某一页面----->WEB服务器引入指定相应脚本进行处理----->脚本被载入服务器----->由服务器指定的 PHP解析器对脚本进行解析形成HTML语言形式---->将解析后的HT
用原生js手写分页功能
qq_52607834的博客
03-04 1395
分页功能如下：首先，要显示的数据如下： html结构如下： 我们可以定义当前页数为pageNum，总页数为maxPage，每页显示的数据为limit条。 当前显示数据索引受pageNum和limit影响。如果是第一页，即pageNum为1时，则显示数据所对应的索引为04；第二页，pageNum为2时，为59；第三页，pageNum为3时，为10~14。用变量来表示为：(pageNum-1)limit ~ pageNumlimit所以，我们书写一个更新页面的函数，并在一开始的时候就调用该函数进行初始化页面。
JavaScript青少年简明教程：函数及其相关知识（下）
cnds123的专栏
07-26 648
JavaScript青少年简明教程：函数及其相关知识（下）
VUE3自定义指令防止重复点击多次提交
最新发布
MadSnail00的博客
07-30 72
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
vue静态页面qq音乐页面设计
05-29
Vue是一种流行的JavaScript框架，可用于构建动态Web应用程序。而QQ音乐是一款音乐播放器，它的Web页面使用了Vue框架来构建。QQ音乐的静态页面设计主要有以下特点： 1. 页面布局：QQ音乐的静态页面设计采用了响应式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值