mui中分页功能

最新推荐文章于 2024-05-10 21:30:55 发布

glgom

最新推荐文章于 2024-05-10 21:30:55 发布

阅读量7.9k

点赞数 1

分类专栏： mui 文章标签： mui-pagination

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

版权

mui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这写有完整的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>

glgom

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
6
评论
mui中分页功能

这写有完整的JS代码，只要定义好一下几个参数就可以自动生成分页的导航栏//定义有关分页的全局变量pageNum：当前页pageSize：每页显示的数据pages：总页数total：总数据数navigatepageSize：分页导航显示的页码数效果图：<!DOCTYPE html><html> <head> <meta ...
复制链接

扫一扫

专栏目录