Footable动态初始化和刷新

//初始化
initTable:function(){
								var jsonData = JSON.stringify(this.task);
								var _this = this;
								$.ajax({
									url: '/ssmtest/task/selectAllTasks',
									data: jsonData,
									type: 'POST',
									contentType: 'application/json; charset=UTF-8',
									dataType: 'json',
									success: function(result) {
										if(result.status!=200){
											return false;
										}
										console.log(result.data);
										$.each(result.data, function(index, item) {
											var map = new Map(Object.entries(item));
											var status = _this.getStatus(map.get('status'));
											var operation = '<button id="btnUpdate" type="button" class="btn btn-primary updateTask' + map.get('id') +
												'"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></button>' + '&nbsp;' +
												'<button id="btnDetail" type="button" class="btn btn-warning detailTask' + map.get('id') +
												'"><i class="fa fa-hand-pointer-o" aria-hidden="true"></i></button>';
											var relaTasks = _this.getRelaTasks(map.get('relaTasks'));
											var remarker = _this.getRemarker(map.get('remarker'));	
											var completionTime=_this.getCompletionTime(map.get('completionTime'));
											var row = $('<tr><td>' + map.get('identification') + '</td><td>' + map.get('title') + '</td><td>'+ map.get('startTime') + '</td><td>' + map
												.get('endTime') + '</td><td>' + completionTime+ '</td><td>' + status + '</td><td>' +operation +
												'</td><td>' + map.get('content') + '</td><td>' + remarker + '</td><td>' + relaTasks + '</td></tr>');
											//给编辑按钮事件
											var className1 = 'updateTask' + map.get('id');
											$(document).on('click', '.' + className1, function() {
												// _this.updateTask(item);
												alert('编辑');
											});
											//给查看按钮事件
											var className2 = 'detailTask' + map.get('id');
											$(document).on('click', '.' + className2, function() {
												// _this.detailTask(map.get('id'));
												alert('详情');
											});
											$('.ownTaskTable').append(row);
										});
										$('.ownTaskTable').trigger('footable_initialize');
									}
								});
							},

//刷新
searchTasksByInfo:function(){
								var startRange=$('.startRange').val();
								if(startRange.indexOf('/')!=-1){
									var startArr=startRange.split('/');
									this.task.startFromTime=startArr[0];
									this.task.startToTime=startArr[1];
								}
								var endRange=$('.endRange').val();
								if(startRange.indexOf('/')!=-1){
									var endArr=endRange.split('/');
									this.task.endFromTime=endArr[0];
									this.task.endToTime=endArr[1];
								}
								//设置 开始时间范围必须得小于结束时间范围
								if(!(!this.task.startFromTime||!this.task.endFromTime)){
									var startTime = new Date(Date.parse(this.task.startFromTime.replace(/-/g, '/')));
									var endTime = new Date(Date.parse(this.task.endFromTime.replace(/-/g, '/')));
									if (endTime < startTime) {
										alert('开始时间的开始日期必须小于等于结束时间的开始日期');
										return false;
									}
									
								}
								if(!(!this.task.startToTime||!this.task.endToTime)){
									var startTime = new Date(Date.parse(this.task.startToTime.replace(/-/g, '/')));
									var endTime = new Date(Date.parse(this.task.endToTime.replace(/-/g, '/')));
									if (endTime < startTime) {
										alert('开始时间的结束日期必须小于等于结束时间的结束日期');
										return false;
									}
									
								}
								// alert('here');
								var jsonData = JSON.stringify(this.task);
								var _this = this;
								$.ajax({
									url: '/ssmtest/task/selectAllTasks',
									data: jsonData,
									type: 'POST',
									contentType: 'application/json; charset=UTF-8',
									dataType: 'json',
									success: function(result) {
										if(result.status!=200){
											return false;
										}
										$('.ownTaskTable tbody').empty();
										$.each(result.data, function(index, item) {
											var map = new Map(Object.entries(item));
											var status = _this.getStatus(map.get('status'));
											var operation = '<button id="btnUpdate" type="button" class="btn btn-primary updateTask' + map.get('id') +
												'"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></button>' + '&nbsp;' +
												'<button id="btnDetail" type="button" class="btn btn-warning detailTask' + map.get('id') +
												'"><i class="fa fa-hand-pointer-o" aria-hidden="true"></i></button>';
											var relaTasks = _this.getRelaTasks(map.get('relaTasks'));
											var remarker = _this.getRemarker(map.get('remarker'));	
											var completionTime=_this.getCompletionTime(map.get('completionTime'));
											var row = $('<tr><td>' + map.get('identification') + '</td><td>' + map.get('title') + '</td><td>'+ map.get('startTime') + '</td><td>' + map
												.get('endTime') + '</td><td>' + completionTime+ '</td><td>' + status + '</td><td>' +operation +
												'</td><td>' + map.get('content') + '</td><td>' + remarker + '</td><td>' + relaTasks + '</td></tr>');
											//给编辑按钮事件
											var className1 = 'updateTask' + map.get('id');
											$(document).on('click', '.' + className1, function() {
												// _this.updateTask(item);
												alert('编辑');
											});
											//给查看按钮事件
											var className2 = 'detailTask' + map.get('id');
											$(document).on('click', '.' + className2, function() {
												// _this.detailTask(map.get('id'));
												alert('详情');
											});
											$('.ownTaskTable').append(row);
										});
										$('.ownTaskTable').trigger('footable_redraw');
									}
								});	
								
							},

mounted: function() {
							$('.footable').footable();
							
							//daterangepicker插件初始化
							$('input[name="daterange"]').daterangepicker({
								showDropdowns: true, //年月份下拉框
								autoUpdateInput: false, //关闭自动赋值，使初始值为空
								locale: {
									'format': 'YYYY-MM-DD HH:mm:ss',
									'separator': ' -222 ',
									'applyLabel': '确定',
									'cancelLabel': '取消',
									'fromLabel': '起始时间',
									'toLabel': '结束时间',
									'customRangeLabel': '自定义',
									'weekLabel': 'W',
									'daysOfWeek': ['日', '一', '二', '三', '四', '五', '六'],
									'monthNames': ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
									'firstDay': 1
							
								},
								ranges: {
										'今天': [moment(), moment()],
										'昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
										'上周': [moment().subtract(6, 'days'), moment()],
										'前30天': [moment().subtract(29, 'days'), moment()],
										'本月': [moment().startOf('month'), moment().endOf('month')],
										'上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
									}
							});
							//确定按钮
							$('input[name="daterange"]').on('apply.daterangepicker', function(ev, picker) {
								$(this).val(picker.startDate.format('YYYY-MM-DD') + '/' + picker.endDate.format('YYYY-MM-DD'));
							});
							//取消按钮
							$('input[name="daterange"]').on('cancel.daterangepicker', function(ev, picker) {
								$(this).val('');
							});
							
						},

<table class="footable table table-stripped ownTaskTable" data-page-size="10">
									<thead>
										<tr>
											<th>待办编号</th>
											<th>标题</th>
											<th>开始时间</th>
											<th>结束时间</th>
											<th>完成时间</th>
											<th>状态</th>
											<th>操作</th>
											<th data-hide="phone,tablet">待办内容</th>
											<th data-hide="phone,tablet">备注</th>
											<th data-hide="phone,tablet">关联待办</th>
										</tr>
									</thead>
									<tbody></tbody>
									<tfoot>
										<tr>
											<td colspan="5">
												<ul class="pagination float-right"></ul>
											</td>
										</tr>
									</tfoot>
								</table>