JS表格分页组件：fupage的设计思路和具体用法(未来考虑开源,争取在2015年）

一、背景

之前在秒针工作的时候，某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;

}