首页 > Bootstrap表格插件Bootstrap Table配置教程 > Custom Sort bootstrap-table 自定义排序

Custom Sort bootstrap-table 自定义排序

Custom Sort自定义排序

自定义排序,比如我需要把库存为3的产品排前面,首先需要自定义一个排序行数。sortName为用户点击排序列的列名,sortOrder为asc或desc,data你获取到的原始数据,自定义函数如下。
注意:这只是前端排序,服务器端排序请点击>>> 服务器端排序

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

完整代码如下

在线试一试

 //设置需要显示的列
        var columns = [{
            field: 'Id',
            title: '编号'
        }, {
            field: 'ProductName',
            title: '产品名称'
        }, {
            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 
        });


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