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:[email protected]
 *
 */

/**
 * 分页组件,可以作为自定义内容或者标准型表格的分页,比如文章评论,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;
}

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。