一个比较好用的分页控件
2018-01-18 本文已影响599人
愿你如夏日清凉的风
官方地址：http://pagination.js.org/index.html
最近在做一个PC端的数据管理系统，分页的需求是必不可少的，而后端的要求是除了把分页的样式和结构写出来，还必须要把JS的交互也写出来，后端只写请求数据的那部分代码，我尝试了好几个分页的控件，最终觉得这个最好用，下面是我在项目中的代码，分享出来给大家看一下。
另外，这个项目是用bootstrap做的，所以你会看到我引入了bootstrap.css，同时，在结构上也使了一些bootstrap的代码，如果你只是单纯的想用这个的控件，可以完全不必理会跟bootstrap.css有关的这部分内容。
HTML代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta content="text/html" charset="utf-8" http-equiv="Content-Type">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="renderer" content="webkit"/>
<title>一个比较好用的分页控件</title>
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/main.css">
<link rel="stylesheet" href="assets/css/pagination.css">
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.min.js"></script>
<script src="assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="main-content">
<!-- 带页码的表格 -->
<div class="system-table">
<table class="data-table2 table table-hover">
<thead>
<tr>
<th>标题</th>
<th>文章总点击</th>
<th>文章端内点击</th>
<th>文章PC站点击</th>
<th>分享文章h5点击</th>
<th>分享文章次数</th>
</tr>
</thead>
<tbody>
<tr>
<td><i class="article-title-id">1,</i><a href="#">22岁接班，富李兆会…</a></td>
<td>23</td>
<td>23</td>
<td>5</td>
<td>23</td>
<td>23</td>
</tr>
... 被省略的代码
</tbody>
</table>
<div class="table-footer">
<div class="pull-right">
<div id="systemPager"></div>
</div>
<p>每页显示 <input type="text" class="page-count" value="7">条</p>
</div>
</div>
</div>
<script src="assets/js/jquery-3.2.1.min.js"></script>
<script src="assets/js/pagination.js"></script>
下面是JS代码：
<script type="text/javascript">
/* 分页的事件 */
$(function () {
(function () {
var container = $('#systemPager');
var sources = function () {
var result = [];
for (var i = 1; i < 196; i++) {
result.push(i);
}
return result;
}();
var options = {
dataSource: sources, // 数据源，最终提供给分页组件的是一个数组
// 如果是ajax请求就用下面这段：
/*
dataSource: function(done) {
$.ajax({
type: 'GET',
url: '/test.json',
success: function(response) {
done(response);
}
});
},*/
locator: function () { // 这个参数与 dataSource 相关，一般情况下，dataSource 是一个数组，可以直接传给分页组件处理。但如果返回的是 Object，那么就需要指定那个数组，默认为 data
// find data and return
return 'a.b';
},
// dataSource: '填写接口',
// locator: '指定数据源中的哪个数组',
pageSize: 4, // 默认显示几个页码，每页的条目数
pageNumber: 1, // 默认在第几页，初始化时加载哪一页的数据
pageRange: 2, //可见的页码范围，即当前页码两边的页码数量。比如当前是第 6 页，设置 pageRange 为 2，则页码条显示为 '1... 4 5 6 7 8'
showNavigator: true, // 显示总页码数和当前第几页
showGoInput: true, // 显示跳转到第多少页
showGoButton: true, // 显示点击跳转的按钮
// activeClassName: 'systemPagerActive',
prevText: ' 上一页 ',
nextText: ' 下一页 ',
goButtonText: 'go',
formatGoInput: '跳转到第 <%= input %> 页',
className: 'paginationjs-theme-red paginationjs-small',
//callback 每次翻页时的回调
callback: function (response, pagination) {
// 数据成功获取之后马上触发
console.log(111);
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
});
container.addHook('beforeRender', function () {
// 每次分页时会重新渲染分页条，渲染之前调用
console.log("渲染之前触发");
});
container.addHook('beforePreviousOnClick', function () {
console.log('点击上一页之前调用');
});
container.addHook('beforeNextOnClick', function () {
console.log('点击下一页之前调用');
});
container.addHook('beforeGoButtonOnClick', function () {
console.log('分页跳转按钮点击之前调用');
});
})();
});
</script>
以上是我根据官网的文档写出的代码，后端可以直接能用。
pagination.css、pagination.js文件是从官网下载的，您需要的时候可以直接去下载。
在pagination.css你可以根据自己的需要修改样式，而且这个控件本身也提供了几套不同的色调供选择，如果你喜欢的话，可以直接使用。
