bootstrap-table 前端排序以及后端排序

前端排序

1. 列参数设置：

传入sorter参数，增加自定义排序功能

columns:[{
   title: '编号',
   field: 'no',
   align:'center',
   width:120,
   sortable:true,
   sorter:'sortStr'
},....
]

2. 自定义排序方法

//字符串排序，包括中文，按首字母A-Z顺序排序
sortStr=  function(a, b) {
        var a = a?a:-1, b = b?b:-1
        return a.localeCompare(b)
},
//按日期排序
sortDate=  function(a, b) {
        var a = a?a:-1, b = b?b:-1
        return Date.parse(a) - Date.parse(b)
},
//按数字大小排序
sortNum=  function(a, b) {
        var a = a?a:-1, b = b?b:-1
        return a-b
},

3. 前端排序注意点

• 一定要填写field参数，即使使用了formatter显示字段值，也必须保留field参数

  formatter: function(val, list, i) { return val; }

• sorter参数一定是方法名字符串，否则无法获取到排序参数

• 如果主参数使用了后端分页参数sidePagination=server，则无法使用前端自动排序

4. 其他方法，可在table option中增加customSort参数

参考：https://live.bootstrap-table.com/example/options/custom-sort.html

  function customSortFun(sortName, sortOrder, data) {
    var order = sortOrder === 'desc' ? -1 : 1
    data.sort(function (a, b) {
      var aa = +((a[sortName] + '').replace(/[^\d]/g, ''))
      var bb = +((b[sortName] + '').replace(/[^\d]/g, ''))
      if (aa < bb) {
        return order * -1
      }
      if (aa > bb) {
        return order
      }
      return 0
    })
  }

后端排序

在做了后端分页（"sidePagination": "server",）的情况下，无法进行前端排序。

可以使用bootstrap的onSort（sort.bs.table）事件，获取点击排序事件，传入后端接口排序参数即可。

 

以下是一个后端排序，分页的完整参数示例

var option = {
    "url": "url",
    "method": "post",
    "height": "100",
    "paginationLoop": false,
    "contentType": "application/json; charset=utf-8",
    "dataType": "json",
    "paginationVAlign": "bottom",
    "pagination": true,
    "sidePagination": "server",
    "ajaxOptions": {
        "xhrFields": {
            "withCredentials": true
        }
    },
    "uniqueId": "object_id",
    "classes": "table table-hover",
    "dataField": "data",
    "totalField": "count",
    "columns": [
        {
            "title": "序号",
            "align": "center",
            "width": 50
        },
        {
            "title": "名称",
            "field": "unitName",
            "align": "center",
            "sortable": true,
            "sorter": "sortStr"
        }
    ],
    "pageSize": 10,
    "pageList": [
        10,
        20,
        30,
        40,
        50
    ],
    onLoadSuccess:function(){},
    queryParams:'queryParams'
}

params= {
    id: 1
}

function queryParams(){
    return params
    //return JSON.stringify(params);
}


$('#table1').bootstrapTable(option );

//后端排序, 点击排序后，会自动赋值参数查询，并刷新表格
$('#table1').on('sort.bs.table',function(e, name, order){//点击排序
        params.orderField = name
        params.order = order
});