一个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>&nbsp;<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>&nbsp;'+
                                         '<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