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

一、背景
之前在秒针工作的时候，某js高级project师写了非常多自己的组件。当中一套是分页组件。叫做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”页等button。绑定事件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;}