一个table插件，用于bootstrap开发
最近项目中改用bootstrap，可以给的通用table，写的有点死，id名称是固定的，那一个页面两个table如何做呢？
ok，模仿着别人的代码，写了一个，整体代码如下：
1 ; 2 (function(factory) { 3 if (typeof define === 'function' && define.amd) { 4 // AMD. Register as anonymous module. 5 define([ 'jquery' ], factory); 6 } else if (typeof exports === 'object') { 7 // Node / CommonJS 8 factory(require('jquery')); 9 } else { 10 // Browser globals. 11 factory(jQuery); 12 } 13 }) 14 (function($) { 15 'use strict'; 16 17 function isNumber(n) { 18 return typeof n === 'number'; 19 } 20 21 function toArray(obj, offset) { 22 var args = []; 23 24 if (isNumber(offset)) { // It's necessary for IE8 25 args.push(offset); 26 } 27 28 return args.slice.apply(obj, args); 29 } 30 31 function isUndefined(n) { 32 return typeof n === 'undefined'; 33 } 34 35 function BiaoGe(element, options) { 36 this.$table = element, 37 this.options = $.extend({}, BiaoGe.DEFAULTS, options), 38 this.page_size = 10, 39 this.page_num = 1, 40 this.loadingTrHtml = '<tr><td colspan="100" class="loading100"><i class="fa fa-spinner fa-spin fa-2x"></i> <span>正在加载，请稍后...</span></td></tr>'; 41 this.emptyTrHtml = '<tr><td colspan="100" class="loading100"><span>没有您要搜索的内容</span></td></tr>'; 42 this.load(); 43 } 44 ; 45 46 BiaoGe.DEFAULTS = { 47 columns : [], 48 pageSizes : [ 10, 25, 50, 100 ] 49 }; 50 51 BiaoGe.prototype = { 52 constructor : BiaoGe, 53 54 load : function() { 55 this.initHead(); 56 this.initBody(); 57 this.initPager(); 58 this.loadData(); 59 this.addListener(); 60 }, 61 62 initHead : function() { 63 var options = this.options; 64 if (options.columns.length > 0) { 65 var theadHtml = '<thead><tr>'; 66 for (var i = 0; i < options.columns.length; i++) { 67 var col = options.columns[i]; 68 theadHtml += '<th'; 69 if (col.width) 70 theadHtml += ' width="' + col.width + '"'; 71 if (col.align) 72 theadHtml += ' class="text-' + col.align + '"'; 73 theadHtml += '>' + col.title + '</th>'; 74 } 75 theadHtml += '</tr></thead>'; 76 $(theadHtml).appendTo(this.$table); 77 } 78 }, 79 80 initBody : function() { 81 this.$tbody = $('<tbody></tbody>'); 82 this.$tbody.appendTo(this.$table); 83 this.emptyLoading(); 84 }, 85 86 emptyLoading : function() { 87 this.$tbody.html(this.loadingTrHtml); 88 }, 89 90 initPager : function() { 91 this.$table_pager = $('<div></div>'); 92 var $table_parent = $($(this.$table).parent().get(0)); 93 if($table_parent.hasClass("table-responsive")){ 94 this.$table_pager.insertAfter($table_parent); 95 } 96 else{ 97 this.$table_pager.insertAfter(this.$table); 98 } 99 this.$table_pager.addClass('table-pager'); 100 101 this.initPageSize(); 102 this.initPageNum(); 103 }, 104 105 initPageSize : function() { 106 var $group_page_size = $('<div></div>'); 107 $group_page_size.appendTo(this.$table_pager); 108 $group_page_size.addClass('input-group pager-size'); 109 110 var $span = $('<span >显示</span>'); 111 $span.appendTo($group_page_size); 112 $span.addClass('input-group-addon'); 113 114 this.$page_size = $('<select></select>'); 115 this.$page_size.appendTo($group_page_size); 116 this.$page_size.addClass('form-control input-sm'); 117 var options = ''; 118 for (var i = 0; i < this.options.pageSizes.length; i++) { 119 var size = this.options.pageSizes[i]; 120 options += '<option value="' + size + '">' + size 121 + '</option>'; 122 } 123 this.$page_size.html(options); 124 this.page_size = this.$page_size.val(); 125 126 $span = $('<span >条 共</span>'); 127 $span.appendTo($group_page_size); 128 $span.addClass('input-group-addon'); 129 130 this.$record_total = $('<strong>0</strong>'); 131 this.$record_total.appendTo($span); 132 133 $span.append('条'); 134 }, 135 136 initPageNum : function() { 137 var $group_page_num = $('<div></div>'); 138 $group_page_num.appendTo(this.$table_pager); 139 $group_page_num.addClass('input-group pager-num'); 140 141 var $span = $('<span >第</span>'); 142 $span.appendTo($group_page_num); 143 $span.addClass('input-group-addon'); 144 145 this.$page_num = $('<select></select>'); 146 this.$page_num.appendTo($group_page_num); 147 this.$page_num.addClass('form-control input-sm'); 148 var options = '<option value="1">1</option>'; 149 this.$page_num.html(options); 150 151 $span = $('<span >页</span>'); 152 $span.appendTo($group_page_num); 153 $span.addClass('input-group-addon'); 154 }, 155 156 addListener : function() { 157 this.$page_size.on("change", $.proxy(this.pageSizeChange, 158 this)); 159 this.$page_num.on("change", $.proxy(this.pageNumChange, 160 this)); 161 }, 162 163 pageSizeChange : function() { 164 this.page_size = this.$page_size.val(); 165 this.page_num = 1; 166 this.loadData(); 167 }, 168 169 pageNumChange : function() { 170 this.page_num = this.$page_num.val(); 171 this.loadData(); 172 }, 173 174 loadData : function() { 175 if (this.options.loadData 176 && typeof this.options.loadData === 'function') { 177 this.options.loadData(this.page_num, this.page_size, $ 178 .proxy(this.initData, this)); 179 } 180 }, 181 182 refreshData : function(){ 183 this.emptyLoading(); 184 this.loadData(); 185 }, 186 187 reloadData : function(){ 188 this.emptyLoading(); 189 this.page_num = 1; 190 this.loadData(); 191 }, 192 193 initData : function(data) { 194 var options = this.options; 195 var tbodyHtml = ''; 196 if (data && data.rows) { 197 for (var c = 0; c < data.rows.length; c++) { 198 tbodyHtml += '<tr>'; 199 for (var i = 0; i < options.columns.length; i++) { 200 tbodyHtml += this.initTd(options.columns[i], 201 data.rows[c], c); 202 } 203 tbodyHtml += '</tr>'; 204 } 205 } 206 if(tbodyHtml.isNullOrEmpty()) 207 tbodyHtml = this.emptyTrHtml; 208 this.$tbody.data('d',data); 209 this.$tbody.html(tbodyHtml); 210 this.setPager(data.total); 211 }, 212 213 initTd : function(col, row, c) { 214 var tdHtml = '<td'; 215 if (col.width) 216 tdHtml += ' width="' + col.width + '"'; 217 var tdclass = ''; 218 if (col.align) 219 tdclass += 'text-' + col.align; 220 if (col.td_class) 221 tdclass += ' ' + col.td_class; 222 if(tdclass.length > 0) 223 tdHtml += ' class="'+tdclass+'"'; 224 tdHtml += '>'; 225 if (col.field) { 226 var value = ''; 227 if(row[col.field] != null && row[col.field] != '') 228 value = row[col.field]; 229 230 if (col.formatter 231 && typeof col.formatter === 'function') { 232 tdHtml += col.formatter(value, row, c); 233 } else if (col.maxLength) { 234 var content = value; 235 if (content.length > col.maxLength) 236 content = content.substring(0, col.maxLength); 237 tdHtml += '<div title="' + value + '">' + content 238 + '</div>'; 239 } else { 240 tdHtml += value; 241 } 242 } else { 243 tdHtml += ((this.page_size * (this.page_num - 1)) + c + 1); 244 } 245 tdHtml += '</td>'; 246 return tdHtml; 247 }, 248 249 setPager : function(total) { 250 this.$record_total.html(total); 251 var pages = Math.ceil(total / this.page_size); 252 var options = ""; 253 for (var i = 1; i <= pages; i++) { 254 options += '<option value="' + i + '" ' + ((i==this.page_num)?'selected="selected"':'') + '>' + i 255 + '</option>'; 256 } 257 this.$page_num.html(options); 258 }, 259 260 getRowData : function(index){ 261 var data = this.$tbody.data('d'); 262 if (data && data.rows){ 263 return data.rows[index]; 264 } 265 else 266 return null; 267 } 268 }; 269 270 $.fn.BiaoGe = function(options) { 271 var args = toArray(arguments, 1), 272 result; 273 274 this.each(function() { 275 var $this = $(this), 276 data = $this.data('BiaoGe'), 277 fn; 278 279 if (!data) { 280 $this.data('BiaoGe', (data = new BiaoGe(this, 281 options))); 282 } 283 284 if (typeof options === 'string' 285 && $.isFunction((fn = data[options]))) { 286 result = fn.apply(data, args); 287 } 288 }); 289 290 return isUndefined(result) ? this : result; 291 }; 292 });
用法如下：
1.在页面中增加一段table的代码
1 <!-- table --> 2 <div class="table-responsive"> 3 <table id="table_01" class="table table-bordered table-striped table-hover" style="margin-bottom:0px;"> 4 </table> 5 </div>
2.增加脚本
1 function convertDate(value, row, index) { 2 var time; 3 if (value != null && value != '') { 4 var d; 5 if (!isNaN(value)) { 6 d = new Date(value); 7 } else { 8 d = new Date(value.time); 9 } 10 var m = d.getMonth() + 1; 11 var day = d.getDate(); 12 if (parseInt(m) < 10) { 13 m = "0" + m; 14 } 15 if (parseInt(day) < 10) { 16 day = "0" + day; 17 } 18 var hours = d.getHours();// hour 19 if (parseInt(hours) < 10) { 20 hours = "0" + hours; 21 } 22 var mm = d.getMinutes(); 23 if (parseInt(mm) < 10) { 24 mm = "0" + mm; 25 } 26 var ss = d.getSeconds(); 27 if (parseInt(ss) < 10) { 28 ss = "0" + ss; 29 } 30 time = d.getFullYear() + "-" + m + "-" + day + " " + hours 31 + ":" + mm + ":" + ss; 32 } 33 return time; 34 } 35 var cols = [ 36 { 37 title : '序号', 38 width : '5%' 39 },{ 40 field : 'deptCode', 41 title : '医院编码', 42 width : '10%' 43 }, { 44 field : 'deptName', 45 title : '医院名称', 46 width : '50%' 47 },{ 48 field : 'submitTime', 49 title : '创建日期', 50 width : '20%', 51 formatter : convertDate //显示转化方法 52 }, { 53 field : 'id', 54 title : '操作', 55 width : '15%', 56 align : 'center', 57 formatter : function(value, row, index) { 58 return '<a class="btn btn-success btn-sm" href="#" data-toggle="modal" data-target="#editModal" data-whatever="' 59 + value + '" title="修改"><i class="fa fa-edit"></i> 修改</a> '+ 60 '<a class="btn btn-danger btn-sm" role="button" onclick="del_dept(\'' + value + 61 '\')" title="删除"><i class="fa fa-bitbucket"></i> 删除</a>'; 62 } 63 } 64 ]; 65 $("#table_01").BiaoGe({ 66 hasPager : true, 67 columns : cols, 68 loadData : function(pageNum, pageSize, callback) { 69 var data = { 70 //固定参数 71 rows : pageSize, 72 page : pageNum, 73 //自定义参数 74 search : $.trim($("#searchText").val()) 75 }; 76 $.post( 77 "/dept/dataGrid", 78 data, 79 function(data) {// {total:11,rows[{..},{..}]} 80 //console.log(data); 81 callback(data); 82 }, 83 "json" 84 ); 85 } 86 });
这样table就显示出来了
如果，你想要重新加载table，调用相应的方法就ok了，如搜索项变化事件：
1 $("#searchText").on("change", function() { 2 $("#table_01").BiaoGe("reloadData"); 3 });
来张图:
忘了，还有服务端返回的数据 应为：
{total:11,rows[{..},{..}]}
over
