zoukankan      html  css  js  c++  java
  • 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代码

     1 $("#table").bootstrapTable({
     2     dataType: "json",
     3     method: 'get',
     4     contentType: "application/x-www-form-urlencoded",
     5     cache: false,
     6     url:"data/sortData.json",
     7     columns:[
     8         {
     9             field: 'name',
    10             title: '品牌名称',
    11             valign:"middle",
    12             align:"center",
    13             sortable:true
    14         },
    15         {
    16             field: 'num',
    17             title: '门店数量',
    18             valign:"middle",
    19             align:"center",
    20             sortable:true,
    21             sorter:numSort
    22         },{
    23             field: 'pecent',
    24             title: '市场份额',
    25             valign:"middle",
    26             align:"center",
    27             sortable:true,
    28             sorter:percentSort
    29         }
    30     ]
    31 })
    32 function numSort(a, b) {
    33     return b-a;
    34 }
    35 function percentSort(a, b) {
    36     var value_a = a.substr(0, a.length-1)
    37     var value_b = b.substr(0, b.length-1)
    38     return value_b-value_a;
    39 }

    对于数值类型的数据使用numSort排序
    对于有百分号的数据使用percentSort
    bootstrap-table默认按字符串排序

    默认显示的结果

    数值类型排序的结果

    正序排序

    倒序排序

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

    正序排序

    倒序排序





  • 相关阅读:
    C# is 与 as 运算符
    C# dynamic类型
    C# 数组
    C# 泛型
    C# 事件
    C# 委托
    C# DateTime类,TimeSpan类
    C# 获取当前应用程序的绝对路径支持asp.net
    C# 父子类_实例_静态成员变量_构造函数的执行顺序
    C# System.Uri类_获取Url的各种属性_文件名_参数_域名_端口等等
  • 原文地址:https://www.cnblogs.com/lhyhappy365/p/5834098.html
Copyright © 2011-2022 走看看