jquery 分页

88570299

2020-03-05

<!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>