jquery 实现分页组件

jquery 实现分页组件，完整的HTML

 <!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <title>page插件演示</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
 
    #containet {
      display: table;
      border: 2px solid #ff0000;
      padding: 20px;
      margin: 0 auto;
      border-radius: 4px;
      background: cornsilk;
    }
 
    #pageMain li {
      list-style: none;
      line-height: 40px;
    }
 
    #pageBox {
      padding: 10px 0 0 0;
    }
 
    #pageBox span {
      display: inline-block;
      width: 60px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      color: #fff;
      background: #08a586;
      border: 1px solid;
      border-radius: 6px;
      font-size: 14px;
      cursor: pointer;
    }
 
    #pageNav {
      display: inline-block;
      padding: 0 8px;
    }
 
    #pageNav a {
      display: inline-block;
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      color: #3a87ad;
      margin: 0 6px;
      border-radius: 4px;
      text-decoration: none;
    }
 
    #pageNav a.active,
    #pageNav a:hover {
      background: #3a87ad;
      color: #EFEFEF;
    }
 
    #prev:hover {
      cursor: pointer;
    }
 
    #next:hover {
      cursor: pointer;
    }
  </style>
</head>
 
<body>
  <div id="containet">
    <ul id="pageMain">
      <li>这是内容标题 第1</li>
      <li>这是内容标题 第2</li>
      <li>这是内容标题 第3</li>
      <li>这是内容标题 第4</li>
      <li>这是内容标题 第5</li>
      <li>这是内容标题 第6</li>
      <li>这是内容标题 第7</li>
      <li>这是内容标题 第8</li>
      <li>这是内容标题 第9</li>
      <li>这是内容标题 第10</li>
      <li>这是内容标题 第11</li>
      <li>这是内容标题 第12</li>
      <li>这是内容标题 第13</li>
      <li>这是内容标题 第14</li>
      <li>这是内容标题 第15</li>
      <li>这是内容标题 第16</li>
    </ul>
    <div id="pageBox">
      <span id="prev">上一页</span>
      <ul id="pageNav"></ul>
      <span id="next">下一页</span>
    </div>
  </div>
 
 
  <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
 
  <script type="text/javascript">
    $(function () {
      tabPage({
        pageMain: '#pageMain',
        pageNav: '#pageNav',
        pagePrev: '#prev',
        pageNext: '#next',
        curNum: 7, /*每页显示的条数*/
        activeClass: 'active', /*高亮显示的class*/
        ini: 0/*初始化显示的页面*/
      });
      function tabPage(tabPage) {
        var pageMain = $(tabPage.pageMain);
        /*获取内容列表*/
        var pageNav = $(tabPage.pageNav);
        /*获取分页*/
        var pagePrev = $(tabPage.pagePrev);
        /*上一页*/
        var pageNext = $(tabPage.pageNext);
        /*下一页*/
 
 
        var curNum = tabPage.curNum;
        /*每页显示数*/
        var len = Math.ceil(pageMain.find("li").length / curNum);
        /*计算总页数*/
        console.log(len);
        var pageList = '';
        /*生成页码*/
        var iNum = 0;
        /*当前的索引值*/
 
        for (var i = 0; i < len; i++) {
          pageList += '<a href="javascript:;">' + (i + 1) + '</a>';
        }
        pageNav.html(pageList);
        /*头一页加高亮显示*/
        pageNav.find("a:first").addClass(tabPage.activeClass);
 
        /*******标签页的点击事件*******/
        pageNav.find("a").each(function () {
          $(this).click(function () {
            pageNav.find("a").removeClass(tabPage.activeClass);
            $(this).addClass(tabPage.activeClass);
            iNum = $(this).index();
            $(pageMain).find("li").hide();
            for (var i = ($(this).html() - 1) * curNum; i < ($(this).html()) * curNum; i++) {
              $(pageMain).find("li").eq(i).show()
            }
 
          });
        })
 
 
        $(pageMain).find("li").hide();
        /************首页的显示*********/
        for (var i = 0; i < curNum; i++) {
          $(pageMain).find("li").eq(i).show()
        }
 
 
        /*下一页*/
        pageNext.click(function () {
          $(pageMain).find("li").hide();
          if (iNum == len - 1) {
            alert('已经是最后一页');
            for (var i = (len - 1) * curNum; i < len * curNum; i++) {
              $(pageMain).find("li").eq(i).show()
            }
            return false;
          } else {
            pageNav.find("a").removeClass(tabPage.activeClass);
            iNum++;
            pageNav.find("a").eq(iNum).addClass(tabPage.activeClass);
            //                    ini(iNum);
          }
          for (var i = iNum * curNum; i < (iNum + 1) * curNum; i++) {
            $(pageMain).find("li").eq(i).show()
          }
        });
        /*上一页*/
        pagePrev.click(function () {
          $(pageMain).find("li").hide();
          if (iNum == 0) {
            alert('当前是第一页');
            for (var i = 0; i < curNum; i++) {
              $(pageMain).find("li").eq(i).show()
            }
            return false;
          } else {
            pageNav.find("a").removeClass(tabPage.activeClass);
            iNum--;
            pageNav.find("a").eq(iNum).addClass(tabPage.activeClass);
          }
          for (var i = iNum * curNum; i < (iNum + 1) * curNum; i++) {
            $(pageMain).find("li").eq(i).show()
          }
        })
      }
    })
  </script>
</body>
 
</html>复制

jquery 实现分页组件

jquery 实现分页组件，完整的HTML

前端提高篇（102）：jQuery高级方法callbacks、deferred

JQuery中的load()、$

html 无序标签有序标签及表单

CSS3新增属性(15个案例代码效果图素材)

vue3中getCurrentInstance不推荐使用以及在＜script setup＞中获取全局内容(三种方式)

vue选项式和组合式区别

每天10个vue面试题(七)

Vue 2 中的 `$set` 方法详解

Jquery的常用方法

jQuery国内大厂CDN加速链接

前端哥

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

前端提高篇（102）：jQuery高级方法callbacks、deferred

解决npm install 报错 “npm err code 1“

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

JQuery中的load()、$

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
CSS常用属性（文本属性）

2024-11-04 09:11:111000

3
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

4
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

5
vue使用datav echarts

2024-09-06 00:09:381000

6
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

7
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

8
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

9
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

10
npm的使用

2024-08-18 00:08:131000

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>page插件演示</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	}

	#containet {
	display: table;
	border: 2px solid #ff0000;
	padding: 20px;
	margin: 0 auto;
	border-radius: 4px;
	background: cornsilk;
	}

	#pageMain li {
	list-style: none;
	line-height: 40px;
	}

	#pageBox {
	padding: 10px 0 0 0;
	}

	#pageBox span {
	display: inline-block;
	width: 60px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	color: #fff;
	background: #08a586;
	border: 1px solid;
	border-radius: 6px;
	font-size: 14px;
	cursor: pointer;
	}

	#pageNav {
	display: inline-block;
	padding: 0 8px;
	}

	#pageNav a {
	display: inline-block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	color: #3a87ad;
	margin: 0 6px;
	border-radius: 4px;
	text-decoration: none;
	}

	#pageNav a.active,
	#pageNav a:hover {
	background: #3a87ad;
	color: #EFEFEF;
	}

	#prev:hover {
	cursor: pointer;
	}

	#next:hover {
	cursor: pointer;
	}
	</style>
	</head>

	<body>
	<div id="containet">
	<ul id="pageMain">
	<li>这是内容标题第1</li>
	<li>这是内容标题第2</li>
	<li>这是内容标题第3</li>
	<li>这是内容标题第4</li>
	<li>这是内容标题第5</li>
	<li>这是内容标题第6</li>
	<li>这是内容标题第7</li>
	<li>这是内容标题第8</li>
	<li>这是内容标题第9</li>
	<li>这是内容标题第10</li>
	<li>这是内容标题第11</li>
	<li>这是内容标题第12</li>
	<li>这是内容标题第13</li>
	<li>这是内容标题第14</li>
	<li>这是内容标题第15</li>
	<li>这是内容标题第16</li>
	</ul>
	<div id="pageBox">
	<span id="prev">上一页</span>
	<ul id="pageNav"></ul>
	<span id="next">下一页</span>
	</div>
	</div>


	<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

	<script type="text/javascript">
	$(function () {
	tabPage({
	pageMain: '#pageMain',
	pageNav: '#pageNav',
	pagePrev: '#prev',
	pageNext: '#next',
	curNum: 7, /每页显示的条数/
	activeClass: 'active', /高亮显示的class/
	ini: 0/初始化显示的页面/
	});
	function tabPage(tabPage) {
	var pageMain = $(tabPage.pageMain);
	/获取内容列表/
	var pageNav = $(tabPage.pageNav);
	/获取分页/
	var pagePrev = $(tabPage.pagePrev);
	/上一页/
	var pageNext = $(tabPage.pageNext);
	/下一页/


	var curNum = tabPage.curNum;
	/每页显示数/
	var len = Math.ceil(pageMain.find("li").length / curNum);
	/计算总页数/
	console.log(len);
	var pageList = '';
	/生成页码/
	var iNum = 0;
	/当前的索引值/

	for (var i = 0; i < len; i++) {
	pageList += '<a href="javascript:;">' + (i + 1) + '</a>';
	}
	pageNav.html(pageList);
	/头一页加高亮显示/
	pageNav.find("a:first").addClass(tabPage.activeClass);

	/*****标签页的点击事件*****/
	pageNav.find("a").each(function () {
	$(this).click(function () {
	pageNav.find("a").removeClass(tabPage.activeClass);
	$(this).addClass(tabPage.activeClass);
	iNum = $(this).index();
	$(pageMain).find("li").hide();
	for (var i = ($(this).html() - 1) * curNum; i < ($(this).html()) * curNum; i++) {
	$(pageMain).find("li").eq(i).show()
	}

	});
	})


	$(pageMain).find("li").hide();
	/**********首页的显示*******/
	for (var i = 0; i < curNum; i++) {
	$(pageMain).find("li").eq(i).show()
	}


	/下一页/
	pageNext.click(function () {
	$(pageMain).find("li").hide();
	if (iNum == len - 1) {
	alert('已经是最后一页');
	for (var i = (len - 1) * curNum; i < len * curNum; i++) {
	$(pageMain).find("li").eq(i).show()
	}
	return false;
	} else {
	pageNav.find("a").removeClass(tabPage.activeClass);
	iNum++;
	pageNav.find("a").eq(iNum).addClass(tabPage.activeClass);
	// ini(iNum);
	}
	for (var i = iNum * curNum; i < (iNum + 1) * curNum; i++) {
	$(pageMain).find("li").eq(i).show()
	}
	});
	/上一页/
	pagePrev.click(function () {
	$(pageMain).find("li").hide();
	if (iNum == 0) {
	alert('当前是第一页');
	for (var i = 0; i < curNum; i++) {
	$(pageMain).find("li").eq(i).show()
	}
	return false;
	} else {
	pageNav.find("a").removeClass(tabPage.activeClass);
	iNum--;
	pageNav.find("a").eq(iNum).addClass(tabPage.activeClass);
	}
	for (var i = iNum * curNum; i < (iNum + 1) * curNum; i++) {
	$(pageMain).find("li").eq(i).show()
	}
	})
	}
	})
	</script>
	</body>

	</html>

jquery 实现分页组件

jquery 实现分页组件，完整的HTML

微信扫一扫：分享