bootstrapTable+ajax加载数据 refresh更新数据
作者:zbgahj 时间:2023-10-18 13:21:13
本文实例为大家分享了bootstrapTable+ajax加载数据,和refresh更新数据两部分,供大家参考,具体内容如下
1.html
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="calendar" class="col-sm-1 control-label">日期</label>
<div class="col-sm-3">
<input type="text" id="calendar" class="form-control" value="2018-06-13" class="form-control">
</div>
</div>
<div class="form-group">
<label for="types" class="col-sm-1 control-label">时间类别</label>
<div class="col-sm-3">
<select name="" id="types" class="form-control">
<option value="week">week</option>
<option value="month">month</option>
<option value="sixmonth">sixmonth</option>
</select>
</div>
</div>
</form>
<div class="tableDisplay" id="dataTable">
<table class="table table-bordered" width="100%" style="margin-bottom:0px;" data-height="460">
</table>
</div>
2.js
<script>
//日期时间格式化20180613
function dateFormat(time){
//time = 2018-06-13;
var splitArr = time.split('-'),
newStr = splitArr.join('');
return newStr;
}
$(document).ready(function() {
//启动日期插件
$('#calendar').datetimepicker({
language: 'zh-CN',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0
});
//日期改变时刷新table;
$('#calendar').on('changeDate', function(ev){
$dataTableHot.bootstrapTable('refresh');
});
var type=$("#types option:selected").val();
$("#types").change(function(){
type = $("#types option:selected").val();
$dataTableHot.bootstrapTable('refresh');
})
var $dataTableHot = $("#dataTable table").bootstrapTable({
search: false,
pagination: true,
pageSize: 15,
pageList: [5, 10, 15, 20],
showColumns: true,
showRefresh: false,
locale: "zh-CN",
striped: true,
toggle:true,
ajax:function(request) {
$.ajax({
url:"http://127.0.0.1:8080/getdata",
type:"GET",
dataType:"json",
data:{
date:dateFormat($("#calendar").val()), //dateFormat($("#calendar").val())
type:type,
value:"hot",
order:"asc"
},
success:function(data){
request.success({
row : data
});
$('#dataTable table').bootstrapTable('load', data);
},
error:function(error){
console.log(error);
}
})
},
columns:[{
field: "projectId",
title:"projectId"
},{
field: "projectName",
title:"projectName"
}, {
field: "value",
title:"value"
}]
});
});
</script>
3.刷新表格
$dataTableHot.bootstrapTable('refresh);
4.bootstrap-datatimepick日期时间插件,日期changeDate事件
$("#canlendar").on('changeDate',function(ev){ ... });
5.在最后添加"操作"列,实现查看"详情"操作
columns:[...,
{
title:"操作",
events:{ //为按钮添加事件
"click #details":function(e,value,row,index){
alert("项目名称:"+row.projectName);
}
},
formatter:function(value,row,index){ //把需要创建的按钮封装在函数中
return "<button class='btn btn-default' id="details">详情</button>"
}
}
]
来源:https://blog.csdn.net/baidu_23054223/article/details/80830789
标签:bootstraptable,ajax,refresh
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
天极产品设计流程
2007-10-11 18:47:00
![](https://img.aspxhome.com/file/UploadPic/200710/11/20071011184910229s.jpg)
一个js自动完成功能源码
2011-06-06 07:42:00
python 算法题——快乐数的多种解法
2021-12-25 06:32:43
用Javascript正则表达式验证Email地址
2009-12-09 15:56:00
使用Python实现批量ping操作方法
2021-04-06 02:55:34
vue项目中在可编辑div光标位置插入内容的实现代码
2024-05-28 15:55:45
SQL Server附加数据库时出现错误的处理方法
2024-01-20 19:57:58
![](https://img.aspxhome.com/file/2023/3/110983_0s.jpg)
mysql中in条件使用字符串方式
2024-01-28 02:24:55
MySQL(win7x64 5.7.16版本)下载、安装、配置与使用的详细图文教程
2024-01-27 01:12:32
![](https://img.aspxhome.com/file/2023/0/124520_0s.png)
Python把csv数据写入list和字典类型的变量脚本方法
2021-05-27 22:04:20
Go语言copy()实现切片复制
2024-05-25 15:12:43
详细解读Python字符串的使用与f-string
2023-06-29 07:24:21
使用PHP获取网络文件的实现代码
2023-09-09 08:41:53
CentOS7安装Python3的教程详解
2023-10-17 02:40:28
Python利用scapy实现ARP欺骗的方法
2021-07-24 08:26:03
![](https://img.aspxhome.com/file/2023/4/133674_0s.jpg)
深入理解Python中range和xrange的区别
2023-06-22 06:10:09
python如何创建TCP服务端和客户端
2021-05-20 04:52:52
python em算法的实现
2021-09-18 11:45:30
Python利用flask sqlalchemy实现分页效果
2023-10-05 16:36:21
![](https://img.aspxhome.com/file/2023/5/86185_0s.jpg)
Linux环境下安装mysql5.7.36数据库教程
2024-01-19 15:42:02
![](https://img.aspxhome.com/file/2023/3/85803_0s.jpg)