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

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

智能推荐

2024最新计算机毕业设计选题大全-程序员宅基地

文章浏览阅读1.6k次，点赞12次，收藏7次。大家好！大四的同学们毕业设计即将开始了，你们做好准备了吗？学长给大家精心整理了最新的计算机毕业设计选题，希望能为你们提供帮助。如果在选题过程中有任何疑问，都可以随时问我，我会尽力帮助大家。在选择毕业设计选题时，有几个要点需要考虑。首先，选题应与计算机专业密切相关，并且符合当前行业的发展趋势。选择与专业紧密结合的选题，可以使你们更好地运用所学知识，并为未来的职业发展奠定基础。要考虑选题的实际可行性和创新性。选题应具备一定的实践意义和应用前景，能够解决实际问题或改善现有技术。

dcn网络与公网_电信运营商DCN网络的演变与规划方法(The evolution and plan method of DCN)...-程序员宅基地

文章浏览阅读3.4k次。摘要：随着电信业务的发展和电信企业经营方式的转变，DCN网络的定位发生了重大的演变。本文基于这种变化，重点讨论DCN网络的规划方法和运维管理方法。Digest: With the development oftelecommunication bussiness and the change of management of telecomcarrier , DCN’s role will cha..._电信dcn

动手深度学习矩阵求导_向量变元是什么-程序员宅基地

文章浏览阅读442次。深度学习一部分矩阵求导知识的搬运总结_向量变元是什么

月薪已炒到15w？真心建议大家冲一冲数据新兴领域，人才缺口极大！-程序员宅基地

文章浏览阅读8次。近期，裁员的公司越来越多今天想和大家聊聊职场人的新出路。作为席卷全球的新概念ESG已然成为当前各个行业关注的最热风口目前，国内官方发布了一项ESG新证书含金量五颗星、中文ESG证书、完整ESG考试体系、名师主讲...而ESG又是与人力资源直接相关甚至在行业圈内成为大佬们的热门话题...当前行业下行，裁员的公司也越来越多大家还是冲一冲这个新兴领域01 ESG为什么重要？在双碳的大背景下，ESG已然成...

对比传统运营模式，为什么越拉越多的企业选择上云？_系统上云的前后对比-程序员宅基地

文章浏览阅读356次。云计算快速渗透到众多的行业，使中小企业受益于技术变革。最近微软SMB的一项研究发现，到今年年底，78％的中小企业将以某种方式使用云。企业希望投入少、收益高，来取得更大的发展机会。云计算将中小企业信息化的成本大幅降低，它们不必再建本地互联网基础设施，节省时间和资金，降低了企业经营风险。科技创新已成时代的潮流，中小企业上云是创新前提。云平台稳定、安全、便捷的IT环境，提升企业经营效率的同时，也为企业..._系统上云的前后对比

esxi网卡直通后虚拟机无网_esxi虚拟机无法联网-程序员宅基地

文章浏览阅读899次。出现选网卡的时候无法选中，这里应该是一个bug。3.保存退出，重启虚拟机即可。1.先随便选择一个网卡。2.勾先取消再重新勾选。_esxi虚拟机无法联网