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 ...
随机推荐
- MediaTypeListWidget->insertItem 添加的label没有填充单元格
label没有填充满当前的item,但是主界面拉伸或者大小变化之后会填充当前的item 类似相关的问题我猜测都是因为子控件或者需要参考的控件的参考对象的大小在初始化的时候还没有完成最终的初始化,导致大 ...
- ionic 入口禁止加载其他页面
.state('memberOrders', { prefetchTemplate: false, url: '/memberOrders', templateUrl: '/MemberOrders' ...
- hdu1506 Largest Rectangle in a Histogram
Problem Description A histogram is a polygon composed of a sequence of rectangles aligned at a commo ...
- 第十六篇 Python之迭代器与生成器
一.迭代器 一. 递归和迭代 生活实例说明什么是递归和迭代 A想去腾达大厦,问B怎么走路,B 说我不知道,我给你问问C,C也不知道,C又去问D,D知道,把路告诉了C,C又告诉B,B最后告诉A, 这就是 ...
- 当我们在安装tensorflow时,我们在安装什么?- Intro to TF, Virtualenv, Docker, CUDA, cuDNN, NCCL, Bazel
(Mainly quoted from its official website) Summary: 1. TensorFlow™ is an open source software library ...
- DCGAN: "Unsupervised Representation Learning with Deep Convolutional Generative Adversarial Network" Notes
- Alec Radford, ICLR2016 原文:https://arxiv.org/abs/1511.06434 论文翻译:https://www.cnblogs.com/lyrichu/p/ ...
- Ubuntu 进阶命令——长期不定时更新
有时候远程连接服务器忽然中断或者不小心关掉了终端界面,正在运行的命令或者程序就会被强制停止.这时候,我们可以借助一些命令来避免这种情况的发生. nohup 不挂断地运行命令 & 在后台运行命令 ...
- BZOJ 3569 DZY Loves Chinese II 树上差分+线性基
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3569 Description 神校XJ之学霸兮,Dzy皇考曰JC. 摄提贞于孟陬兮,惟庚寅 ...
- BZOJ 1010 HNOI2008 玩具装箱 斜率优化
题目链接: http://www.lydsy.com/JudgeOnline/problem.php?id=1010 Description P教授要去看奥运,但是他舍不下他的玩具,于是他决定把所有的 ...
- STL应用——hdu1412(set)
set函数的应用 超级水题 #include <iostream> #include <cstdio> #include <algorithm> #include ...