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不分页时对数值类型数据的排序的更多相关文章

  1. bootstrap table 服务器端分页例子分享

    这篇文章主要介绍了bootstrap table 服务器端分页例子分享,需要的朋友可以参考下 1,前台引入所需的js 可以从官网上下载 复制代码代码如下: function getTab(){var ...

  2. 161222、Bootstrap table 服务器端分页示例

    bootstrap版本 为 3.X bootstrap-table.min.css bootstrap-table-zh-CN.min.js bootstrap-table.min.js 前端boot ...

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

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

  4. C# Bootstrap table之 分页

    效果如图: 一.声明talbe <div class="container"> <table id="table" class="t ...

  5. [转]C# Bootstrap table之 分页

    本文转自:https://www.cnblogs.com/zhangjd/p/7895453.html 效果如图: 一.声明talbe <div class="container&qu ...

  6. [转]Bootstrap table后端分页(ssm版)

    原文地址:https://www.cnblogs.com/flyins/p/6752285.html 说明bootstrap table可以前端分页,也可以后端sql用limit分页.这里讲的是后端分 ...

  7. Bootstrap table后端分页(ssm版)

    说明bootstrap table可以前端分页,也可以后端sql用limit分页.这里讲的是后端分页,即实用limit.性能较好,一般均用这种源码下载地址:https://git.oschina.ne ...

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

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

  9. bootstrap table 服务器端分页--ashx+ajax

    1.准备静态页面 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-T ...

随机推荐

  1. 教程|要想Hadoop能够运行Python程序,就要会MRJob

    首先 要想Hadoop能够很流畅的Python程序,学习mrjob可能是最直接.最简单的方法了 你甚至都不要按安装部署Hadoop集群. mrjob拥有很多优秀的特性比如: 支持多步骤的MapRedu ...

  2. TTY锁屏与解锁

    今天在tmux中使用vim时,不小心按了CTRL+S,结果整个vim不能使用了,在网上查到这里会有锁屏的问题,具体如下: 在tmux中,按CTRL+S,锁屏,按CTRL+Q,解锁.与系统的锁屏和解锁是 ...

  3. java 生成简单word(利用Itext工具),生成简单Excel,以及下载笔记

    1.java 生成简单word(包含图片表格) pom中加入itext 相关依赖 <dependency> <groupId>com.lowagie</groupId&g ...

  4. EM算法浅析(二)-算法初探

    EM算法浅析,我准备写一个系列的文章: EM算法浅析(一)-问题引出 EM算法浅析(二)-算法初探 一.EM算法简介 在EM算法之一--问题引出中我们介绍了硬币的问题,给出了模型的目标函数,提到了这种 ...

  5. 对TDD的实践感悟

    文章:我的TDD实践:可测试性驱动开发(上) 文章表达的思想是,达到一个目的并非只有一种套路,作者用写代码时,时刻考虑代码的可测试性,来推动项目的合理开发.

  6. Windows下的Memcache安装与Java部署

    Windows下的Memcache安装: 1. 下载memcached的windows稳定版,解压放某个盘下面,比如在c:\memcached 2. 在终端(也即cmd命令界面)下输入 ‘c:\mem ...

  7. Delphi 检查文件是否存在

    Delphi下检查文件是否存在,我们可以使用FileExists函数 其原形如下: Function FileExists(const FileName: string): Boolean; 示例: ...

  8. oracle分区技术提高查询效率

    概述: 当表中的数据量不断增大,查询数据的速度就会变慢,应用程序的性能就会下降,这时就应该考虑对表进行分区.表进行分区后,逻辑上表仍然是一张完整的表,只是将表中的数据在物理上存放到多个表空间(物理文件 ...

  9. 【bzoj1797】[Ahoi2009]Mincut 最小割 网络流最小割+Tarjan

    题目描述 给定一张图,对于每一条边询问:(1)是否存在割断该边的s-t最小割 (2)是否所有s-t最小割都割断该边 输入 第一行有4个正整数,依次为N,M,s和t.第2行到第(M+1)行每行3个正 整 ...

  10. 【题解】HNOI2009无归岛

    这题真的是无语了,在哪个岛上根本就没有任何的用处……不过我是画了下图,感受到一定是仙人掌,并不会证.有谁会证的求解…… 如果当做仙人掌来做确实十分的简单.只要像没有上司的舞会一样树形dp就好了,遇到环 ...