bootstrap table点击列排序sortable

在表格的前端应用中点击列名进行排序，是一个非常重要的功能，常用的场景比如点击列顺序或者倒序查看销量、库存、用户量等。bootstrap table提供了列的sortable属性来进行排序非常简单，把需要排序的列属性sortable设置成true即可。

前端排序

注意：这个只是前端排序，比如bootstrap table有10页数据，在第一页你点击销量排序只对当前页的数据起作用。

 var columns = [{
            field: 'Id',
            title: '编号',
            sortable:true //设置ID列可以排序
        }, {
            field: 'ProductName',
            title: '产品名称',
            sortable:true //设置产品名称列可以排序
        }, {
            field: 'StockNum',
            title: '库存',
            sortable:true //设置库存列可以排序
        }];
        //需要显示的数据
        var data = [{
            Id: 1,
            ProductName: '香蕉',
            StockNum: '100'
        }, {
            Id: 2,
            ProductName: '苹果',
            StockNum: '200'
        }];
  //bootstrap table初始化数据
   $('#table').bootstrapTable({
          columns: columns,
         data: data
   });

在线试一试 

服务器端排序

注意：通常我们还是要使用服务器端排序才有意义，因为不可能把所有数据在一页里显示完成。
服务器端排序需要用到以下条件
   1，onSort事件，当用户点击列排序时触发的事件，返回列名和排序方式
   2，然后通过refreshOptions方法去刷新sortName和sortOrder字段即可

 // 设置需要显示的列
        var columns = [{
            field: 'Id',
            title: '编号',
           sortable:true    /*********第1步，开启排序************/
        }, {
            field: 'ProductName',
            title: '产品名称',
            sortable:true 
        }, {
            field: 'StockNum',
            title: 'Item 库存',
             sortable:true 
        }];

  $('#table').bootstrapTable({
            url: '/package/bootstrap-table-1.14.1/data.json', /*****第2步，设置服务器分页地址********/
            pagination: true,//开启分页
            search: true, //开启刷选
            columns: columns,
            /*********第3步，定义排序事件************/
            onSort:function(name,order)
            {
             /*********第3步，刷新排序字段和排序方法，完成************/
              $('#table').bootstrapTable('refreshOptions', {
               sortName:name,
               sortOrder:order
          });
      } 
 });

在线试一试 

服务器端同时对多个字段进行排序

有时我们需要对多个字段进行排序如 order by id asc,num desc,name asc ，bootstrap table任何实现这样的排序呢，其实只要在上面的基础上借助queryParams属性即可，代码如下：

   // 设置需要显示的列
        var columns = [{
            field: 'Id',
            title: '编号',
             sortable:true 
        }, {
            field: 'ProductName',
            title: '产品名称',
           sortable:true 
        }, {
            field: 'StockNum',
            title: 'Item 库存',
           sortable:true 
        }];


        $('#table').bootstrapTable({
            iquery:{},//定义一个记录排序的对象 ***********
            url: '/package/bootstrap-table-1.14.1/data.json',
            pagination: true,//开启分页
            search: true, //开启刷选
            columns: columns,
            onSort:function(name,order)
            {
              
              $('#table').bootstrapTable('refreshOptions', {
               sortName:name,
               sortOrder:order
              });
                      
            },
           //把iquery排序字段传给服务器
           queryParams:function (params) {
             
             this.iquery[this.sortName]=this.sortOrder; 
             $.extend(params,  this.iquery);
            return params
           }
    });

在线试一试