null - 程序员宅基地

mui中分页功能_mui分页组件-程序员宅基地

这写有完整的JS代码，只要定义好一下几个参数就可以自动生成分页的导航栏

//定义有关分页的全局变量
pageNum：当前页
pageSize：每页显示的数据
pages：总页数
total：总数据数
navigatepageSize：分页导航显示的页码数

效果图：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../css/app.css"/>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">pagination（分页）</h1>
		</header>
		<div class="mui-content">
			<h5 class="mui-content-padded">分页(默认尺寸)</h5>
			<div class="mui-content-padded" style="text-align:center;">
				<ul id="pagination" class="mui-pagination">
					
				</ul>
			</div>
		</div>
	</body>
	
	
	<script src="../js/mui.min.js"></script>
	<script type="text/javascript">
		
	//定义有关分页的全局变量
	var pageNum = 1; //当前页
	var pageSize = 5; //每页显示的数据
	var pages = 10 ; //总页数
	var total = 100 ; //总数据数
	var navigatepageSize = 5; //分页导航显示的页码数
	var navigatepageNums = []; //当前页码导航
	/**
    注意:如果有搜索功能，记得在搜索的时候将pageNum,navigatepageSize,navigatepageNums重置；
    在pages小于navigatepageSize时，有多少page就显示多少格分页导航，navigatepageSize=pages；
    在pages<=1 时就不要显示分页导航了,没用
    */

	//初始化页码导航数组
	setNavigatepageNums(pageNum, navigatepageSize);
	//初始化分页导航
	initMuiPagination();
	
	/**
	*导航页码赋值,min为最小数值，size为数组大小
	*/
	function setNavigatepageNums(min, navigatepageSize){
		for(var i=0; i<navigatepageSize; i++){
			navigatepageNums[i] = min;
			min++;
		}
	}
	//初始化分页导航
	function initMuiPagination(){
		var table = document.getElementById("pagination");
		var html = "";
		html += '<li class="mui-previous mui-disabled"><a href="#">&laquo;</a></li>';
		html += '<li class="mui-active"><a href="#">'+pageNum+'</a></li>';
		for(var i=1; i<navigatepageSize; i++){
			html += '<li><a href="#">'+(pageNum+i)+'</a></li>';
		}
		html += '<li class="mui-next"><a href="#">&raquo;</a></li>';
		table.innerHTML = html;
	}
		
	mui.init({
		swipeBack:true //启用右滑关闭功能
	});
	(function($) {
		$('.mui-pagination').on('tap', 'a', function() {
			var li = this.parentNode;
			var classList = li.classList;
			console.log(classList);
			if (!classList.contains('mui-active') && !classList.contains('mui-disabled')) {
				var active = li.parentNode.querySelector('.mui-active');
				if (classList.contains('mui-previous')) {//previous
					if (active) {
						var previous = active.previousElementSibling;
						var flagPrevious = navigatepageNums.indexOf(pageNum-1);
						if(pageNum>1 && flagPrevious<0){
							var table = document.body.querySelector('.mui-pagination');
							var html = ""; 
							if(pageNum == 2){
								html += '<li class="mui-previous mui-disabled"><a href="#">&laquo;</a></li>';
							} else {
								html += '<li class="mui-previous"><a href="#">&laquo;</a></li>';
							}
							html += '<li class="mui-active"><a href="#">'+(pageNum-1)+'</a></li>';
							for(var i=0; i<navigatepageSize-1; i++){
								html += '<li><a href="#">'+(pageNum+i)+'</a></li>';
							}
							html += '<li class="mui-next"><a href="#">&raquo;</a></li>';
							table.innerHTML = html;
							//重设导航页码数组
							setNavigatepageNums(pageNum-1,navigatepageSize);
							pageNum--;
						}
						if(pageNum>1){
							if(previous){
								$.trigger(previous.querySelector('a'), 'tap');
							}
						} else{
							classList.add('mui-disabled');
						}
						/* if (previous && !previous.classList.contains('mui-previous')) {
							$.trigger(previous.querySelector('a'), 'tap');
						} else {
							classList.add('mui-disabled');
						} */
					}
				} else if (classList.contains('mui-next')) {//next
					if (active) {
						var next = active.nextElementSibling;
						console.log("pageNum:"+pageNum+";pages:"+pages);
						//判断下一页的页码在不在导航页码数组里
						var flagNext = navigatepageNums.indexOf(pageNum+1);
						//当前页在最后，且还有下一页，且下一页不在当前显示的导航页码里
						if(pageNum>=navigatepageSize && pageNum<pages && flagNext<0){
							var table = document.body.querySelector('.mui-pagination');
							var html = ""; 
							html += '<li class="mui-previous"><a href="#">&laquo;</a></li>';
							for(var i=navigatepageSize-2; i>=0; i--){
								html += '<li><a href="#">'+(pageNum-i)+'</a></li>';
							}
							html += '<li class="mui-active"><a href="#">'+(pageNum+1)+'</a></li>';
							if(pageNum == pages-1){
								html += '<li class="mui-next mui-disabled"><a href="#">&raquo;</a></li>';
							} else{
								html += '<li class="mui-next"><a href="#">&raquo;</a></li>';
							}
							table.innerHTML = html;
							//重设导航页码数组
							setNavigatepageNums(pageNum-navigatepageSize+2,navigatepageSize);
							pageNum++;
						}
						if (pageNum < pages){
							if(next){
								$.trigger(next.querySelector('a'), 'tap');
							}
						}else {
							classList.add('mui-disabled');
						}
						/* var next = active.nextElementSibling;
						console.log(next);
						if (next && !next.classList.contains('mui-next')) {
							$.trigger(next.querySelector('a'), 'tap');
						} else {
							classList.add('mui-disabled');
						} */
					}
				} else {//page
					active.classList.remove('mui-active');
					classList.add('mui-active');
					var page = parseInt(this.innerText); //当前页
					pageNum = page; //当前页
					var previousPageElement = li.parentNode.querySelector('.mui-previous'); //上一页按钮
					var nextPageElement = li.parentNode.querySelector('.mui-next'); //下一页按钮
					previousPageElement.classList.remove('mui-disabled');
					nextPageElement.classList.remove('mui-disabled');
					if (page <= 1) {
						previousPageElement.classList.add('mui-disabled');
					} else if (page >= pages) {
						nextPageElement.classList.add('mui-disabled');
					} 
				}
			}
		});
	})(mui); 
</script>


</html>

本文链接：https://blog.csdn.net/glgom/article/details/84649982

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

JavaScript学习笔记_curry函数未定义-程序员宅基地

文章浏览阅读343次。五种原始的变量类型1.Undefined--未定义类型例：var v;2.String -- ' '或" "3.Boolean4.Number5.Null--空类型例： var v=null;Number中：NaN -- not a number非数本身是一个数字，但是它和任何数字都不相等，代表非数，它和自己都不相等判断是不是NaN不能用=_curry函数未定义

兑换码编码方案实践_优惠券编码规则-程序员宅基地

文章浏览阅读1.2w次，点赞2次，收藏17次。兑换码编码设计当前各个业务系统，只要涉及到产品销售，就离不开大大小小的运营活动需求，其中最普遍的就是兑换码需求，无论是线下活动或者是线上活动，都能起到良好的宣传效果。兑换码：由一系列字符组成，每一个兑换码对应系统中的一组信息，可以是优惠信息（优惠券），也可以是相关奖品信息。在实际的运营活动中，要求兑换码是唯一的，每一个兑换码对应一个优惠信息，而且需求量往往比较大（实际上的需求只有预期_优惠券编码规则

c语言周林答案,C语言程序设计实训教程教学课件作者周林ch04结构化程序设计课件.ppt...-程序员宅基地

文章浏览阅读45次。C语言程序设计实训教程教学课件作者周林ch04结构化程序设计课件.ppt* * 4.1 选择结构程序设计 4.2 循环结构程序设计 4.3 辅助控制语句第四章结构化程序设计 4.1 选择结构程序设计在现实生活中，需要进行判断和选择的情况是很多的: 如果你在家，我去拜访你如果考试不及格，要补考如果遇到红灯，要停车等待第四章结构化程序设计在现实生活中，需要进行判断和选择的情况..._在现实生活中遇到过条件判断的问

幻数使用说明_ioctl-number.txt幻数说明-程序员宅基地

文章浏览阅读999次。幻数使用说明在驱动程序中实现的ioctl函数体内，实际上是有一个switch{case}结构，每一个case对应一个命令码，做出一些相应的操作。怎么实现这些操作，这是每一个程序员自己的事情。因为设备都是特定的，这里也没法说。关键在于怎样组织命令码，因为在ioctl中命令码是唯一联系用户程序命令和驱动程序支持的途径。命令码的组织是有一些讲究的，因为我们一定要做到命令和设备是一一对应的，利_ioctl-number.txt幻数说明

ORB-SLAM3 + VScode:检测到 #include 错误。请更新 includePath。已为此翻译单元禁用波浪曲线_orb-slam3 include <system.h> 报错-程序员宅基地

文章浏览阅读399次。键盘按下“Shift+Ctrl+p” 输入: C++Configurations，选择JSON界面做如下改动：1.首先把 “/usr/include”,放在最前2.查看C++路径，终端输入gcc -v -E -x c++ - /usr/include/c++/5 /usr/include/x86_64-linux-gnu/c++/5 /usr/include/c++/5/backward /usr/lib/gcc/x86_64-linux-gnu/5/include /usr/local/_orb-slam3 include 报错

「Sqlserver」数据分析师有理由爱Sqlserver之十-Sqlserver自动化篇-程序员宅基地

文章浏览阅读129次。本系列的最后一篇，因未有精力写更多的入门教程，上篇已经抛出书单，有兴趣的朋友可阅读好书来成长，此系列主讲有理由爱Sqlserver的论证性文章，希望读者们看完后，可自行做出判断，Sqlserver是否真的合适自己，目的已达成。渴望自动化及使用场景笔者所最能接触到的群体为Excel、PowerBI用户群体，在Excel中，我们知道可以使用VBA、VSTO来给Excel带来自动化操作..._sqlsever 数据分析

随便推点

智慧校园智慧教育大数据平台（教育大脑）项目建设方案PPT_高校智慧大脑-程序员宅基地

文章浏览阅读294次，点赞6次，收藏4次。教育智脑）建立学校的全连接中台，对学校运营过程中的数据进行处理和标准化管理，挖掘数据的价值。能：一、原先孤立的系统聚合到一个统一的平台，实现单点登录，统一身份认证，方便管理；三、数据共享，盘活了教育大数据资源，通过对外提供数。的方式构建教育的通用服务能力平台，支撑教育核心服务能力的沉淀和共享。物联网将学校的各要素（人、机、料、法、环、测）全面互联，数据实时。智慧校园解决方案，赋能教学、管理和服务升级，智慧教育体系，该数据平台具有以下几大功。教育大数据平台底座：教育智脑。教育大数据平台，以中国联通。_高校智慧大脑

编程5大算法总结--概念加实例_算法概念实例-程序员宅基地

文章浏览阅读9.5k次，点赞2次，收藏27次。分治法，动态规划法，贪心算法这三者之间有类似之处，比如都需要将问题划分为一个个子问题，然后通过解决这些子问题来解决最终问题。但其实这三者之间的区别还是蛮大的。贪心是则可看成是链式结构回溯和分支界限为穷举式的搜索，其思想的差异是深度优先和广度优先一：分治算法一、基本概念在计算机科学中，分治法是一种很重要的算法。字面上的解释是“分而治之”，就是把一个复杂的问题分成两_算法概念实例

随笔—醒悟篇之考研调剂_考研调剂抑郁-程序员宅基地

文章浏览阅读5.6k次。考研篇emmmmm，这是我随笔篇章的第二更，原本计划是在中秋放假期间写好的，但是放假的时候被安排写一下单例模式，做了俩机试题目，还刷了下PAT的东西，emmmmm，最主要的还是因为我浪的很开心，没空出时间来写写东西。　　距离我考研结束已经快两年了，距离今年的考研还有90天左右。　　趁着这个机会回忆一下青春，这一篇会写的比较有趣，好玩，纯粹是为了记录一下当年考研中发生的有趣的事。　　首先介绍..._考研调剂抑郁

SpringMVC_class org.springframework.web.filter.characterenco-程序员宅基地

文章浏览阅读438次。SpringMVC文章目录SpringMVC1、SpringMVC简介1.1 什么是MVC1.2 什么是SpringMVC1.3 SpringMVC的特点2、HelloWorld2.1 开发环境2.2 创建maven工程a>添加web模块b>打包方式：warc>引入依赖2.3 配置web.xml2.4 创建请求控制器2.5 创建SpringMVC的配置文件2.6 测试Helloworld2.7 总结3、@RequestMapping注解3.1 @RequestMapping注解的功能3._class org.springframework.web.filter.characterencodingfilter is not a jakart

gdb: Don‘t know how to run. Try “help target“._don't know how to run. try "help target".-程序员宅基地

文章浏览阅读4.9k次。gdb 远程调试的一个问题:Don't know how to run. Try "help target".它在抱怨不知道怎么跑，目标是什么. 你需要为它指定target remote 或target extended-remote例如:target extended-remote 192.168.1.136:1234指明target 是某IP的某端口完整示例如下:targ..._don't know how to run. try "help target".

c语言程序设计教程郭浩志,C语言程序设计教程答案杨路明郭浩志-程序员宅基地

文章浏览阅读85次。习题 11、算法描述主要是用两种基本方法：第一是自然语言描述，第二是使用专用工具进行算法描述2、c 语言程序的结构如下：1、c 语言程序由函数组成，每个程序必须具有一个 main 函数作为程序的主控函数。2、“/*“与“*/“之间的内容构成 c 语言程序的注释部分。3、用预处理命令#include 可以包含有关文件的信息。4、大小写字母在 c 语言中是有区别的。5、除 main 函数和标准库函数以..._c语言语法0x1e