一个table插件，用于bootstrap开发
最近项目中改用bootstrap，可以给的通用table，写的有点死，id名称是固定的，那一个页面两个table如何做呢？
ok，模仿着别人的代码，写了一个，整体代码如下：
;
(function(factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as anonymous module.
define([ 'jquery' ], factory);
} else if (typeof exports === 'object') {
// Node / CommonJS
factory(require('jquery'));
} else {
// Browser globals.
factory(jQuery);
}
})
(function($) {
'use strict'; function isNumber(n) {
return typeof n === 'number';
} function toArray(obj, offset) {
var args = []; if (isNumber(offset)) { // It's necessary for IE8
args.push(offset);
} return args.slice.apply(obj, args);
} function isUndefined(n) {
return typeof n === 'undefined';
} function BiaoGe(element, options) {
this.$table = element,
this.options = $.extend({}, BiaoGe.DEFAULTS, options),
this.page_size = ,
this.page_num = ,
this.loadingTrHtml = '<tr><td colspan="100" class="loading100"><i class="fa fa-spinner fa-spin fa-2x"></i> <span>正在加载，请稍后...</span></td></tr>';
this.emptyTrHtml = '<tr><td colspan="100" class="loading100"><span>没有您要搜索的内容</span></td></tr>';
this.load();
}
; BiaoGe.DEFAULTS = {
columns : [],
pageSizes : [ , , , ]
}; BiaoGe.prototype = {
constructor : BiaoGe, load : function() {
this.initHead();
this.initBody();
this.initPager();
this.loadData();
this.addListener();
}, initHead : function() {
var options = this.options;
if (options.columns.length > ) {
var theadHtml = '<thead><tr>';
for (var i = ; i < options.columns.length; i++) {
var col = options.columns[i];
theadHtml += '<th';
if (col.width)
theadHtml += ' width="' + col.width + '"';
if (col.align)
theadHtml += ' class="text-' + col.align + '"';
theadHtml += '>' + col.title + '</th>';
}
theadHtml += '</tr></thead>';
$(theadHtml).appendTo(this.$table);
}
}, initBody : function() {
this.$tbody = $('<tbody></tbody>');
this.$tbody.appendTo(this.$table);
this.emptyLoading();
}, emptyLoading : function() {
this.$tbody.html(this.loadingTrHtml);
}, initPager : function() {
this.$table_pager = $('<div></div>');
var $table_parent = $($(this.$table).parent().get());
if($table_parent.hasClass("table-responsive")){
this.$table_pager.insertAfter($table_parent);
}
else{
this.$table_pager.insertAfter(this.$table);
}
this.$table_pager.addClass('table-pager'); this.initPageSize();
this.initPageNum();
}, initPageSize : function() {
var $group_page_size = $('<div></div>');
$group_page_size.appendTo(this.$table_pager);
$group_page_size.addClass('input-group pager-size'); var $span = $('<span >显示</span>');
$span.appendTo($group_page_size);
$span.addClass('input-group-addon'); this.$page_size = $('<select></select>');
this.$page_size.appendTo($group_page_size);
this.$page_size.addClass('form-control input-sm');
var options = '';
for (var i = ; i < this.options.pageSizes.length; i++) {
var size = this.options.pageSizes[i];
options += '<option value="' + size + '">' + size
+ '</option>';
}
this.$page_size.html(options);
this.page_size = this.$page_size.val(); $span = $('<span >条 共</span>');
$span.appendTo($group_page_size);
$span.addClass('input-group-addon'); this.$record_total = $('<strong>0</strong>');
this.$record_total.appendTo($span); $span.append('条');
}, initPageNum : function() {
var $group_page_num = $('<div></div>');
$group_page_num.appendTo(this.$table_pager);
$group_page_num.addClass('input-group pager-num'); var $span = $('<span >第</span>');
$span.appendTo($group_page_num);
$span.addClass('input-group-addon'); this.$page_num = $('<select></select>');
this.$page_num.appendTo($group_page_num);
this.$page_num.addClass('form-control input-sm');
var options = '<option value="1">1</option>';
this.$page_num.html(options); $span = $('<span >页</span>');
$span.appendTo($group_page_num);
$span.addClass('input-group-addon');
}, addListener : function() {
this.$page_size.on("change", $.proxy(this.pageSizeChange,
this));
this.$page_num.on("change", $.proxy(this.pageNumChange,
this));
}, pageSizeChange : function() {
this.page_size = this.$page_size.val();
this.page_num = ;
this.loadData();
}, pageNumChange : function() {
this.page_num = this.$page_num.val();
this.loadData();
}, loadData : function() {
if (this.options.loadData
&& typeof this.options.loadData === 'function') {
this.options.loadData(this.page_num, this.page_size, $
.proxy(this.initData, this));
}
}, refreshData : function(){
this.emptyLoading();
this.loadData();
}, reloadData : function(){
this.emptyLoading();
this.page_num = ;
this.loadData();
}, initData : function(data) {
var options = this.options;
var tbodyHtml = '';
if (data && data.rows) {
for (var c = ; c < data.rows.length; c++) {
tbodyHtml += '<tr>';
for (var i = ; i < options.columns.length; i++) {
tbodyHtml += this.initTd(options.columns[i],
data.rows[c], c);
}
tbodyHtml += '</tr>';
}
}
if(tbodyHtml.isNullOrEmpty())
tbodyHtml = this.emptyTrHtml;
this.$tbody.data('d',data);
this.$tbody.html(tbodyHtml);
this.setPager(data.total);
}, initTd : function(col, row, c) {
var tdHtml = '<td';
if (col.width)
tdHtml += ' width="' + col.width + '"';
var tdclass = '';
if (col.align)
tdclass += 'text-' + col.align;
if (col.td_class)
tdclass += ' ' + col.td_class;
if(tdclass.length > )
tdHtml += ' class="'+tdclass+'"';
tdHtml += '>';
if (col.field) {
var value = '';
if(row[col.field] != null && row[col.field] != '')
value = row[col.field]; if (col.formatter
&& typeof col.formatter === 'function') {
tdHtml += col.formatter(value, row, c);
} else if (col.maxLength) {
var content = value;
if (content.length > col.maxLength)
content = content.substring(, col.maxLength);
tdHtml += '<div title="' + value + '">' + content
+ '</div>';
} else {
tdHtml += value;
}
} else {
tdHtml += ((this.page_size * (this.page_num - )) + c + );
}
tdHtml += '</td>';
return tdHtml;
}, setPager : function(total) {
this.$record_total.html(total);
var pages = Math.ceil(total / this.page_size);
var options = "";
for (var i = ; i <= pages; i++) {
options += '<option value="' + i + '" ' + ((i==this.page_num)?'selected="selected"':'') + '>' + i
+ '</option>';
}
this.$page_num.html(options);
}, getRowData : function(index){
var data = this.$tbody.data('d');
if (data && data.rows){
return data.rows[index];
}
else
return null;
}
}; $.fn.BiaoGe = function(options) {
var args = toArray(arguments, ),
result; this.each(function() {
var $this = $(this),
data = $this.data('BiaoGe'),
fn; if (!data) {
$this.data('BiaoGe', (data = new BiaoGe(this,
options)));
} if (typeof options === 'string'
&& $.isFunction((fn = data[options]))) {
result = fn.apply(data, args);
}
}); return isUndefined(result) ? this : result;
};
});
用法如下：
1.在页面中增加一段table的代码
<!-- table -->
<div class="table-responsive">
<table id="table_01" class="table table-bordered table-striped table-hover" style="margin-bottom:0px;">
</table>
</div>
2.增加脚本
function convertDate(value, row, index) {
var time;
if (value != null && value != '') {
var d;
if (!isNaN(value)) {
d = new Date(value);
} else {
d = new Date(value.time);
}
var m = d.getMonth() + ;
var day = d.getDate();
if (parseInt(m) < ) {
m = "" + m;
}
if (parseInt(day) < ) {
day = "" + day;
}
var hours = d.getHours();// hour
if (parseInt(hours) < ) {
hours = "" + hours;
}
var mm = d.getMinutes();
if (parseInt(mm) < ) {
mm = "" + mm;
}
var ss = d.getSeconds();
if (parseInt(ss) < ) {
ss = "" + ss;
}
time = d.getFullYear() + "-" + m + "-" + day + " " + hours
+ ":" + mm + ":" + ss;
}
return time;
}
var cols = [
{
title : '序号',
width : '5%'
},{
field : 'deptCode',
title : '医院编码',
width : '10%'
}, {
field : 'deptName',
title : '医院名称',
width : '50%'
},{
field : 'submitTime',
title : '创建日期',
width : '20%',
formatter : convertDate //显示转化方法
}, {
field : 'id',
title : '操作',
width : '15%',
align : 'center',
formatter : function(value, row, index) {
return '<a class="btn btn-success btn-sm" href="#" data-toggle="modal" data-target="#editModal" data-whatever="'
+ value + '" title="修改"><i class="fa fa-edit"></i> 修改</a> '+
'<a class="btn btn-danger btn-sm" role="button" onclick="del_dept(\'' + value +
'\')" title="删除"><i class="fa fa-bitbucket"></i> 删除</a>';
}
}
];
$("#table_01").BiaoGe({
hasPager : true,
columns : cols,
loadData : function(pageNum, pageSize, callback) {
var data = {
//固定参数
rows : pageSize,
page : pageNum,
//自定义参数
search : $.trim($("#searchText").val())
};
$.post(
"/dept/dataGrid",
data,
function(data) {// {total:11,rows[{..},{..}]}
//console.log(data);
callback(data);
},
"json"
);
}
});
这样table就显示出来了
如果，你想要重新加载table，调用相应的方法就ok了，如搜索项变化事件：
$("#searchText").on("change", function() {
$("#table_01").BiaoGe("reloadData");
});
来张图:
忘了，还有服务端返回的数据 应为：
{total:11,rows[{..},{..}]}
over
一个table插件，用于bootstrap开发的更多相关文章
- Mockito：一个强大的用于Java开发的模拟测试框架
https://blog.csdn.net/zhoudaxia/article/details/33056093 介绍 本文将介绍模拟测试框架Mockito的一些基础概念, 介绍该框架的优点,讲解应用 ...
- 创建一个Table View
在本课程中,您将创建应用程序FoodTracker的主屏幕.您将创建第二个,表视图为主场景,列出了用户的菜谱.你会设计定制表格单元格显示每一个菜谱,它是这样的: 学习目标 在课程结束时,你将能够: 创 ...
- Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 ...
- 如何开发一个 PyCharm 插件
PyCharm 是很多 Python 开发者优先选择的 IDE,功能强大,跨平台,提供免费社区版,非常良心.如果你想自己给PyCharm添加一些功能怎么办呢?有两个办法: 通过提需求实现,到 JetB ...
- bootstrap table插件动态加载表头
这篇文章主要为大家详细介绍了bootstrap table插件动态加载表头,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 bootstrap的table属性已经很熟悉了,最近遇到一个问题,犹豫 ...
- bootstrap开发一个简单网页。
CSS代码: body{ padding-top: 50px; padding-bottom: 50px; overflow: auto!important; ...
- bootstrap table 插件多语言切换
在bootstrap中的bootstrap table 插件在多语言切换的审核,只需要如下操作 引入bootstrap-table-locale-all.js文件 $('#Grid').bootstr ...
- A TensorBoard plugin for visualizing arbitrary tensors in a video as your network trains.Beholder是一个TensorBoard插件，用于在模型训练时查看视频帧。
Beholder is a TensorBoard plugin for viewing frames of a video while your model trains. It comes wit ...
- 开发一个shopify插件
开发一个shopify插件,shopify商城可以安装该插件:当用户在商城下单后,插件把订单数据按照指定格式传给disruptsports服务器: https://help.shopify. ...
随机推荐
- sed实践
后来也找到一篇文章讲的很详细: http://www.cnblogs.com/ctaixw/p/5860221.html --------------------------------------- ...
- CentOS7 安装 chrome-gnome-shell
1.download https://gitlab.gnome.org/GNOME/chrome-gnome-shell 2.安装cmake和jq yum install -y cmake yum i ...
- OOD沉思录 --- 导引
一个对象一定会有如下4个属性: 1,它的身份标示,可能只是它在内存中的地址; 2,它的类的属性(通常是静态属性)和这些属性的值(通常是动态的); 3,它的类的行为(从实现者的角度看); 3,它的公开接 ...
- 洛谷P1403 [AHOI2005] 约数研究 [数论分块]
题目传送门 约数研究 题目描述 科学家们在Samuel星球上的探险得到了丰富的能源储备,这使得空间站中大型计算机“Samuel II”的长时间运算成为了可能.由于在去年一年的辛苦工作取得了不错的成绩, ...
- Django+Nginx+uwsgi搭建自己的博客（七）
上一篇博客中介绍了Blogs App的部分后端功能的实现,在这篇博客中,将继续为大家介绍Blogs App中前端功能的实现. 首先来看发布博客功能的前端页面.在blogs/templates/blog ...
- AOP的自动代理
Spring的aop机制提供两类方式实现类代理.一种是单个代理,一种是自动代理. 单个代理通过ProxyFactoryBean来实现(就如上面的配置). 自动代理:自动代理能够让切面定义来决定那个be ...
- 【UOJ #105】【APIO2014】Beads and wires
http://uoj.ac/problem/105 好神的dp啊. 确定一个点为根之后,蓝线只能是竖着的,不能横跨兄弟. 枚举每个点为根进行树形dp是\(O(n^2)\)的,\(f(x,0/1)\)表 ...
- 「NOI2017」游戏
「NOI2017」游戏 题目描述 小 L 计划进行 \(n\) 场游戏,每场游戏使用一张地图,小 L 会选择一辆车在该地图上完成游戏. 小 L 的赛车有三辆,分别用大写字母 \(A\).\(B\).\ ...
- [HNOI2008]玩具装箱TOY --- DP + 斜率优化 / 决策单调性
[HNOI2008]玩具装箱TOY 题目描述: P教授要去看奥运,但是他舍不下他的玩具,于是他决定把所有的玩具运到北京. 他使用自己的压缩器进行压缩,其可以将任意物品变成一堆,再放到一种特殊的一维容器 ...
- 2017-2018-1 JAVA实验站 冲刺 day04
2017-2018-1 JAVA实验站 冲刺 day04 各个成员今日完成的任务 小组成员 今日工作 完成进度 张韵琪 写博客.进行工作总结 100% 齐力锋 找背景音乐 100% 张浩林 游戏操作说 ...