js分页 拿走不用谢
发布日期：2021-05-07 00:04:19
浏览次数：20
分类：原创文章
本文共 12052 字，大约阅读时间需要 40 分钟。
1 设置mcd 代表总页数
window.onload = function () 一般用法就是 ajax 获得总页数 mcd = 12; }2 代码倒数第五行 写你们自己的逻辑
上面的别动
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --> <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --> <!--[if lt IE 9]> <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script> <![endif]--></head><body> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">异常监控 <span class="sr-only">(current)</span></a></li> </ul> </nav> <div style="height: 90%;width: 100%;"> <!-- 左边 --> <div class="col-lg-6" style="height: 1;"> <!-- 左上 --> <div style=" width: 100% ; background-color:burlywood;border: burlywood solid;"> <div> <div class="panel panel-default"> <div class="panel-heading">Panel heading without title Panel content <!-- 按钮 --> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> <div class="panel-body"> Panel content<button>BUTTON </button> </div> <div class="panel-body"> Panel content </div> </div> </div> </div> <!-- 左下 --> <div style="height: 50%; width: 100% ; background-color:burlywood;border: burlywood solid;"> <div> <div class="panel panel-default"> <div class="panel-heading">Panel heading without title</div> <div class="panel-body"> <div> <ul class="pagination" id="pageinfo"> pageinfostr += "<li><a href='#' value='" + i + " ' onclick='js_huanye(" + i + ")'>" + i + "</a></li> "; <li><a href='#' value='" + i + " ' style='background-color: rgb(1, 141, 255);' onclick='js_huanye(" + i + ")'><span style='color: rgba(255, 255, 255, 0.979);'>" + i + "</span></a></li> <li class="bd"><a href="#">" + i + "</a></li> <li class="selected"><a href="#">" + i + "</a></li> <li class="selected"><a href="#">" + i + "</a></li> </ul> </div> </div> </div> </div> </div> </div> <!--右边 --> <div class="col-lg-6" style="background-color:black;height: 100%;">.col-md-1</div> </div> value='" + i + " ' onclick='js_huanye(" + i + ")'>" + i + "</a> pageinfostr += "<li><a href='# ' aria-label='Previous'><span aria-hidden='true'>«</span></a></li>"; pageinfostr += "<li><a href='# ' aria-label='Previous'><span aria-hidden='true'>«</span></a></li>"; <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script></body><script> window.onload = function () { mcd = 4; if (mcd <= 5) { var pageinfostr = ""; for (var i = 1; i <= mcd; i++) { var v = "/exception/selall/"; if (i == 1) { pageinfostr += "<li class='disabled'><a href='# ' aria-label='Previous'><span aria-hidden='true'>«</span></a></li>"; } // pageinfostr += "<li><a href=' " + v + i + " ' onclick='js_huanye()'>" + i + "</a></li>"; pageinfostr += "<li><a href='#' value='" + i + " ' onclick='js_huanye(" + i + ")'>" + i + "</a></li>"; if (i == mcd) { pageinfostr += "<li class='disabled'><a href='#' aria-label='Previous'><span aria-hidden='true'>»</span></a></li>"; } } pageinfostr += "<li><span class='label label-success' style='margin-left: 50px; float:right'>1/" + mcd + "</span></li>"; $('#pageinfo').html(pageinfostr); } else { var pageinfostr = ""; for (var i = 1; i <= 5; i++) { var v = "/exception/selall/"; if (i == 1) { pageinfostr += "<li class='disabled'><a href=' " + v + i + " ' aria-label='Previous'><span aria-hidden='true'>«</span></a></li>"; } // pageinfostr += "<li><a href=' " + v + i + " ' onclick='js_huanye()'>" + i + "</a></li>"; pageinfostr += "<li><a href='#' value='" + i + " ' onclick='js_huanye(" + i + ")'>" + i + "</a></li>"; if (i == 5) { pageinfostr += "<li><a href='#' aria-label='Previous' value='" + (6) + " ' onclick='js_huanye(" + (6) + ")'><span aria-hidden='true'>»</span></a></li>"; } } pageinfostr += "<li><span class='label label-success' style='margin-left: 50px; float:right'>1/" + mcd + "</span></li>"; $('#pageinfo').html(pageinfostr); } }</script><script> function js_huanye(x) { //分页开始 if (x <= 3) { if (mcd <= 5) { var pageinfostr = ""; for (var i = 1; i <= mcd; i++) { var v = "/exception/selall/"; if (i == 1) { pageinfostr += "<li class='disabled'><a href='#' aria-label='Previous' value='" + (x - 1) + " ' onclick='js_huanye(" + (x - 1) + ")'><span aria-hidden='true'>«</span></a></li>"; } if (i == x) { pageinfostr += "<li ><a href='#' value='" + i + " ' style='background-color: rgb(1, 141, 255);' onclick='js_huanye(" + i + ")'><span style='color: rgba(255, 255, 255, 0.979);' >" + i + "</span></a></li>"; } else { pageinfostr += "<li><a href='#' value='" + i + " ' onclick='js_huanye(" + i + ")'>" + i + "</a></li>"; } if (i == mcd) { pageinfostr += "<li class='disabled'><a href='#' aria-label='Previous'><span aria-hidden='true'>»</span></a></li>"; } } pageinfostr += "<li><span class='label label-success' style='margin-left: 50px; float:right'>" + x + "/" + mcd + "</span></li>"; $('#pageinfo').html(pageinfostr); } else { var pageinfostr = ""; for (var i = 1; i <= 5; i++) { var v = "/exception/selall/"; if (i == 1) { pageinfostr += "<li class='disabled'><a href='#' aria-label='Previous' value='" + (x - 1) + " ' onclick='js_huanye(" + (x - 1) + ")'><span aria-hidden='true'>«</span></a></li>"; } if (i == x) { pageinfostr += "<li ><a href='#' value='" + i + " ' style='background-color: rgb(1, 141, 255);' onclick='js_huanye(" + i + ")'><span style='color: rgba(255, 255, 255, 0.979);' >" + i + "</span></a></li>"; } else { pageinfostr += "<li><a href='#' value='" + i + " ' onclick='js_huanye(" + i + ")'>" + i + "</a></li>"; } if (i == 5) { pageinfostr += "<li><a href='#' aria-label='Previous' value='" + (x + 1) + " ' onclick='js_huanye(" + (x + 1) + ")'><span aria-hidden='true'>»</span></a></li>"; } } pageinfostr += "<li><span class='label label-success' style='margin-left: 50px; float:right'>" + x + "/" + mcd + "</span></li>"; $('#pageinfo').html(pageinfostr); } } else if (x > 3 && x < (mcd - 2)) { var pageinfostr = ""; for (var i = x - 2; i <= x + 2; i++) { var v = "/exception/selall/"; if (i == x - 2) { pageinfostr += "<li><a href='#' aria-label='Previous' value='" + (x - 1) + " ' onclick='js_huanye(" + (x - 1) + ")'><span aria-hidden='true'>«</span></a></li>"; } if (i == x) { pageinfostr += "<li ><a href='#' value='" + i + " ' style='background-color: rgb(1, 141, 255);' onclick='js_huanye(" + i + ")'><span style='color: rgba(255, 255, 255, 0.979);' >" + i + "</span></a></li>"; } else { pageinfostr += "<li><a href='#' value='" + i + " ' onclick='js_huanye(" + i + ")'>" + i + "</a></li>"; } if (i == x + 2) { pageinfostr += "<li><a href='#' aria-label='Previous' value='" + (x + 1) + " ' onclick='js_huanye(" + (x + 1) + ")'><span aria-hidden='true'>»</span></a></li>"; } } pageinfostr += "<li><span class='label label-success' style='margin-left: 50px; float:right'>" + x + "/" + mcd + "</span></li>"; $('#pageinfo').html(pageinfostr); } else { var pageinfostr = ""; for (var i = mcd - 4; i <= mcd; i++) { var v = "/exception/selall/"; if(mcd<=5){ var pageinfostr = ""; for (var i = 1; i <= mcd; i++) { var v = "/exception/selall/"; if (i == 1) { pageinfostr += "<li class='disabled'><a href='# ' aria-label='Previous'><span aria-hidden='true'>«</span></a></li>"; } // pageinfostr += "<li><a href=' " + v + i + " ' onclick='js_huanye()'>" + i + "</a></li>"; pageinfostr += "<li><a href='#' value='" + i + " ' onclick='js_huanye(" + i + ")'>" + i + "</a></li>"; if (i == mcd) { pageinfostr += "<li class='disabled'><a href='#' aria-label='Previous'><span aria-hidden='true'>»</span></a></li>"; } } pageinfostr += "<span class='label label-success' style='margin-left: 50px; color:aquamarine;'>1/" + mcd + "</span>"; $('#pageinfo').html(pageinfostr); }else{ if (i == mcd - 4) { pageinfostr += "<li ><a href='#' aria-label='Previous' value='" + (x - 1) + " ' onclick='js_huanye(" + (x - 1) + ")'><span aria-hidden='true'>«</span></a></li>"; } if (i == x) { pageinfostr += "<li ><a href='#' value='" + i + " ' style='background-color: rgb(1, 141, 255);' onclick='js_huanye(" + i + ")'><span style='color: rgba(255, 255, 255, 0.979);' >" + i + "</span></a></li>"; } else { pageinfostr += "<li><a href='#' value='" + i + " ' onclick='js_huanye(" + i + ")'>" + i + "</a></li>"; } if (i == mcd) { pageinfostr += "<li class='disabled'><a href='#' aria-label='Previous'><span aria-hidden='true'>»</span></a></li>" } } pageinfostr += "<li ><span class='label label-success' style='margin-left: 50px; float:right;'>" + x + "/" + mcd + "</span></li>"; $('#pageinfo').html(pageinfostr); } } //分页结束 //其他逻辑开始 //函数参数x 就是当前第几页 alert(x); //其他逻辑结束 }</script></html>发表评论
最新留言
感谢大佬
[***.8.128.20]2025年03月22日 05时27分06秒
关于作者
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！
-- 愿君每日到此一游！
推荐文章
Oracle VM VirtualBox安装PVE虚拟机
2021-05-09
【转】如何用css限制文字长度,使溢出的内容用省略号…显示
2021-05-09
Android MediaPlayer setDataSource failed
2021-05-09
ASP.NET Core 实战：Linux 小白的 .NET Core 部署之路
2021-05-09
【nodejs原理&源码杂记（8）】Timer模块与基于二叉堆的定时器
2021-05-09
大前端的自动化工厂（1）——Yeoman
2021-05-09
数据仓库建模方法论
2021-05-09
虚拟机搭建hadoop环境
2021-05-09
DataStax Bulk Loader教程（四）
2021-05-09
.NET应用框架架构设计实践 - 概述
2021-05-09
Rust 内置 trait ：PartialEq 和 Eq
2021-05-09
Hibernate(十四)抓取策略
2021-05-09
[菜鸟的设计模式之旅]观察者模式
2021-05-09
Spring-继承JdbcDaoSupport类后简化配置文件内容
2021-05-09
Java基础IO流(一)
2021-05-09
Hibernate入门(四)---------一级缓存
2021-05-09
MySQL事务(学习笔记)
2021-05-09
一个web前端开发者的日常唠叨
2021-05-09
内存分配-slab分配器
2021-05-09
白红宇的个人博客 - 记录点点滴滴的事 - 您是第 459578641 位访客