分页器的使用-3 JqueryPagination 分页插件的使用

简介

这是jquery自带的分页器插件，使用时需要导入css文件和js文件，以及jquery.js文件。

使用简单，如果项目中不要求自定义样式，用这个非常完美。

推荐使用这个。具体代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style>
			body{
				margin: 0;
				padding: 0;
			}
			ul,li{
				list-style: none;
				padding: 0;
			}
			.pagination-box li.active{
				background-color: #ccc;
			}
			.pagination-box{
				display: flex;
			}
			.pagination-box li{
				border: 1px solid black;
				padding: 3px;
				margin-left: 3px;
				cursor:pointer;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="lib/jquery/pagination.css"/>
	</head>
	<body>
		<section>
			<ul class="tableview">
				
			</ul>
			<ul class="pagination">
				
			</ul>
		</section>
		<script src="js/interface.js" type="text/javascript" charset="utf-8"></script>
		<script src="lib/jquery/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="lib/jquery/jquery.pagination.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			// 定义当前页
			var currentPage = 1;
			// 一页显示数量
			var count = 4;
			// 总页数
			var pageCount = 0;
			
			// 函数
			function downloadData (page) {
				// 让传来的page参数赋给currentPage
				currentPage = page
				
				//start为接口中的参数 获取url
				var start = (currentPage - 1)*count
				var url = readListUrl+"&start="+start+"&count="+count
				// console.log("url ="+url)
				
				// 请求数据
				$.getJSON(url,{},function (data) {
					
					// console.log(data)
					
					var list = data.data
					
					//显示内容
					var htmlContent = ""
					for(var index in list){
						var item = list[index]
						htmlContent += "<li>"+item.title+"</li>"
					}
					$(".tableview").html(htmlContent)
					
					
					//生成分页
					//参数1: 总数
					//参数2: 一些配置项
					$(".pagination").pagination(data.total,{
						//当前页,从0开始
						current_page: currentPage-1,  //当前从哪一页开始
						items_per_page:count,   //一页显示数量
						
						// 改变原生自带的名字，原来为prev、next
						prev_text:"上一页",  
						next_text:"下一页",  
						
						//限定,当前页周围最多显示多少页  如图
						num_display_entries:5,
						
						//限定,两边最多围显示多少页  如图
						num_edge_entries: 3,
						
						// 回调函数
						callback:function(index){
							console.log("index = "+index)
							
							//两个页数相同, 避免多次下载数据
							if(index == currentPage - 1){
								return
							}
							
							// 让index+1是因为，这个分页器默认index为0
							var newPage = index+1
							// 回调downloadData
							downloadData(newPage)
						}
					})
				})
			}
			downloadData(currentPage)
		</script>
	</body>
</html>

效果如下：

分页器的使用-3 JqueryPagination 分页插件的使用

分页器的使用-3 JqueryPagination 分页插件的使用

简介

相关推荐