jquery 分页 -云博客

jquery 分页

# 前端 2024-05-05 06:33 0 29 来源：云博客

<!doctype html><html lang="zh"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>简单实用且功能齐全的jQuery分页插件|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title> <link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/default.css"> <link href="dist/pagination.css" rel="stylesheet" type="text/css"> <style type="text/css"> ul, li{ list-style: none; } #wrapper{ width: 900px; margin: 20px auto; } .data-container{ margin-top: 5px; } .data-container ul{ padding: 0; margin: 0; } .data-container li{ margin-bottom: 5px; padding: 5px 10px; background: #66677c; color: #fff; } </style></head><body> <article class="htmleaf-container"> <header class="htmleaf-header"> <h1>简单实用且功能齐全的jQuery分页插件 <span>A jQuery plugin to provide simple yet fully customisable pagination</span></h1> <div class="htmleaf-links"> <a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a> <a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/Menu-Navigation/201511202805.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a> </div> </header> <div id="wrapper"> <section> <div class="data-container"></div> <div id="pagination-demo1"></div> </section> </div> </article> <script src="js/jquery-1.10.2.min.js"></script> <script src="dist/pagination.js"></script> <script> $(function(){ function createDemo(name){ var container = $(‘#pagination-‘ + name); var sources = function(){ var result = []; for(var i = 1; i < 196; i++){ result.push(i); } return result; }(); var options = { dataSource: sources, className: ‘paginationjs-theme-blue‘, callback: function(response, pagination){ window.console && console.log(response, pagination); var dataHtml = ‘<ul>‘; $.each(response, function(index, item){ dataHtml += ‘<li>‘+ item +‘</li>‘; }); dataHtml += ‘</ul>‘; container.prev().html(dataHtml); } }; //$.pagination(container, options); container.addHook(‘beforeInit‘, function(){ window.console && console.log(‘beforeInit...‘); }); container.pagination(options); container.addHook(‘beforePageOnClick‘, function(){ window.console && console.log(‘beforePageOnClick...‘); //return false }); return container; } createDemo(‘demo1‘); }); </script></body></html>

	<!doctype html>
	<html lang="zh">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>简单实用且功能齐全的jQuery分页插件\|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/default.css">
	<link href="dist/pagination.css" rel="stylesheet" type="text/css">
	<style type="text/css">
	ul, li{
	list-style: none;
	}
	#wrapper{
	width: 900px;
	margin: 20px auto;
	}
	.data-container{
	margin-top: 5px;
	}
	.data-container ul{
	padding: 0;
	margin: 0;
	}
	.data-container li{
	margin-bottom: 5px;
	padding: 5px 10px;
	background: #66677c;
	color: #fff;
	}
	</style>
	</head>
	<body>
	<article class="htmleaf-container">
	<header class="htmleaf-header">
	<h1>简单实用且功能齐全的jQuery分页插件 <span>A jQuery plugin to provide simple yet fully customisable pagination</span></h1>
	<div class="htmleaf-links">
	<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
	<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/Menu-Navigation/201511202805.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
	</div>
	</header>
	<div id="wrapper">
	<section>
	<div class="data-container"></div>
	<div id="pagination-demo1"></div>
	</section>
	</div>
	</article>

	<script src="js/jquery-1.10.2.min.js"></script>
	<script src="dist/pagination.js"></script>
	<script>
	$(function(){

	function createDemo(name){
	var container = $(‘#pagination-‘ + name);
	var sources = function(){
	var result = [];

	for(var i = 1; i < 196; i++){
	result.push(i);
	}

	return result;
	}();

	var options = {
	dataSource: sources,
	className: ‘paginationjs-theme-blue‘,
	callback: function(response, pagination){
	window.console && console.log(response, pagination);

	var dataHtml = ‘<ul>‘;

	$.each(response, function(index, item){
	dataHtml += ‘<li>‘+ item +‘</li>‘;
	});

	dataHtml += ‘</ul>‘;

	container.prev().html(dataHtml);
	}
	};

	//$.pagination(container, options);

	container.addHook(‘beforeInit‘, function(){
	window.console && console.log(‘beforeInit...‘);
	});
	container.pagination(options);

	container.addHook(‘beforePageOnClick‘, function(){
	window.console && console.log(‘beforePageOnClick...‘);
	//return false
	});

	return container;
	}

	createDemo(‘demo1‘);

	});
	</script>
	</body>
	</html>