一个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. ...
随机推荐
- tensorflow运行出现错误 ： ImportError: Could not find 'cudart64_90.dll'.
安装 tensorflow-gpu 版本后,需要安装相应的 CUDA 和 cuDNN 注意版本问题:tensorflow-gpu 1.7以及之后的版本要安装 CUDA 8.0 以上的版本,tf 1.7 ...
- sed实践
后来也找到一篇文章讲的很详细: http://www.cnblogs.com/ctaixw/p/5860221.html --------------------------------------- ...
- js 正则验证多个邮箱，用；隔开的那种
var r = /^((([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6}\;))*(([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\. ...
- centos7-硬盘坏道检测
#检测坏道命令,结果输出到 /home/badblocks.log badblock -s -v -o /home/badblocks.log /dev/sdb1 [注]:硬盘损坏程度不同,block ...
- Unity Shader基础
Unity Shader基础 先上代码,代码一般是这样的. void Initialization(){ //先从硬盘加载代码再加载到GPU中 string vertexShaderCode = Lo ...
- java8新特性——Stream API
Java8中有两大最为重要得改变,其一时Lambda表达式,另外就是 Stream API了.在前面几篇中简单学习了Lambda表达式得语法,以及函数式接口.本文就来简单学习一下Stream API( ...
- 我的OI生涯 第六章
开学了,但是我们并没有像一个正常的高二学生一样坐在教室里接受调研考试的洗礼. 暑假作业这种东西早已被甩在一旁,可以想象回去补文化课时该有多么狼狈. 大王给我们制定了周密的计划,每周两次测试,加上蔡老师 ...
- 【筛法求素数】【推导】【组合数】UVALive - 7642 - Prime Distance
题意:n个格子,m个球,让你把球放入某些格子里,使得所有有球的格子之间的距离(abs(i-j))均为素数 ,让你输出方案数. 只占一个格子或者两个格子显然可行. 占有三个格子的情况下,则必须保证其中两 ...
- [BZOJ5028]小Z的加油店
[BZOJ5028]小Z的加油店 题目大意: 一个长度为\(n(n\le10^5)\)的数列,\(m(m\le10^5)\)次操作,支持区间加和区间\(\gcd\). 思路: 线段树维护差分,\(\g ...
- URAL 1992 CVS
CVS 题目连接: http://acm.timus.ru/problem.aspx?space=1&num=1992 Description Yoda: Visit I will the c ...