bootstrap-table不分页时对数值类型数据的排序
html中的代码
<table id="table"></table>
sortData.json的数据如下
[
{"name":"三洋","num":"10","pecent":"29%"},
{"name":"松下","num":"9","pecent":"28%"},
{"name":"美的","num":"7","pecent":"20%"},
{"name":"小天鹅","num":"3","pecent":"8%"},
{"name":"飞利浦","num":"12","pecent":"32%"}
]
对应的js代码
$("#table").bootstrapTable({
dataType: "json",
method: 'get',
contentType: "application/x-www-form-urlencoded",
cache: false,
url:"data/sortData.json",
columns:[
{
field: 'name',
title: '品牌名称',
valign:"middle",
align:"center",
sortable:true
},
{
field: 'num',
title: '门店数量',
valign:"middle",
align:"center",
sortable:true,
sorter:numSort
},{
field: 'pecent',
title: '市场份额',
valign:"middle",
align:"center",
sortable:true,
sorter:percentSort
}
]
})
function numSort(a, b) {
return b-a;
}
function percentSort(a, b) {
var value_a = a.substr(0, a.length-1)
var value_b = b.substr(0, b.length-1)
return value_b-value_a;
}
对于数值类型的数据使用numSort排序
对于有百分号的数据使用percentSort
bootstrap-table默认按字符串排序
默认显示的结果

数值类型排序的结果
正序排序

倒序排序

百分比类型数据排序的结果
正序排序

倒序排序

bootstrap-table不分页时对数值类型数据的排序的更多相关文章
- bootstrap table 服务器端分页例子分享
这篇文章主要介绍了bootstrap table 服务器端分页例子分享,需要的朋友可以参考下 1,前台引入所需的js 可以从官网上下载 复制代码代码如下: function getTab(){var ...
- 161222、Bootstrap table 服务器端分页示例
bootstrap版本 为 3.X bootstrap-table.min.css bootstrap-table-zh-CN.min.js bootstrap-table.min.js 前端boot ...
- [前端插件]Bootstrap Table服务器分页与在线编辑应用总结
先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据 ...
- C# Bootstrap table之 分页
效果如图: 一.声明talbe <div class="container"> <table id="table" class="t ...
- [转]C# Bootstrap table之 分页
本文转自:https://www.cnblogs.com/zhangjd/p/7895453.html 效果如图: 一.声明talbe <div class="container&qu ...
- [转]Bootstrap table后端分页(ssm版)
原文地址:https://www.cnblogs.com/flyins/p/6752285.html 说明bootstrap table可以前端分页,也可以后端sql用limit分页.这里讲的是后端分 ...
- Bootstrap table后端分页(ssm版)
说明bootstrap table可以前端分页,也可以后端sql用limit分页.这里讲的是后端分页,即实用limit.性能较好,一般均用这种源码下载地址:https://git.oschina.ne ...
- Bootstrap table前端分页(ssm版)
说明bootstrap table可以前端分页,也可以后端sql用limit分页.前端分页下性能和意义都不大,故一般情况下不用这种,请看我的另一篇后端分页的博客源码下载地址:https://git.o ...
- bootstrap table 服务器端分页--ashx+ajax
1.准备静态页面 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-T ...
随机推荐
- 对工具的反思 & deadlines与致歉
人和动物最大的区别就是使用工具的水平. 有些人只凭着对工具的熟练掌握便成了牛人. 工具,到底应该以何种态度去看待? 在我小的时候,工具仅仅是指树枝.线.粉笔,可以让自己有更多游戏可玩:上学之后,便又有 ...
- C++STL——堆栈
一.相关定义 原理:stack队列是一个线性存储表,插入和删除只在栈顶进行,从而构成了一个后进先出LIFO表. 入栈&出栈:元素的插入称为入栈,元素的删除称为出栈. stack是一种关联容器, ...
- c#和html方法互调
具体见连接:https://www.cnblogs.com/zeroLove/p/3912460.html
- chrome谷歌浏览器导致的密码被修改现象
版本 68.0.3440.106(正式版本) (32 位)记住密码功能有个缺陷,会把自己的密码自动填写到别人的密码框中,假如这个时候点击保存密码,就会导致其他用户的密码被修改为登录用户的密码. 很 ...
- WebStorm中配置ExtJS
原文链接:http://zhidao.baidu.com/link?url=yX0wDWrL-b2P8k3JNNI38Fb6keuAgm0j9E-QBL1KfWXrZgLZ88grAOVJvat6dJ ...
- 【PHP】- session_cache_limiter(private,must-revalidate)是什么意思
session_cache_limiter(private,must-revalidate)是什么意思 表义一: 指定会话页面所使用的缓冲控制方法: 当session_cache_limiter('p ...
- css如何选择相同class下的第一个class元素和最后一个元素?
如图,如果像选择类名为 class="exerciseInfo" 中的第一个和最后一个div,做法如下: 选择第一个类名: .exerciseInfo: nth-of-type ...
- WCF身份验证二:基于消息安全模式的自定义身份验证
使用X509证书进行身份验证应该说是WCF安全模型中最”正常”的做法, 因为WCF强制要求使用证书加密身份数据, 离开了证书, 所有的身份验证机制拒绝工作, WCF支持的身份验证机制也相当复杂, 这里 ...
- kibana和ElasticSearch的信息查询检索
使用kibana来进行ElasticSearch的信息查询检索 大家经常会听到使用ELK搭建日志管理平台.完成日志聚合检索的功能,那么这个平台到底是个什么概念,怎么搭建,怎么使用呢? ELK包括Ela ...
- BZOJ1044 [HAOI2008]木棍分割 【二分+Dp】
1044: [HAOI2008]木棍分割 Time Limit: 10 Sec Memory Limit: 162 MB Submit: 4281 Solved: 1644 [Submit][St ...