Bootstrap表格插件Bootstrap Table配置教程

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
           }
    });

在线试一试 

文章目录
快速入门 bootstrap table方法 bootstrap table事件 bootstrap table下载 基础配置 row Attributes设置行属性 custom Sort自定义排序 table Cache缓存数据 content Type设置 response Handler total/Data Field JSON格式 escape显示html标签 idField和selectItemName cardView卡片视图模式 detailView详情视图模式 icons图标相关设置 本地化中文设置 列相关设置 columns基础设置 sortable列排序 column选择操作列 column列属性列表 分页设置 bootstrap table服务端分页 table Method 方式设置 data Type数据格式 custom AJAX 自定义ajax bootstrap table前端分页 bootstrap table查询搜索 smartDisplay作用 分页时保持选择状态 工具栏相关 showHeader显示头部 showFooter显示底部 showColumns开启列刷选 showPaginationSwitch分页 showRefresh刷选按钮 showFullscreen toolbar工具栏设置 样式设置 固定表头并美化表头 设置表格样式隔行变色 rowStyle设置行样式 theadClasses设置表头样式 footerStyle底部样式