使用bootstrap-table显示数据,后台传回数据以后,可能需要对其做调整,如需要前端为数据添加单位

调整数据代码

$("#"+tableId).bootstrapTable({
dataType: "json",
method: 'get',
contentType: "application/x-www-form-urlencoded",
cache: false,
url:url,
sortName:sortName, //排序列名
sortOrder: sortOrder,//排位命令(desc,asc)
queryParams: queryParams,
columns:columns,
pagination:true,
sidePagination:'server',
pageNumber:1,
pageSize:10,
pageList:[10],
onLoadSuccess:function(data){
//通过对data判断
if("rate" in data["rows"][0]){
var result = data["rows"];
$.each(result,function(index,content){
content["rate"] =content["rate"]+"%";ze5year"] =content["authorize5year"]+"%";
})
$("#"+tableId).bootstrapTable("load",data)
}
},

代码的解释

数据通过onLoadSuccess返回,此时数据已经渲染到页面中,这里将返回的数据对应的列中加上相应的单位(“%”)之后,使用

$("#"+tableId).bootstrapTable("load",data)重新加载到表格中,数据即得以改变

bootstrap-table前端修改数据的更多相关文章

  1. 【转】bootstrap table轻松实现数据表格

    在使用bootstrap table时可能在很多时候回用的表格来显示数据,如果自己写那肯定没问题,但是数据展示出来就麻烦多了,然而bootstrap table 封装了一套完善的数据表格组件,把从后台 ...

  2. Bootstrap table前端分页(ssm版)

    说明bootstrap table可以前端分页,也可以后端sql用limit分页.前端分页下性能和意义都不大,故一般情况下不用这种,请看我的另一篇后端分页的博客源码下载地址:https://git.o ...

  3. bootstrap table 前端搜索

    1.bootstrap-table对于前端的搜索可以通过官网设置,但发现前端搜索出现bug,网上找到一个bootstrap-table的扩充js  bootstrap-table-mytoolbar. ...

  4. MVC bootstrap 实现 bootstrap table 左右传递数据

    源码: @{ ViewBag.Title = "Index"; } @using BC.Platform.UPMS.Models; <!DOCTYPE html> &l ...

  5. bootstrap table加载数据

    //html <table id="dailyDevTable"></table> //js $(function () { initTable(); }) ...

  6. bootstrap table通过ajax获取后台数据展示在table

    1. 背景 bootstrap table 默认向后台发送语法的dataType为 json,但是为了解决跨域问题我们需要将dataType改为jsonp,这时就需要修改bootstrap table ...

  7. bootstrap table 的searchParam参数传递

    bootstrap table 的searchParam自定义参数传递 Bootstrap Table返回的数据为value 和 rows Long total代表的是多少条(总数)  List< ...

  8. [前端插件]Bootstrap Table服务器分页与在线编辑应用总结

    先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据 ...

  9. bootstrap table 获取数据后的前台页面(后台怎么传就不必详细说明了吧)

    <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ t ...

随机推荐

  1. BZOJ3881[Coci2015]Divljak——AC自动机+树状数组+LCA+dfs序+树链的并

    题目描述 Alice有n个字符串S_1,S_2...S_n,Bob有一个字符串集合T,一开始集合是空的. 接下来会发生q个操作,操作有两种形式: “1 P”,Bob往自己的集合里添加了一个字符串P. ...

  2. hdu 3949 XOR (线性基)

    链接: http://acm.hdu.edu.cn/showproblem.php?pid=3949 题意: 给出n个数,从中任意取几个数字异或,求第k小的异或和 思路: 线性基求第k小异或和,因为题 ...

  3. MT【66]寻找对称中心

    设函数$f(x)=2x-cosx,{a_n}$是公差为$\frac{\pi}{8}$的等差数列,$f(a_1)+f(a_2)+f(a_3)+f(a_4)+f(a_5)=5\pi$,则 $[f(a_3) ...

  4. 洛谷P4035 [JSOI2008]球形空间产生器(高斯消元)

    洛谷题目传送门 球啊球 @xzz_233 qaq 高斯消元模板题,关键在于将已知条件转化为方程组. 可以发现题目要求的未知量有\(n\)个,题目却给了我们\(n+1\)个点的坐标,这其中必有玄机. 由 ...

  5. 洛谷 P2680 运输计划 解题报告

    P2680 运输计划 题目背景 公元2044年,人类进入了宇宙纪元. 题目描述 公元2044年,人类进入了宇宙纪元. \(L\)国有\(n\)个星球,还有\(n-1\)条双向航道,每条航道建立在两个星 ...

  6. luogu2827 [NOIp2016]蚯蚓 (模拟)

    可以直观地想到用优先队列来做,但数据范围是O(n)的 然后我们发现,因为我们每次挑出来的蚯蚓是单调的,所以把每个切成两段后,那两段也是对应单调的 也就是说,算上最一开始的蚯蚓,我们一共维护三个队列,三 ...

  7. CF401D Roman and Numbers

    题意: 将n(n<=10^18)的各位数字重新排列(不允许有前导零) 求 可以构造几个mod m等于0的数字 分析: 状态压缩 状态: 设f[s][k]表示对于选择数字组合的s来说,%m等于k的 ...

  8. [ZJOI2007]矩阵游戏——非常漂亮的二分图转化

    题意: 小 Q 是一个非常聪明的孩子,除了国际象棋,他还很喜欢玩一个电脑益智游戏――矩阵游戏.矩阵游戏在一个 N×N 黑白方阵进行(如同国际象棋一般,只是颜色是随意的).每次可以对该矩阵进行两种操作: ...

  9. babel与ES6环境的搭建

    我们知道浏览器环境下直接运行ES6是存在一些兼容性问题的.那么把ES6变成ES5不就行了吗? 那如何将ES6转换成ES5呢?我们来搭建它的转换环境吧~ 第一步:初始化项目,建立写注意事项的README ...

  10. plot与legend画图与图例

    画图与图例: legend(x, y = NULL, legend, fill = NULL, col = par("col"), border = "black&quo ...