一个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. ...
随机推荐
- int类中的方法(二）
25.__pos__(self,*args,**kwargs) def __pos__(self, *args, **kwargs): # real signature unknown &qu ...
- vim 图册
网上看到的一些图,感觉不错,分享一下 我现在感觉配置文件,很多没有必要,反而很花哨,但是这些基础的东西,反而很高效,实在 VIM的列编辑操作 删除列 1.光标定位到要操作的地方. 2.CTRL+v 进 ...
- react + redux 实现幻灯片
写在前面: 这一篇是我 使用scss + react + webpack + es6实现幻灯片 的进阶篇,效果请点我,将会使用上redux的基础用法,因为一开始没有理解好redux的用法,单纯看文档, ...
- XML和HTML的区别
1.很多新手程序员总是会问HTML和XML有什么区别,接下来就解释一下: 什么是XML? XML 指可扩展标记语言(EXtensible Markup Language). XML 是一种很像HTML ...
- 洛谷P3435 [POI2006]OKR-Period of Words [KMP]
洛谷传送门,BZOJ传送门 OKR-Period of Words Description 一个串是有限个小写字符的序列,特别的,一个空序列也可以是一个串. 一个串P是串A的前缀, 当且仅当存在串B, ...
- Django+Nginx+uwsgi搭建自己的博客（三）
(本来打算在这篇博文中介绍Users App的前端部分的,但写着写着就发现还需要铺垫很多东西才能把整个项目串的比较流畅些,因此这篇就继续介绍了后端的一些东西,前端的部分只好跳票到下一篇了-) 在上一篇 ...
- zTree通过指定ID找到节点并选中
zTree = $.fn.zTree.getZTreeObj("treeDemo");//treeDemo界面中加载ztree的div var node = zTree.getNo ...
- 创建操作表(UIActionSheet)
UIActionSheet用来创建一个操作表,它的初始化代码如下: - (IBAction)testActionSheet:(id)sender { UIActionSheet *actionShee ...
- 矩阵&行列式
# 代数 排列 对换,对于一个排列操作,对于一个偶排列一次对换之后变为奇排列 反之变为偶排列 行列式 N阶行列式室友N^2个数aij(i,j = 1,2,3,...n) 行列式的数=\(\sum_ { ...
- [BZOJ3140][HNOI2013]消毒(二分图最小点覆盖)
3140: [Hnoi2013]消毒 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 1621 Solved: 676[Submit][Status] ...