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 ...
随机推荐
- JMeter学习笔记(九) 参数化4--User Variables
4.User Variables 用户参数 1)线程组右键添加 -> 前置处理器 -> 用户参数 2)配置用户参数 3)添加HTTP请求,引用用户参数,格式: ${} 4)配置线程数 5) ...
- 玩玩自动化测试之selenium篇
现如今社会科技发展太快了,纯功能点点点已经落后别人好几条街了,所以为了让自己多点职业生涯年限,得挺起肩,傲起头.自动化测试,其本质是用代码程序测试程序,所以其实第一步应该学好编程语言,后再自己开发自动 ...
- python 基础篇 10 函数进阶
本节主要内容:1. 函数参数--动态传参2. 名称空间, 局部名称空间, 全局名称空间, 作⽤域, 加载顺序.3. 函数的嵌套4. gloabal, nonlocal关键字 ⼀. 函数参数--动态传参 ...
- git部署详解
1.1 关于版本控制 1.1.1 本地版本控制 本地版本控制系统 许多人习惯用复制整个项目目录的方式来保存不同的版本,或许还会改名加上备份时间以示区别.这么做唯一的 好处就是简单,但是特别容易犯错.有 ...
- 问题 A: 完数
问题 A: 完数 时间限制: 1 Sec 内存限制: 32 MB提交: 252 解决: 178[提交][状态][讨论版][命题人:外部导入] 题目描述 求1-n内的完数,所谓的完数是这样的数,它的 ...
- wangEditor编辑器中解析html图文信息问题
在JS中,有一种方法:innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML. 也就是说,我们可以利用这个属性,把字符串转换为html代码,这样就可以被解析了. 其次,我们是需要在页 ...
- SQL 基础笔记(三):约束
个人笔记不保证正确. 数据类型是限制我们可以在表里存储什么数据的一种方法.不过,对于许多应用来说, 这种限制实在是太粗糙了.比如,一个包含产品价格的字段应该只接受正数. 但是没有哪种标准数据类型只接受 ...
- 配置Android应用开发环境
详解JRE.JDK.SDK.ADT请点击辨析ADK&JVM&JRE&JDK&ADT 一.安装JDK 开发 Android应用程序的时候,仅有Java运行环境(Java ...
- DFS(3)——poj1321棋盘问题
一.题目回顾 题目链接:棋盘问题 Description 在一个给定形状的棋盘(形状可能是不规则的)上面摆放棋子,棋子没有区别.要求摆放时任意的两个棋子不能放在棋盘中的同一行或者同一列,请编程求解对于 ...
- hadoop 2.6.0 伪分布式部署安装遇到的问题
之前读到了一篇关于配置安装hadoop的博文(地址:http://www.powerxing.com/install-hadoop/)能正确安装和运行,但是在网页进行Jobtracker监控时,输入l ...