一、背景
         之前在秒针工作的时候,某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;
}

JS表格分页组件:fupage的设计思路和详细使用方法(未来考虑开源,争取在2015年)的更多相关文章

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

    一.背景         之前在秒针工作的时候,某js高级工程师写了很多自己的组件,其中一套是分页组件,叫做st-grid.不过在我看来,bug太多,我经常给他反馈bug,我也不清楚为啥别人没有发现. ...

  2. 基于Vue.js的表格分页组件

    有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋 ...

  3. Vue.js的表格分页组件

    转自:http://www.cnblogs.com/Leo_wl/p/5522299.html 有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更 ...

  4. iOS 组件化 —— 路由设计思路分析

    原文 前言 随着用户的需求越来越多,对App的用户体验也变的要求越来越高.为了更好的应对各种需求,开发人员从软件工程的角度,将App架构由原来简单的MVC变成MVVM,VIPER等复杂架构.更换适合业 ...

  5. JS表格分页(封装版)

    HTML代码: <html> <head> <meta charset='utf-8'> <script type="text/javascript ...

  6. 基于iview 封装一个vue 表格分页组件

    iview 是一个支持中大型项目的后台管理系统ui组件库,相对于一个后台管理系统的表格来说分页十分常见的 iview是一个基于vue的ui组件库,其中的iview-admin是一个已经为我们搭好的后天 ...

  7. vue2.0分页组件,

    pagination.vue <!-- 表格分页组件 --> <template> <nav class="boot-nav"> <ul ...

  8. 基于 bootstrap 的 vue 分页组件

    申手党点这里下载示例 基于 bootstrap 的 vue 分页组件,我想会有那么一部分同学,在使用Vue的时候不使用单文件组件,因为不架设 NodeJS 服务端.那么网上流传的 *.vue 的各种分 ...

  9. 电子商务系统的设计与实现(十三):分页组件,从前到后,从JS到Java

    一.概述   学习实践Web开发5年多了,直到今天,我才算真正实现了最基本最常用的分页组件. 包括:    a.前端JS异步加载并渲染:    b.前端JSP.Freemarker.Struts标签渲 ...

随机推荐

  1. Gym-101615C-Fear Factoring(数论)

    分析 题意是求 L - R之间的数的因数和 我们知道如果对于一个数 i ( i < k = sqrt(R)),那么一定有一个数 R/i 也是R的因数 遍历 i = 2 - k,然后对于每一个 i ...

  2. Ubuntu配置Samba文件共享服务器

    Samba是在Linux和UNIX系统上实现SMB协议的一个免费软件,由服务器及客户端程序构成.SMB(Server Messages Block,信息服务块)是一种在局域网上共享文件和打印机的一种通 ...

  3. 分享一款非常好用的Fatkun图片批量下载工具

    Fatkun图片批量下载 相信大家一定遇到过有着大量精美图片的网页,譬如美女照片.各种壁纸.设计素材.甚至是1024套图等等,但常常几十上百张的图要一张张手工去点击下载实在能让人抓狂!小编的工作中也常 ...

  4. 【URAL 1486】Equal Squares(二维哈希+二分)

    Description During a discussion of problems at the Petrozavodsk Training Camp, Vova and Sasha argued ...

  5. 2017acm南宁现场赛 J题 Rearrangement

    题意: 给定一个2 * n的矩阵, 和 2 * n 个数, 问能不能通过重排列, 使得任意相邻两数不能被3整除 分析: 这题一直卡到最后, 赛后经对面大佬提醒后, 发现统计所有数模三的结果(0,1,2 ...

  6. 利用nginx设置浏览器协商缓存

    强缓存与协商缓存的区别 强缓存:浏览器不与服务端协商直接取浏览器缓存 协商缓存:浏览器会先向服务器确认资源的有效性后才决定是从缓存中取资源还是重新获取资源 协商缓存运作原理 现在有一个这样的业务情景: ...

  7. python学习笔记--python简介

    一.什么是python? python是一种面向对象.解释型的高级程序语言.python具有语法简洁.易于学习.功能强大,可扩展性强,跨平台等诸多特点.1989年开始开发,于1991年发布第一个公开发 ...

  8. 洛谷P1021 邮票面值设计

    题目描述 给定一个信封,最多只允许粘贴N张邮票,计算在给定K(N+K≤15)种邮票的情况下(假定所有的邮票数量都足够),如何设计邮票的面值,能得到最大值MAX,使在1-MAX之间的每一个邮资值都能得到 ...

  9. Toad Oracle 本地/远程数据库导入/导出 数据库备份

    1. Toad进入数据库后,选择 Database ==> Export  ===>  Export Utility Wizard ,选择export  user(按用户导出),选择Toa ...

  10. JS获取服务器时间并且计算距离当前指定时间差的函数

    项目中遇到了从服务器获取时间,现在记录一下方便以后查询: 1.后台代码:(创建一个date对象并以JSON的形式返回去) // 获取服务器时间 public String getNowServerTi ...