mui中分页功能

深碍√TFBOYSˉ_ 2022-04-12 02:39 444阅读 0赞

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

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

效果图：

![20181130145608941.gif][]

<!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">
    
    		
    		<link rel="stylesheet" href="../css/mui.min.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="#">«</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="#">»</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="#">«</a></li>';
    							} else {
    								html += '<li class="mui-previous"><a href="#">«</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="#">»</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="#">«</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="#">»</a></li>';
    							} else{
    								html += '<li class="mui-next"><a href="#">»</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>

[20181130145608941.gif]: /images/20220412/f865d5c25da24694988d220af5f9c503.png