Refresh from url after use data option

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Refresh from url after use data option</title>
  5. <meta charset="utf-8">
  6. <link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
  7. <link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
  8. <link rel="stylesheet" href="../assets/examples.css">
  9. <script src="../assets/jquery.min.js"></script>
  10. <script src="../assets/bootstrap/js/bootstrap.min.js"></script>
  11. <script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
  12. <script src="../ga.js"></script>
  13. </head>
  14. <body>
  15. <div class="container">
  16. <h1>Refresh from url after use data option(<a href="https://github.com/wenzhixin/bootstrap-table/issues/137" target="_blank">#137</a>).</h1>
  17. <p><button id="button" class="btn btn-default">Refresh from url</button></p>
  18. <table id="table">
  19. <thead>
  20. <tr>
  21. <th data-field="id">ID</th>
  22. <th data-field="name">Item Name</th>
  23. <th data-field="price">Item Price</th>
  24. </tr>
  25. </thead>
  26. </table>
  27. </div>
  28. <script>
  29. var $table = $('#table');
  30. $(function () {
  31. $table.bootstrapTable({
  32. data: [{
  33. "id": 0,
  34. "name": "Item 0",
  35. "price": "$0"
  36. }]
  37. });
  38. $('#button').click(function () {
  39. $table.bootstrapTable('refresh', {url: '../json/data1.json'});
  40. });
  41. });
  42. </script>
  43. </body>
  44. </html>

效果图：

点击按钮后，table表格数据变化如下：

转自：

http://issues.wenzhixin.net.cn/bootstrap-table/#issues/137.html

源码

https://github.com/wenzhixin/bootstrap-table-examples/blob/master/issues/137.html

例子们：

http://bootstrap-table.wenzhixin.net.cn/examples/

Bootstrap Table 查询（服务器端）、刷新数据的更多相关文章

  1. bootstrap table分页，重新数据查询时页码为当前页问题

    问题描述: 使用bootstrap table时遇到一个小问题,第一次查询数据未5页,翻页到第5页后,选中条件再次查询数据时,传到后端页码仍旧为5,而此时数据量小于5页,表格显示为未查询到数据. 处理 ...

  2. 关于如何解决bootstrap table 列 切换 刷新 高度不一样

    在使用bootstrap table时候,碰到bootstrap table 列 切换 刷新 高度不一样的问题,如图所示: 解决这个问题很简单,在你的页头加一句<!DOCTYPE html> ...

  3. [转]手把手教你--Bootstrap Table表格插件及数据导出(可导出Excel2003及Exce2007)

    原文地址:https://blog.csdn.net/javayoucome/article/details/80081771 1.介绍 Bootstrap Table介绍见官网:http://boo ...

  4. bootstrap table 主子表 局部数据刷新（刷新子表）

    1.主表中设置data-detail-view="true",启用主子表模式: <table class="table table-striped" wi ...

  5. Bootstrap Table 从新InsertRow 刷新表格 数据的问题处理方案

    1.第一步获取数据源 var rows = { //要插入的数据,这里要和table列名一致SkuCode: data.rows[i].SkuCode,BarCode: data.rows[i].Ba ...

  6. 关于用bootstrap显示查询的后台数据

    PrintWriter pw = response.getWriter(); pw.println(sb); pw.flush(); 由于用bootstrap查询数据,页面需要自身返回bootstra ...

  7. bootstrap table分页后刷新跳到第一页

    之前这样写是不行的,这时候页数还是原来的页数 $('#tb_departments').bootstrapTable(('refresh')); 需要改成: $("#tb_departmen ...

  8. django：bootstrap table加载django返回的数据

    bootstrap table加载表格数据有两类方式: 一种通过data属性的方式配置,一种是javascipt方式配置 这里看js配置方式: 1.当数据源为.json文件时 url参数写上json文 ...

  9. Bootstrap分页插件ajax返回数据，工具类的编写

    使用Bootstrap分页插件时,需要返回指定的参数,这样Bootstrap才能够识别 需要引入的css: <!-- boostrap table --> <link href=&q ...

随机推荐

  1. spring-boot项目MapperScan注解包含多个包

    单个包 @MapperScan("com.mysiteforme.admin.dao") 多个包 @MapperScan({"com.mysiteforme.admin. ...

  2. SharePoint 2013 App 开发—SharePoint Hosted方式，

    这篇文章会依据简单的Demo,介绍一下SharePoint Hosted 方式开发App 的步骤和说明. 这种方式的环境相比较Office 365 要麻烦一些,如果不可以连接到Internet 或者还 ...

  3. Linux--内核Uevent事件机制 与 Input子系统【转】

    转自:http://blog.csdn.net/lxl584685501/article/details/46379453 [-] 一Uevent机制 Uevent在kernel中的位置 Uevent ...

  4. MYSQL无法连接，提示10055错误尝试解决

    解决方法:(以下内容为本人亲自实践原创)总结一下,应该是连接数的问题,那么服务器上有些什么连接数:1.IIS网站服务器中各个网站中有“连接超时时间”,“会话超时时间”:2.其它程序占用的服务器连接数( ...

  5. AC日记——拍照 洛谷 P3410

    题目描述 小B有n个下属,现小B要带着一些下属让别人拍照. 有m个人,每个人都愿意付给小B一定钱让n个人中的一些人进行合影.如果这一些人没带齐那么就不能拍照,小B也不会得到钱. 注意:带下属不是白带的 ...

  6. 关于TS返回　Can't use function return value in write context 问题

    在项目开发过程中,出现某一接口文件间歇性出现500错误,间歇性出现说明是有条件才会产生,查看错误日志显示:Fatal error: Can't use function return value in ...

  7. django中表变更后migrate无效的问题

    问题描述: 已有的model,修改之后,想重新建模,于是将migrations文件夹中除__init__.py之外其他文件都删掉,再次执行以下步骤python manage.py makemigrat ...

  8. React native 横滑效果

    import { Component } from 'react'; import { StyleSheet, View, Text, TouchableOpacity, ScrollView, Di ...

  9. Codeforces Gym101606 D.Deranging Hat (2017 United Kingdom and Ireland Programming Contest (UKIEPC 2017))

    D Deranging Hat 这个题简直了,本来想的是冒泡排序然后逆着输出来的,后来发现不对,因为题目上求的是最优解,而且冒泡的话,输出结果有的超出10000行了,所以就是把一开始的,排好序的字母标 ...

  10. ASP.NET HttpContext类

      IHttpHandler 接口 定义 ASP.NET 以异步方式处理使用自定义 HTTP 处理程序的 HTTP Web 请求而实现的协定 封装http请求信息 HttpContext.Curren ...