BootstrapTable refresh 方法使用实例简单介绍


Posted in Javascript onFebruary 20, 2017

本文就bootstrapTable refresh 方法如何传递参数做简单举例说明。下面代码中,一个table,一个button,单击button会触发刷新表格操作。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../libs/bootstrap-table-v1.11.0/bootstrap.min.css" rel="external nofollow" >
<link rel="stylesheet" href="../libs/bootstrap-table-v1.11.0/bootstrap-table.css" rel="external nofollow" >
<script src="../libs/jQuery/jquery-1.8.3.min.js"></script>
<script src="../libs/bootstrap-table-v1.11.0/bootstrap.min.js"></script>
<script src="../libs/bootstrap-table-v1.11.0/bootstrap-table.js"></script>
<script src="../libs/bootstrap-table-v1.11.0/bootstrap-table-zh-CN.js"></script>
</head>
<body>
<table id="item_table"></table>
<button id=refresh_button type="button">刷新</button>
<script>
$('#item_table').bootstrapTable({
  columns: [{
    field: 'id',
    title: 'Item ID'
  }, {
    field: 'name',
    title: 'Item Name'
  }, {
    field: 'price',
    title: 'Item Price'
  }],
  data: [{
    id: 1,
    name: 'Item 1',
    price: '$1'
  }, {
    id: 2,
    name: 'Item 2',
    price: '$2'
  }]
});
$("#refresh_button").click(function (){
  var opt = {
    url: "http://local/api/data/?format=json",
    silent: true,
    query:{
      type:1,
      level:2
    }
  };
  $("#item_table").bootstrapTable('refresh', opt);
});
</script>
</body>
</html>

refresh发出的请求url为

“http://local/api/data/?format=json&type=1&level=2”

以上所述是小编给大家介绍的BootstrapTable refresh 方法使用实例简单介绍,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery下利用jsonp跨域访问实现方法
Jul 29 Javascript
jquery 表格排序、实时搜索表格内容(附图)
May 19 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
Sep 09 Javascript
javascript正则表达式模糊匹配IP地址功能示例
Jan 06 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
Jan 20 Javascript
javascript 正则表达式分组、断言详解
Apr 20 Javascript
highcharts 在angular中的使用示例代码
Sep 20 Javascript
使用store来优化React组件的方法
Oct 23 Javascript
微信小程序实现带缩略图轮播效果
Nov 04 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
Mar 07 Javascript
实现一个Vue自定义指令懒加载的方法示例
Jun 04 Javascript
如何理解Vue简单状态管理之store模式
May 15 Vue.js
Bootstrap table 定制提示语的加载过程
Feb 20 #Javascript
bootstrapValidator 重新启用提交按钮的方法
Feb 20 #Javascript
原生js实现轮播图的示例代码
Feb 20 #Javascript
深入理解Javascript中的观察者模式
Feb 20 #Javascript
浅谈js中function的参数默认值
Feb 20 #Javascript
angularJS+requireJS实现controller及directive的按需加载示例
Feb 20 #Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
Feb 19 #Javascript
You might like
浅析Yii2 GridView 日期格式化并实现日期可搜索教程
2016/04/22 PHP
Yii框架分页实现方法详解
2017/05/20 PHP
PHP 爬取网页的主要方法
2018/07/13 PHP
Extjs改变树节点的勾选状态点击按钮将复选框去掉
2013/11/14 Javascript
javascript中数组的冒泡排序使用示例
2013/12/18 Javascript
用Jquery选择器计算table中的某一列某一行的合计
2014/08/13 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
2016/12/27 Javascript
值得收藏的vuejs安装教程
2017/11/21 Javascript
Webpack的dll功能使用
2018/06/28 Javascript
vue和better-scroll实现列表左右联动效果详解
2019/04/29 Javascript
redux.js详解及基本使用
2019/05/24 Javascript
[01:16:37]【全国守擂赛】第三周决赛 Dark Knight vs. 一个弱队
2020/05/04 DOTA
python中利用Future对象回调别的函数示例代码
2017/09/07 Python
python八皇后问题的解决方法
2018/09/27 Python
Python log模块logging记录打印用法解析
2020/01/20 Python
基于python 等频分箱qcut问题的解决
2020/03/03 Python
PyTorch在Windows环境搭建的方法步骤
2020/05/12 Python
浅谈Python中的模块
2020/06/10 Python
Python根据字典的值查询出对应的键的方法
2020/09/30 Python
德国BA保镖药房中文网:Bodyguard Apotheke
2021/03/09 全球购物
土木工程实习生自我鉴定
2013/09/19 职场文书
机电专业个人自荐信格式模板
2013/09/23 职场文书
大学生文员专业个人求职信范文
2014/01/05 职场文书
行政办公室岗位职责
2014/03/18 职场文书
教师中国梦演讲稿
2014/04/23 职场文书
运动会演讲稿
2014/05/07 职场文书
护士找工作求职信
2014/07/02 职场文书
出国签证在职证明
2014/09/20 职场文书
2015年试用期工作总结
2014/12/12 职场文书
讲文明倡议书
2015/04/29 职场文书
电影开国大典观后感
2015/06/04 职场文书
婚庆主持词大全
2015/06/30 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
MySQL数字类型自增的坑
2021/05/07 MySQL
详解Java分布式事务的 6 种解决方案
2021/06/26 Java/Android
Java实现注册登录跳转
2022/06/16 Java/Android