<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>案例展示</title>
<link href="css/base.css" rel="stylesheet">
<link href="css/prettify.css" rel="stylesheet">
<link href="dist/2.6.0/pagination.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<a href="https://github.com/superRaytin/paginationjs">
<img style="position: absolute; top: 0; right: 0; border: 0;" src="images/forkme_right_green_007200.png" alt="Fork me on GitHub">
</a>
<div class="topbar">
<div class="inner">
<ul class="clearfix">
<li><a href="#" class="active">Home</a></li>
<li><a href="https://pagination.js.org/docs/index-cn.html" target="_blank">Docs</a></li>
<li><a href="https://github.com/superRaytin/paginationjs" target="_blank">Fork on GitHub</a></li>
</ul>
</div>
</div>
<div class="header">
<div class="title">Pagination.js<span>2.6.0</span></div>
<div class="desc">
A jQuery plugin to provide simple yet fully customisable pagination.<br>
Almost all the ways you can think of on pagination.
</div>
<div class="download">
<div class="build-buttons">
<a class="build-button-source" href="dist/2.6.0/pagination.js">Pagination.js</a>
<a class="build-button-zipped" href="dist/2.6.0/pagination.min.js">Pagination.min.js <span class="fileSize">15.0K</span></a>
</div>
</div>
</div>
<h1 style="text-align: center;">官网地址： <a href="https://pagination.js.org/index.html">这里</a></h1>
<div class="wrapper">
<div class="demo" id="J-demo">
<div class="initialize">Initializing...</div>
</div>
</div>
<div id="gototop">Top</div>
<script type="text/template" id="template-demo1">
<div class="demo-section clearfix">
<div class="demo-section-title"></div>
<div class="inner-left preview">
<div class="data-container"></div>
</div>
<div class="inner-right code">
<pre><code>$('#demo').pagination({
dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 195],
callback: function(data, pagination) {
// template method of yourself
var html = template(data);
dataContainer.html(html);
}
})</code></pre>
</div>
</div>
</script>
<script type="text/template" id="template-demo2">
<div class="demo-section clearfix">
<div class="demo-section-title"></div>
<div class="inner-left preview">
<div class="data-container"></div>
</div>
<div class="inner-right code">
<pre><code>$('#demo').pagination({
dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 35],
pageSize: 5,
pageNumber: 3,
callback: function(data, pagination) {
// template method of yourself
var html = template(data);
dataContainer.html(html);
}
})</code></pre>
</div>
</div>
</script>
<script type="text/template" id="template-demo3">
<div class="demo-section clearfix">
<div class="demo-section-title"></div>
<div class="inner-left preview">
<div class="data-container"></div>
</div>
<div class="inner-right code">
<pre><code>$('#demo').pagination({
dataSource: 'https://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?',
locator: 'items',
totalNumber: 120,
pageSize: 20,
ajax: {
beforeSend: function() {
dataContainer.html('Loading data from flickr.com ...');
}
},
callback: function(data, pagination) {
// template method of yourself
var html = template(data);
dataContainer.html(html);
}
})</code></pre>
</div>
</div>
</script>
<script type="text/template" id="template-demo13">
<div class="demo-section clearfix">
<div class="demo-section-title"></div>
<div class="inner-left preview">
<div class="data-container"></div>
</div>
<div class="inner-right code">
<pre><code>$('#demo').pagination({
dataSource: 'https://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?',
locator: 'items',
totalNumberLocator: function(response) {
// you can return totalNumber by analyzing response content
return Math.floor(Math.random() * (1000 - 100)) + 100;
},
pageSize: 20,
ajax: {
beforeSend: function() {
dataContainer.html('Loading data from flickr.com ...');
}
},
callback: function(data, pagination) {
// template method of yourself
var html = template(data);
dataContainer.html(html);
}
})</code></pre>
</div>
</div>
</script>
<script type="text/template" id="template-demo4">
<div class="demo-section clearfix">
<div class="demo-section-title"></div>
<div class="inner-left preview">
<div class="data-container"></div>
</div>
<div class="inner-right code">
<pre><code>$('#demo').pagination({
dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 15],
pageSize: 5,
showNavigator: true,
formatNavigator: '<%= rangeStart %>-<%= rangeEnd %> of <%= totalNumber %> items',
position: 'top',
callback: function(data, pagination) {
// template method of yourself
var html = template(data);
dataContainer.html(html);
}
})</code></pre>
</div>
</div>
</script>
<script type="text/template" id="template-demo5">
<div class="demo-section clearfix">
<div class="demo-section-title"></div>
<div class="inner-left preview">
<div class="data-container"></div>
</div>
<div class="inner-right code">
<pre><code>$('#demo').pagination({
dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 50],
pageSize: 5,
showPageNumbers: false,
showNavigator: true,
callback: function(data, pagination) {
// template method of yourself
var html = template(data);
dataContainer.html(html);
}
})</code></pre>
</div>
</div>
</script>
<script type="text/template" id="template-demo6">
<div class="demo-section clearfix">
<div class="demo-section-title"></div>
<div class="inner-left preview">
<div class="data-container"></div>
</div>
<div class="inner-right code">
<pre><code>$('#demo').pagination({
dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 100],
pageSize: 8,
formatResult: function(data) {
var result = [];
for (var i = 0, len = data.length; i < len; i++) {
result.push(data[i] + ' - good guys');
}
return result;
},
callback: function(data, pagination) {
// template method of yourself
var html = template(data);
dataContainer.html(html);
}
})</code></pre>
</div>
</div>
</script>
<script type="text/template" id="template-demo9">
<div class="demo-section clearfix">
<div class="demo-section-title"></div>
<div class="inner-left preview">
<div class="data-container"></div>
</div>
<div class="inner-right code">
<pre><code>$('#demo').pagination({
dataSource: [{a :1}, {a :2}, {a :3}, {a :4}, ... , {a :50}],
pageSize: 8,
formatResult: function(data) {
for (var i = 0, len = data.length; i < len; i++) {
data[i].a = data[i].a + ' - bad guys';
}
},
callback: function(data, pagination) {
// template method of yourself
var html = template(data);
dataContainer.html(html);
}
})</code></pre>
paginationjs分页器案例
需积分: 1 99 浏览量
2024-05-21
17:12:27
上传
评论
收藏 63KB RAR 举报
paginationjs分页器案例.rar （12个子文件） 
paginationjs分页器案例 js 
jquery-3.6.1.min.js 88KB prettify.min.js 14KB index.js 12KB
一般使用案例.html 3KB dist 2.6.0 pagination.min.js 15KB pagination.css 8KB css style.css 5KB prettify.css 825B base.css 9KB 完整格式的分页器案例.html 3KB 案例展示.html 15KB images 
forkme_right_green_007200.png 7KB资源评论
bin9153
- 粉丝: 40
- 资源: 9
最新资源
- 海信智能电视刷机数据 LED42K330X3D（0000） 生产用软件数据 务必确认机编一致 强制刷机 整机USB升级程序
- shujudaochuceshi
- learn-ruby.zip
- test111111111111111111
- face-detect.ipynb
- 以下是一些关于ACM（国际大学生程序设计竞赛）、NOI（全国青少年信息学奥林匹克竞赛）以及CSP（全国青少年信息学奥林匹克竞赛提
- 是一些电子设计竞赛（电赛）经验分享，包括备赛策略、项目管理、团队合作和比赛期间的注意事项
- 全能运行库修复工具DirectX Repair v4.1.0.30770
- las格式点云数据使用详解(附VS编译好的LAStools工具)
- KRPano插件一键解密大师1.4.0 (解压密码1234)
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
