bootstrap table onSort列排序事件

当点击排序列时bootstrap table的事件,通过onSort排序事件我们可以得到被点击的列字段名和排序方式desc asc。

onSort排序事件

点击排序列的事件，事件名称 onSort，返回参数如下。

参数名称	说明
name	字段名称，如ProductName
order	当前排序方式 desc、asc

初始化时绑定onSort事件

$('#table').bootstrapTable({
    columns: columns, //列对象
    data: data, //要显示的数据对象
    onSort:function(name,order)
     {
         alert(name);
     }
 });

初始化后绑定onSort事件

$('#table').on('sort.bs.table', function (e,name,order) {
      alert(name);
})

注意：初始化时注册和初始化后注册的第一个返回参数对象是不一样的

完整代码

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="https://www.itxst.com/package/bootstrap-table-1.14.1/jquery-3.3.1/jquery.js"></script>
    <link href="https://www.itxst.com/package/bootstrap-table-1.14.1/bootstrap-4.3.1/css/bootstrap.css" rel="stylesheet" />
    <link href="https://www.itxst.com/package/bootstrap-table-1.14.1/bootstrap-table-1.14.1/bootstrap-table.css" rel="stylesheet" />
    <script src="https://www.itxst.com/package/bootstrap-table-1.14.1/bootstrap-table-1.14.1/bootstrap-table.js"></script>
    <title>bootstrap table onSort排序事件在线例子</title>
    <style>
        .table-demo {
            width: 80%;
            margin: 30px auto 0px auto;
        }


        .fixed-table-header {
            border-right: solid 1px #ddd;
            border-top: solid 1px #ddd;
        }


            .fixed-table-header table {
                border-top: solid 0px #ddd !important;
                margin-top: -1px;
            }
        /*定义类名为.thead-blue的样式*/
        .table .thead-blue th {
            color: #fff;
            background-color: #3195f1;
            border-color: #0d7adf;
        }
    </style>
</head>
<body>
    <div class="table-demo">
        <table id="table"></table>
    </div>
    <script>
        //设置需要显示的列
        var columns = [{
            field: 'Id',
            title: '编号',
            sortable: true
        }, {
            field: 'ProductName',
            title: '产品名称',
            sortable: true
        }, {
            field: 'StockNum',
            title: '库存',
            sortable: true


        }];


        //bootstrap table初始化数据
        $('#table').bootstrapTable({
            columns: columns,
            data: getData(),                      //请求后台的URL（*）
            method: 'GET',                      //请求方式（*）
            classes: "table table-bordered table-striped table-sm",
            height: 400,
            customSort: customSort,
            onSort: function (name, order) {
                alert(order)
            }
        });


        // $('#table').on('sort.bs.table', function (e,name,order) {
        //     alert(name);
        //});


        function customSort(sortName, sortOrder, data) {
            var order = sortOrder === 'desc' ? -1 : 1
            data.sort(function (a, b) {
                var v1 = a[sortName]
                var v2 = b[sortName]
                if (v1 == 3) {
                    return -1;
                }
                if (v1 > v2) {
                    return 1
                }
                return 0
            })
        }


        function getData() {
            var data = [];


            for (var i = 0; i < 2; i++) {
                var item = {
                    Id: i,
                    ProductName: '香蕉' + i,
                    StockNum: i
                };


                data.push(item);
            };
            for (var i = 0; i < 5; i++) {
                var item = {
                    Id: i,
                    ProductName: '苹果' + i,
                    StockNum: i
                };


                data.push(item);
            };
            for (var i = 0; i < 5; i++) {
                var item = {
                    Id: i,
                    ProductName: '橘子' + i,
                    StockNum: i
                };


                data.push(item);
            };
            return data;
        }
    </script>
</body>
</html>

在线试一试
请点击库存这列来测试本例子