JS之页面实现多个分页

最新推荐文章于 2024-07-01 11:34:43 发布
最新推荐文章于 2024-07-01 11:34:43 发布
阅读量4.3k 收藏 4
点赞数 2
分类专栏： WEB前端 文章标签： JS 多个分页 HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/netuser1937/article/details/54912321
版权
  准备如下：
去jquery官网下载jquery.js。
效果如下：
 图片 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JS之页面实现多个分页</title>
<script src="jquery.js" type="text/javascript"></script> 
<style>
ul,li{ list-style:none; padding:0px; margin:0px;}
</style>
</head>
<body>
<div id="mydiv1" style="height: 150px;width: 200px;">
<ul>
<li>01</li>
</ul>
<ul>
<li>02</li>
</ul>
<ul>
<li>03</li>
</ul>
<ul>
<li>04</li>
</ul>
<ul>
<li>05</li>
</ul>
<ul>
<li>06</li>
</ul>
<ul>
<li>07</li>
</ul>
<ul>
<li>08</li>
</ul>
<ul>
<li>09</li>
</ul>
<ul>
<li>10</li>
</ul>
<ul>
<li>11</li>
</ul>
<ul>
<li>12</li>
</ul>
<ul>
<li>13</li>
</ul>
<ul>
<li>14</li>
</ul>
<ul>
<li>15</li>
</ul>
<ul>
<li>16</li>
</ul>
<ul>
<li>17</li>
</ul>
<ul>
<li>18</li>
</ul>
<ul>
<li>19</li>
</ul>
<ul>
<li>20</li>
</ul>
</div>
<div id="changpage1"></div>
<div id="Div1" style="height: 150px;width: 200px;">
<ul>
<li>01</li>
</ul>
<ul>
<li>02</li>
</ul>
<ul>
<li>03</li>
</ul>
<ul>
<li>04</li>
</ul>
<ul>
<li>05</li>
</ul>
<ul>
<li>06</li>
</ul>
<ul>
<li>07</li>
</ul>
<ul>
<li>08</li>
</ul>
<ul>
<li>09</li>
</ul>
<ul>
<li>10</li>
</ul>
<ul>
<li>11</li>
</ul>
<ul>
<li>12</li>
</ul>
<ul>
<li>13</li>
</ul>
<ul>
<li>14</li>
</ul>
<ul>
<li>15</li>
</ul>
<ul>
<li>16</li>
</ul>
<ul>
<li>17</li>
</ul>
<ul>
<li>18</li>
</ul>
<ul>
<li>19</li>
</ul>
<ul>
<li>20</li>
</ul>
</div>
<!-- 显示 分页信息-->
<div id="changpage2"></div>
<script type="text/javascript">
var listNum=2;  //每页显示数
var PageNum=5;  //分页链接接数(5个)
var obj,j;
var page=0;
var nowPage=0; //当前页
var PagesLen; //总页数
var place ; //  显示分页的位置
function divPager(var1,var2){

   //alert(page);
PageNum = PageNum-1;
var childs = document.getElementById(var1).childNodes;
var s = new Array();
var x=0;
for(i=0;i<childs.length;i++){
  s[x]=childs[i];
  x++;
}
obj=s;
j=obj.length;
PagesLen=Math.ceil(j/listNum);
place = var2; //  显示分页的位置
upPage(0,var1,var2);

}

function upPage(p,page,var2){
nowPage=p;
//内容变换
for (var i=0;i<j;i++){
//obj[i].style.display="none";
//alert(page);
$("#"+page+" ul").css("display","none");
}
for (var i=p*listNum;i<(p+1)*listNum;i++){
//alert(i);
if(obj[i])
{
//alert(obj[i]);
   $("#"+page+" ul").eq(i).css("display","block")
   //obj[i].style.display="block";
}
}
//分页链接变换
strS="<a href='javascript:upPage(0,\""+page+"\",\""+var2+"\");'>首页</a>  ";
var PageNum_2=PageNum%2==0?Math.ceil(PageNum/2)+1:Math.ceil(PageNum/2);
var PageNum_3=PageNum%2==0?Math.ceil(PageNum/2):Math.ceil(PageNum/2)+1;
var strC="",startPage,endPage;
if (PageNum>=PagesLen) {
startPage=0;
endPage=PagesLen-1;
}
else if (nowPage<PageNum_2){
startPage=0;
endPage=PagesLen-1>PageNum?PageNum:PagesLen-1
}
//首页
else {
startPage=nowPage+PageNum_3>=PagesLen?PagesLen-PageNum-1: nowPage-PageNum_2+1;
var t=startPage+PageNum;endPage=t>PagesLen?PagesLen-1:t
}
for (var i=startPage;i<=endPage;i++){
if (i==nowPage)strC+="<a href='javascript:upPage("+i+",\""+page+"\",\""+var2+"\");' style='color:red;font-weight:700;'>"+(i+1)+"</a> ";
else strC+="<a href='javascript:upPage("+i+",\""+page+"\",\""+var2+"\");'>"+(i+1)+"</a> ";
}
strE=" <a href='javascript:upPage("+(PagesLen-1)+",\""+page+"\",\""+var2+"\");'>尾页</a>  ";
strE2=nowPage+1+"/"+PagesLen+"页"+"  共"+j+"条";
var strHtml = '';
if (PagesLen <1) {
strHtml = '<select name="goP">';
strHtml += '<option value="0">No Pages</option>';
} else {
var chkSelect;
strHtml += "<select name=\"goP\" οnchange='goPage(this.value,\""+page+"\",\""+var2+"\")'>";
for (var i = 0; i < PagesLen; i++) {
if (nowPage == i) chkSelect=' selected="selected"';
else chkSelect='';
strHtml += '<option value="' + (i+1) + '"' + chkSelect + '>' + (i+1) + ' / ' + PagesLen + '</option>';
}
}
strHtml += '</select> ';
//alert(var2);
document.getElementById(var2).innerHTML=strS+strC+strE+strHtml+"   当前:"+strE2;
}

function goPage(pageno,page,var2){

 pageno = parseInt(pageno);

 if (pageno > PagesLen ||pageno<1) 
 return ;
 
 upPage(pageno-1,page,var2);
}

</script>
<script type="text/javascript">
/*参数1：分页的对象，
 参数2：分页信息显示位置
*/
new divPager("mydiv1","changpage1","mydiv1");
new divPager("Div1","changpage2","Div1");
</script>
</body>
</html>



相思比梦长
关注
专栏目录
Java后台实现同一个页面实现多个分页效果(经验之谈)
huaiyan
07-16 1391
同一个加载页实现多个分页功能页面效果如图页面设计查看详情点击按钮按钮触发事件 页面效果如图 整体的分页效果如图所示,大的分页效果这里就不给与实现的讲解过程了,在这里我来讲解第二个隐藏的DIV的分页实现 页面设计 查看详情点击按钮 按钮触发事件 隐藏代码DIV ## 查看详情的弹窗 <div id="see_detail"> <div class="see_det...
可以在一个页面打开多个页面Javascript
03-17
一个很不错的javascript实现的打开多层窗体，在网上找了半天都没有找到一个合适的，最是还是自己写了一个，现在还是测试版的，不过可以用，样式还需要自己写
控件类实现了对分页变量的处理，js实现分页的显示
bycloud的剪贴
05-19 931
以下是.net控件代码：　 本帖相关代码   [全显模式]using System;using System.Web;using System.Web.UI;using System.Text.RegularExpressions;namespace cnVery.bbs{    public class Pager : Control    {        //属性        priv
用JavaScript实现分页功能
最新发布
qq_52530691的博客
07-01 1842
用JavaScript实现分页功能
一个页面，两个分页，JS写法
Hr_Tao的博客
10-16 2855
function zhub_addEvent_Page(){ /** *  在这个页面被加载的时候，把分页的请求的url放入到jquery的缓存中,把数据缓存到整个table中 *  一个页面上就一个table  * flag是input框自定义写法，'zhub_sy'，param作用与那么作用相似，从后台获取page属性 */ //给主表的分页的首页添加一个click事件
使用frame框架，实现一个网页显示多个界面使用js语言，实现事件响应
a18792721831的博客
07-18 1525
一个网页如何显示多个界面？ 如何利用网页显示页面的资源？ 如何让用户打开最少的页面，显示最多的信息？ 本次项目是利用frame框架实现一个网页显示多个界面： 1.首先在index.jsp文件中注释掉标签： 因为inde.jsp是第一个显示的界面，你也可以在需要开始使用框架的界面这样干！ 添加如下代码: 其中，cols属性表示把整个页面分为1/5和
使用js来实现页面的分页功能，带页面参数路径例p=1,到指定参数页面
陈先生的博客
10-25 369
最近需要一个前端的分页功能，网上找了很多，没有自己想要的，于是自己写了一个简单的分页的功能，可能代码比较冗杂，不过可以实现需求。 代码及注释如下，直接复制可见效果： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name
JS 实现分页打印功能
01-19
在调用window.print()时，可以实现打印效果，但内容太多时要进行分页打印。 在样式中有规定几个打印的样式 page-break-before和page-break-after CSS属性并不会修改网页在屏幕上的显示，这两个属性是用来控制文件的...
纯JS前端实现分页代码
11-25
- **事件绑定**：每个分页按钮都需要关联一个JavaScript函数，例如`indexpage`，该函数接受当前页码作为参数，用于改变页面内容。 - **AJAX请求**：当用户点击分页按钮时，使用`ajaxfunction`发送AJAX请求到后台。...
Javascript静态分页(多个资料，静态自动分页)
10-30
静态分页主要依靠前端技术来实现，核心思路是利用CSS和JavaScript控制页面元素的可见性。具体来说： 1. **HTML结构设计**：将所有待显示的数据按照一定的规则划分到不同的容器（如`<ul>`列表）中。 2. **CSS隐藏**...
基于vue.js实现分页查询功能
10-17
HTML部分创建了一个分页导航的结构，使用了Bootstrap的样式和图标来美化界面。`<ul class="pagination">`元素包含了分页的所有链接，包括向前、向后、首页、末页以及页码链接。Vue.js通过`v-if`和`v-for`指令动态地...
原生js实现表格翻页和跳转
01-18
本文实例为大家分享了js实现表格翻页和跳转的具体代码，供大家参考，具体内容如下 js代码里的row_num变量是显示数据的行数，修改后可改变每页显示的数量。 html代码： <table xss=removed xss=removed xss=removed id=table> <thead> <tr> <td>No</td> <td>Name</td> <td>Age</td> </tr> </thead> <tbody></tbody> <tfoot> <tr> <td colspan=3> <input type=button n
turn.js实现翻书效果(自适应单双页)
10-10
TURN.JS 实现翻书效果(自适应单双页)
JavaScript实现分页显示
lylwanan的专栏
06-23 1108
分页常见于前端多数据页面，现有的分页插件不可胜数，我分享一种构建分页显示的方法，目标是将当前也放在带显示数组的中间，如（以10页为例）： 2 3 4 > 3 4 5 > 9 10 > 废话不多说，直接上代码： // 参数：当前页码，页码显示数，页码总数 function getPage(current, showCnt, pageCnt) { var array = []
Laravel一个页面里有多个分页并用jQuery pagination.js实现
qq_36663951的博客
07-31 668
"{{asset('lib/js/jquery.pagination.js')}}"> //引入该文件前别忘了引入JQUERY库        $(function(){      //这是一个非常简单的demo实例，让列表元素分页显示,我们一个页面里既有老师，又有学生，分别分页，还要换行      //回调函数的作用是显示对应分页的列表项内容      //回调函数在用户每次点击分页链接的时候执
JS 实现简单的Table表格分页效果（假分页）
足迹
08-21 1万+
单纯的JS实现分页
jsp页面完美的分页代码，每次显示十条分页链接。
热门推荐
fandiainiuniu的博客
06-12 1万+
jsp页面的分页，功能全面（有上一页，下一页，首页，尾页，跳到第几页，共几页，当前第几页；还有分页的链接，每次显示十条链接，已当前页为中心左边显示5个链接，右边显示4个链接，不管页数再多总是显示十个链接）。目前对这个代码比较满意，如果有哪里需要改进的话希望提醒哦。不太明白的话也可以找我交流交流
基于JS实现单页面右侧分页
weixin_44289052的博客
12-27 231
JS–页面分页简单实现 1、问题描述 用js实现一个管理页面的单页面跳转，大致内容如下图： 点击左侧的选项，右侧主体跳转为相对应的内容，主题方出现可选择的导航块，点击也可以切换，点击‘X’则关闭当前内容 2、点击显示对应主体 先将需要的主体写出来，给没个主体的display设置为none；给左侧的选项，绑定一个点击事件。每个点击事件与每个主体一一对应： <ul> <li onclick="change(1)" id="l1"><a href="javas
jekyll分页页面显示过多处理方法（分页只显示五页）已成功
執筆冩回憶
06-21 869
pagination.html： <div class="pagination text-align"> <div class="btn-group"> {% if paginator.total_pages > 1 %} {% if paginator.page == 1 %} <a class...
JavaScript实现兼容多浏览器的分页插件
"JavaScript制作简单分页插件，兼容IE6+及现代浏览器，支持同一页面多个分页。提供基本的HTML和JavaScript设置示例，包括分页样式、事件处理和参数传递。" 在网页开发中，分页是常见的功能，用于在大量数据中分段...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值