一、背景
之前在秒针工作的时候，某js高级工程师写了很多自己的组件，其中一套是分页组件，叫做st-grid。不过在我看来，bug太多，我经常给他反馈bug，我也不清楚为啥别人没有发现。
回到武汉工作后，我自己利用业余实践完善自己的官网，从前端到后端，都是自己一个人亲自搞定。
第1个分页的需求是，文章下方的评论，异步加载。第2个需求是，表格管理，比如后台管理系统，经常需要列出user、log等表的记录。
之前在秒针工作的时候，某js高级工程师写了很多自己的组件，其中一套是分页组件，叫做st-grid。不过在我看来，bug太多，我经常给他反馈bug，我也不清楚为啥别人没有发现。
回到武汉工作后，我自己利用业余实践完善自己的官网，从前端到后端，都是自己一个人亲自搞定。
第1个分页的需求是，文章下方的评论，异步加载。第2个需求是，表格管理，比如后台管理系统，经常需要列出user、log等表的记录。
二、实例
<table class="table table-bordered table-hover table-condensed" >
<thead>
<tr>
<th>名字</th>
<th>银行机构码</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody id="bodyHolder"></tbody>
</table>
<div id="pageHolder"></div>
</div>
<script>
var formatStatus = function(value) {
var strStatus = "";
if (value == 1) {
strStatus = "无效";
} else if (value == 11) {
strStatus = "待审核";
} else if (value == 21) {
strStatus = "审核通过";
}
return strStatus;
};
(function() {
var fuPage = new FuPage(
{
"url" : "${base}/bank/list.json",
"params" : {
"pageNo" : 1,
"pageSize" : 10
},
"isTable" : true,
"bodyHolder" : "bodyHolder",
"pageHolder" : "pageHolder",
"tableTemplate" : "<tr><td>{name}</td><td>{bankcode}</td><td>@formatStatus({status})</td>"
+ "<td><a href='${base}/bank/edit.html?id={id}'>编辑</a>|"
+ "<a href='javascript:;' onclick='pass(\"{id}\",\"{name}\");'>审核通过</a>|"
+ "<a href='javascript:;' onclick='unpass(\"{id}\",\"{name}\");'>审核失败</a>"
+ "</tr>"
});
fuPage.send();
})();
</script>
三、实例解读
1.定义table
这个地方不是关键，主要是，确定表头。
表头一般是固定的。
目前的设计是，表头就是开发者自己写死。（我遇到的需求基本都是这样）
2.定义2个容器-holder
bodyHolder，名字可以随便取，只不过要对应。
fupage会把表的主体内容，放在这个div里。
pageHolder，存放分页，比如“上一页”、“下一页”等。
3.定义FuPage对象，向后台请求数据。
var fuPage = new FuPage({..});
fuPage.send();
4.参数。
url:后台请求路径
params:参数
bodyHolder,pageHolder，容器的id
tableTemplate，一行数据row的模版。
5.模版渲染
解析变量，{varName}。
自定义函数。
比如
<td>@formatStatus({status})</td>
function formatStatus(status){
}
四、设计思路
/**
* FansUnion Page Library v1.0.7
* LastUpdate:2015-3-13
* Copyright 2012~2112, xiaolei
* QQ: 240370818
* Email:fansunion@qq.com
*
*/
/**
* 分页组件，可以作为自定义内容或者标准型表格的分页，比如文章评论，user列表。 表格分页，模版由外界传入。
* <br/>提供给用户的构造表格的方法主要有2个：构造方法 new FuPage(options)和发送数据请求send(params)。
* 事件通知方法有：onfilled,onedited,onerror(暂时没有)
*/
function FuPage(options) {
this.url = options.url;
this.params = options.params;
this.startNo = 1;
this.endNo = 1;
this.tableTemplate = options.tableTemplate;
this.bodyHolder = options.bodyHolder;
this.pageHolder = options.pageHolder;
}
// 向后端发送请求
FuPage.prototype.send = function(params) {
var that = this;
// console.log(params);
if (typeof params == 'object') {
$.each(params, function(p, val) {
that.params[p] = val;
})
}
console.log("FuPage params:" + that.params);
$.post(this.url, this.params, function(data) {
var page = data.page;
if (!page) {
// console.error("page is null,data is "+data);
data = $.parseJSON(data);
page = data.page;
}
that.renderTable(page);
renderPage(that, page);
addPageEvent(that, page);
});
}
// 渲染表格主体
FuPage.prototype.renderTable = function(page) {
// var ok = this.isTable && this.tableTemplate != null;
if (!this.tableTemplate) {
console.error("tableTemplate is null");
return false;
}
var divs = '';
$("#" + this.bodyHolder).html(divs);
}
// 未定义的变量，用""展示
var nullToEmpty = function(value) {
if (value == null || value == undefined) {
value = "";
}
return value;
}
// 渲染分页栏
function renderPage(fuPage, page) {
var pageDiv = buildPage(fuPage, page);
$("#" + fuPage.pageHolder).html(pageDiv);
}
// 为分页超链接绑定click事件
function addPageEvent(fuPage, page) {
// 解决同一个页面，多个实例导致ID冲突的问题
var prefix = fuPage.pageHolder;
var nextPageA = document.getElementById(prefix + "nextPageA");
if (nextPageA != null) {
nextPageA.onclick = function() {
goToPage(fuPage, fuPage.params.pageNo + 1)
};
}
var prevPageA = document.getElementById(prefix + "prevPageA");
if (prevPageA != null) {
prevPageA.onclick = function() {
goToPage(fuPage, fuPage.params.pageNo - 1)
}
}
var beginPageA = document.getElementById(prefix + "beginPageA");
if (beginPageA) {
beginPageA.onclick = function() {
goToPage(fuPage, 1);
}
}
var endPageA = document.getElementById(prefix + "endPageA");
if (endPageA != null) {
endPageA.onclick = function() {
goToPage(fuPage, page.totalPage)
}
}
for (var no = fuPage.startNo; no <= fuPage.endNo; no++) {
var id = prefix + "noPageA" + no;
// console.log(id);
var noPageA = document.getElementById(id);
if (noPageA != null && no != fuPage.pageNo) {
$("#" + id).on("click", function(e) {
// 找到事件源，事件源的文本内容"1"即为页数，string转换成int，防止str+int结果是string
var number = $(this).text();
// 把string转换成int类型
number = new Number(number);
goToPage(fuPage, number)
});
}
}
}
// 加载指定的页面
function goToPage(fuPage, no) {
fuPage.params.pageNo = no;
fuPage.send();
}
// 构造分页栏的html，记得给第“1”页等按钮，绑定事件
function buildPage(fuPage, page) {
var totalPage = page.totalPage;
var pageNo = page.pageNo || 1;
var pageSize = page.pageSize;
var totalCount = page.totalCount;
if (totalCount <= 0) {
console.log("totalCount=0")
return "";
}
// 半距离算法
var half = 5;
var startNo = 1;
var endNo = totalPage;
var left = pageNo - half;
var right = pageNo + half;
if (left < 1) {
startNo = 1;
} else {
startNo = left;
}
if (right > totalPage) {
endNo = totalPage;
} else {
endNo = right;
}
fuPage.startNo = startNo;
fuPage.endNo = endNo;
var prefix = fuPage.pageHolder;
// 分页链接，绑定事件
var ul = '<ul class="pagination">';
if (pageNo == 1) {
ul += '<li class="disabled"><span>首页</span></li><li><span>上一页</span></li>';
} else {
ul += '<li><a href="javascript:;" id="' + prefix
+ 'beginPageA">首页</a></li><li><a href="javascript:;" id="'
+ prefix + 'prevPageA">上一页</a></li>';
}
for (var no = startNo; no <= endNo; no++) {
if (no == pageNo) {
ul += '<li class="active"><a href="javascript:;">' + no
+ '</a></li>';
} else {
ul += '<li><a href="javascript:;" id="' + prefix + 'noPageA' + no
+ '" >' + no + '</a></li>';
}
}
if (pageNo == totalPage)
ul += '<li class="disabled"><span>下一页</span></li><li class="disabled"><span>尾页</span></li>';
else {
ul += '<li><a href="javascript:;" id="' + prefix
+ 'nextPageA" >下一页</a></li><li><a href="javascript:;" id="'
+ prefix + 'endPageA">尾页</a></li>';
}
ul += '<li><span>共' + totalPage + '页</span></li><li><span>共' + totalCount
+ '条</span></li></ul>';
return ul;
}