原生js版分页插件

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件，今天简单改造了一下，改成了原生JavaScript版本的分页插件，可以自定义一些简单配置，特此记录下来。如有不足之处，欢迎指出。

需要购买阿里云产品和服务的，点击此链接领取优惠券红包，优惠购买哦，领取后一个月内有效： https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=fp9ccf07

本插件可以自定义的功能：

1. 可初始化每页条数，以及重新选择每页条数

2.自定义首末页、上下页按钮的显示内容（是：<<、 >>、 < 、 > 还是：首页、末页、上一页、下一页）

3.设置当前页在一定范围时，是否显示省略号按钮

4.自定义当前页按钮与省略号按钮之间显示的数字按钮的个数

需要设置的参数如下：

pageSize: 10,           //每页条数（不设置时，默认为10）
prevPage: '上页',      //上一页按钮显示内容（不设置时，默认为：<）
nextPage: '下页',      //下一页按钮显示内容（不设置时，默认为：>）
firstPage: '首页',      //首页按钮显示内容（不设置时，默认为：<<）
lastPage: '末页',       //末页按钮显示内容（不设置时，默认为：>>）
degeCount: 4,         //当前页前后两边可显示的页码个数（不设置时，默认为3）
ellipsis: true            //是否显示省略号按钮(不可点击)（true:显示，false:不显示，不设置时，默认为显示）

这些设置项只需要在页面加载时定义一个js对象，设置相应的参数，在创建Paging实例时，传入该对象即可。当然也可以不定义该参数对象，则在创建Paging实例时，需传入空对象，此时就是默认设置。

由于本案例用ajax调用的接口是真实接口，返回的都是真实数据，所以在本博客的代码中，我会把调用的接口地址和相关的请求头信息隐藏。

自己实现的简单小插件，把分页部分的css样式写在了插件paging.js中，以动态创建style标签的方式，加入到页面中。

1、代码部分：

1.1、插件 - paging.js

分页的css样式写在插件中，动态创建style标签，加载到页面中。在该js中有一个Paging构造函数。在构造函数中有两个参数，第一个是自定义分页参数的js对象，第二个是回调函数。

在构造函数中有一个initPage()方法。用来渲染分页DOM结构。页码点击事件和选择每页条数的事件都写在构造函数中，目前这样感觉确实不好，后续再改进。

代码如下：

1.2、index.html

只需要在创建Paging实例的时候，传入设置项的js对象，然后在回调函数里发送ajax请求获取数据。回调函数里需要传入两个形参，依次是当前页码和每页条数。ajax请求的成功回调里根据接口返回的总条数，结合每页条数计算出总页数。再调用Paging实例的initPage()方法，传入总条数、总页数和当前页码，即可渲染出分页的DOM结构了。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js版分页插件</title>
<style>
.data {
width: 70%;
margin: 0 auto;
}
.params {
margin: 20px 0;
}
.params input {
height: 30px;
box-sizing: border-box;
}
.params .search-btn {
float: right;
width: 80px;
border: 0 none;
background-color: #666;
color: #fff;
font-size: 14px;
}
table {
width: 100%;
border-collapse: collapse;
text-align: center;
}
th, td {
border: 1px solid #999;
height: 26px;
line-height: 26px;
}
.no-data {
display: none;
height: 80px;
line-height: 80px;
text-align: center;
color: #aaa;
}
</style>
</head>
<body>
<div class="data">
<div class="params">
<label for="course_id">用户姓名：</label><input type="text" id="user_name">
<input type="button" value="查询" class="search-btn" id="search_btn">
</div>
<table>
<thead>
<tr>
<th>序号</th>
<th>用户ID</th>
<th>姓名</th>
<th>创建时间</th>
</tr>
</thead>
<tbody id="data_list"></tbody>
</table>
<div class="no-data">未查询到数据</div> 
<div class="page">
<div class="page-l" id="page_l" style="float: left;">
<span>总共 <span id="total_count"></span> 条</span>
<div class="page-size-box">
<span>每页显示</span>
<select id="page_size">
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>条
</div>
</div>
<div class="page-r">
<ul id="page_ul" class="page-ul"></ul>
</div>
</div>
</div> <script src="../lib/jquery.js"></script>
<script src="paging-bak.js"></script>
<script>
$(function () { //分页参数（参数名固定不可变）
var pageConfig = {
pageSize: 10, //每页条数（不设置时，默认为10）
prevPage: '上页', //上一页（不设置时，默认为：<）
nextPage: '下页', //下一页（不设置时，默认为：>）
firstPage: '首页', //首页（不设置时，默认为：<<）
lastPage: '末页', //末页（不设置时，默认为：>>）
degeCount: 4, //当前页前后两边可显示的页码个数（不设置时，默认为3）
ellipsis: true //是否显示省略号按钮(不可点击)（true:显示，false:不显示，不设置时，默认为显示）
}
getList(); //初始加载就查询 //点击查询按钮
$('#search_btn').click(function () {
getList();
}) //查询列表数据
function getList() {
//初始化Paging实例(pageConfig参数也可以为空对象，此时就是默认设置)
var pageIng = new Paging(pageConfig, function (pageIndex, pageSize) {
var userName = $('#user_name').val();
$.ajax({
url:'http://******/getSysUserList.do', //这里就不显示接口地址
type:'get',
data:{
pageIndex: pageIndex,
pageSize: pageSize,
name: userName
},
success: function (res) {
if(res.success == 1){
if(res.data.length > 0){ //如果查询到了数据
var dataList = res.data;
var html = '';
dataList.forEach(function (item, i) {
html += '<tr>'+
'<td style="width: 20%;">'+((pageIndex-1)*pageSize+i+1)+'</td>'+
'<td style="width: 20%;">'+item.id+'</td>'+
'<td style="width: 30%;">'+item.name+'</td>'+
'<td style="width: 30%;">'+item.createTime+'</td>'+
'</tr>';
});
$('#data_list').html(html);
var totalCount = res.totalCount; //接口返回的总条数
var totalPage = Math.ceil(totalCount / pageSize); //根据总条数和每页条数计算总页码数 // 调用Paging实例的 initPage()方法生成分页DOM结构
pageIng.initPage(totalCount, totalPage, pageIndex);
$('.page').show();
$('.no-data').hide();
}else{ //如果未查询到数据
$('#data_list').html('');
$('.page').hide();
$('.no-data').show();
}
}else{
$('#data_list').html('');
$('.page').hide();
$('.no-data').show();
}
}
})
});
}
})
</script>
</body>
</html>