前段时间在写页面的时候涉及到了分页功能，因为从网上引用别人的框架可定制性不强。想着逻辑不难，索性自己写了一个，在此记录一下。
直接上效果：
<link rel="stylesheet" href="../../ty_paging/ty_paging.css">
<script src="../../ty_paging/ty_paging.js"></script>
<!-- 分页 -->
<ul id="ty_paging"></ul>
//总页数：传服务端分页接口中的总页数
ty_dealPaging(总页数, function (currentPage) {
/* 分页点击时会响应此回调函数，
currentPage :当前点击的页码 */
});
到此，分页的功能就实现了。
我把实现分页功能的js，css从项目中分离了出来，半路出家的我在此不敢称对此功能块进行了封装，就是抽离了出来，降低代码耦合性。
我把文件命名为ty_开头，原因很简单。ty是我公司的缩写，这样定义文件名、func名、参数名等，是为了防止与其他文件、函数、全局变量等重名，带来不必要的麻烦。
在ty_paging.js文件中，我定义了一个全局变量
ty_currentPage，只需要给ty_currentPage赋值，就可让其选中对应的分页码，方便还原初始状态。
如：
ty_currentPage = 1;
onePageMaxCount变量，只需改变其值即可决定一页最多显示的分页码，我的网页中为5页。
//定义2个参数记录网页上展示的起点和终点页数
var startIndex = 1, //起始分页数
endIndex = maxPage; //结束分页数
//此处要分几种情况处理：
1. 总页数 <= 一页能展示的分页数
2. 总页数 > 一页能展示的分页数
2.1 当前选中页 <= 一页能展示的分页数的一半（大方向取整）
2.2 当前选中页 > 一页能展示的分页数的一半（大方向取整）
2.2.1 如果选中最后几页，起始位置和终点是固定不变的
if (maxPage <= onePageMaxCount) {//一页能显示下分页数量
startIndex = 1;
endIndex = maxPage;
} else {
if (ty_currentPage <= Math.ceil(onePageMaxCount/2)) {
startIndex = 1;
endIndex = onePageMaxCount;
} else {
//起始、终点位置逻辑推导
startIndex = ty_currentPage - (Math.ceil(onePageMaxCount/2)-1);
endIndex = ty_currentPage + (Math.ceil(onePageMaxCount/2)-1);
if (endIndex > maxPage) {
endIndex = maxPage;
startIndex = maxPage - (onePageMaxCount-1);
}
}
}
其他代码是对样式、事件等的处理，文件中备注的也算清楚，一目了然。有需要查看完整分页代码的可以在gitHub download下来。
千里之行，始于足下~
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent