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. 自动化测试元素查找利器firepath介绍

    自动化测试查找元素和确定元素xpath路径是否正确在业界有个很好的工具就是firefox 浏览器的 firepath 问题: firefox 最新版本已经不支持firebug和firepath这两个插 ...

  2. (vue01)vue环境搭建

    腾讯,百度,网易....这么大媒体平台咋老推送这么lower的信息? 你们不缺钱啊....我这么善良的孩子都别你们带坏了 强烈鄙视马化腾 强烈鄙视李彦宏 参考地址: https://segmentfa ...

  3. cut 与 awk

    cut和awk都能分割显示需要的内容 但在需要以空格为分隔符的情况下: # free -m|grep Mem Mem: cut是以单一空格为分隔符的: # free -m|grep Mem|cut - ...

  4. deeplearning.ai课程学习(1)

    本系列主要是我对吴恩达的deeplearning.ai课程的理解和记录,完整的课程笔记已经有很多了,因此只记录我认为重要的东西和自己的一些理解. 第一门课 神经网络和深度学习(Neural Netwo ...

  5. gitbook生成的_book文件本地打开后链接失效问题

    Gitbook 生成本地 html 的问题 在本地用 gitbook-cli根据 Summary 生成目录 然后在每个 md 文件里书写内容 然后用 gitbook serve .生成本地 html ...

  6. Python调用MYSQL,将文件名和路径批量入库用法小结

    最近项目需要将大量的压缩文件导入到数据库中,所以开始总结用Python批量处理的办法,本次是首先将这些压缩文件的文件名提取出来,然后导入到数据库中. 由于涉及到路径的读取处理,所以方法有os模块和co ...

  7. 【SSH】——hql的使用方式及实现原理

    [含义] hql,即Hibernate Query  Language.它与我们熟知的sql很类似,它最大的特点就是对查询进行了面向对象的封装,下面会在具体例子中说明. sql查询的是数据库中的表或字 ...

  8. 16常用API

    常用API 今日内容介绍 u 正则表达式 u Date u DateFormat u Calendar 第1章 正则表达式 1.1 正则表达式的概念 正则表达式(英语:Regular Expressi ...

  9. AndroidStudio3.0 注解报错Annotation processors must be explicitly declared now. The following dependencies on the compile classpath are found to contain annotation processor.

    体验最新版AndroidStudio3.0 Canary 8的时候,发现之前项目的butter knife报错,用到注解的应该都会报错 Error:Execution failed for task ...

  10. Dubbo 的 Helloworld

    前提条件 安装好了 ZooKeeper 作为注册中心 服务端 <?xml version="1.0" encoding="UTF-8"?> < ...