bootstrap table添加单击头部排序

由于项目需要,需要给表头点击添加排序功能,限于开始使用的是bootstrop table,自带没有自动排序功能,所以就只有手动添加了,具体APi如下

1).js中声明变量

/**order:为排序的字段名,by:排序方式(0:无排序,1:asc,2:desc)*/
var orderBy = {order:'',by:0};

2),对应的bootstrop table代码中添加需要排序的列 title----{}为标注  需要填入相关的信息

title: orderBy.order=='{属性名称}'?(orderBy.by==1?'<a href="javascript:orderByGo(\'{属性名称}\','+orderBy.by+');" > {表头} </a><span class="fa fa-sort-up"></span>':'<a href="javascript:orderByGo(\'{属性名称}\','+orderBy.by+');"> {表头} </a> <span class="fa fa-sort-desc"></span>'):'<a href="javascript:orderByGo(\'{属性名称}\','+orderBy.by+');">{表头}</a>',

3),编写对应的调用函数,此处为orderByGo
    var orderByGo = function(order,by){
        //改变前端页面样式
        if(orderBy.order==order){
            if(orderBy.by==1){
                orderBy.by=2;
            }else{
                orderBy.by=1;
            }
        }else{
            orderBy.order=order;
            orderBy.by=1;
        }
        //,将orderBy参数传入查询参数中(也就是bootstroptable查询后台时候传入的参数,可以先将此参数写到代码中)
        例如{
            ...此处省略其他参数
            "order":orderBy.order==''?'':orderBy.order,
            "orderType":orderBy.by==1?'asc':(orderBy.by==2?'desc':'')
        }
        //查询数据,调用查询数据库的方法,(初始化查询table的方法),例如query();
        query();
    };
    
4)后台取出排序参数
String order = getParm("order");
String orderType = getParm("orderType");

5)Service中拼接排序
   

转载于:https://my.oschina.net/LJack/blog/801968