bootstrap-table的前端排序和分页技术

Veröffentlicht am | in . . |

理解与认识

bootstrap的分页分为前端（客户端）分页和后端（服务端）分页两种，参数设置时，客户端（前端）分页的参数：sidePageination:’client’，服务端（后端）分页的参数sidePagenation:’server’。在数据格式上前端分页(客户端）需要的数据结构必须为[{},{},{}…],服务端需要的数据格式为{total:56,rows:[{},{},{}….]}具备以上两个条件，bootstraptable分页就可以正常显示，但是在前端（客户端）分页的时候，后端接口中传过来的数据不一定符合我们的数据格式标准，这就需要我们在ajax（已被框架封装进组件）获取数据完成之后且数据分发之前打印一下数据，查看是否合规。

分析原理

ajax完成获取数据并且还未发放数据，这一过程的数据（原始数据）在responseHander参数里面能够获取到,responseHandler: function(res) {return res}这里的res即为原始数据，打印出来如果res的数据格式符合当前分页（服务器或客户端）的格式则不用做处理，如果不符合则需要进行处理，如下面的例子中，我们做的是前端分页，所需要的格式是[{},{},{}…]，而我们打出来的res原始数据格式为
{total:56,rows:[{},{},{}….]}，这就需要我们进行局部截取处理，只保留合法部分：

1
2
3
4
   responseHander:function(res){
	var result = res.rows;
	return result;//在这里result就是我们需要的数据
}

排序，前端排序的基本思想就是通过获取要排序的字段名称和排序方式（asc正序或者desc倒序），对已请求获得的所有数据在发放前进行重新排列，再发放数据使其显示的行为。

具体实践

每次点击列表中的某一字段进行排序，相当于是重新查询了一遍数据，所以排序之前先设置了查询的字段规则和排序规则，这一步在queryParams: function queryParams(params) { } 获取到，params即为每次进行查询时所有的参数数据，这时候我们打印一下params，因为我们的queryParamsType设置的参数为undefined,所以打印出来的数据包含了sortName和sortOrder即排序名称和排序规则。

当我们点击某字段的排序按钮我们会看到sortName和sortOrder也在变成我们对应的字段名称和切换排序顺序，换句话说我们每次对列表进行点击排序操作在queryParams: function queryParams(params) { }都能拿到，现在我们有一个思路就是获取当前的sortName和sortOrder，通过这两项在数据发放前进行数据的重新排列，首先我们看一下我们要处理的数据，res.rows,这个数据格式是[{},{},{}….]，这样我们要对数组中的对象通过对象中的某个属性进行排序，函数如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/**根据数组里属性的值的大小进行排序**/
function compare(property,type){
	if(type == 'asc'){
		return function(a,b){
	        var value1 = a[property];
	        var value2 = b[property];
	        return value1 - value2;
	    }
	}else{
		return function(a,b){
	        var value1 = a[property];
	        var value2 = b[property];
	        return  value2 - value1;
	    }
	}
    
}

我们要在数据发放之前调用compare函数，也就是在 responseHander:function(res){}里面调用，compare函数的两个参数分别为属性名和排序方式，在第一次加载页面时我们可以规定一个默认的排序名称和排序方法把他们保存在两个全局变量当中，如 var sortName = ‘auditStatus’, sortType = ‘asc’;调用compare(sortName,sortType);当点击了排序按钮时再将获取到的params里面的sortName和sortOrder分别赋给sortName和sortType,即：

1
2
sortName = params.sortName;
sortType = params.sortOrder;

两个全局变量被赋予了新的值，这样每当我们重新点击了排序按钮,列表数据进入新一轮查找重新调用了compare(sortName,sortType);数据就完成了新一轮的排序。全部实现代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
var sortName = 'auditStatus', sortType = 'asc'; 
 /**根据数组里属性的值的大小进行排序**/
function compare(property,type){
	if(type == 'asc'){
		return function(a,b){
	        var value1 = a[property];
	        var value2 = b[property];
	        return value1 - value2;
	    }
	}else{
		return function(a,b){
	        var value1 = a[property];
	        var value2 = b[property];
	        return  value2 - value1;
	    }
	}
    
}
function initTable2() {
    layer.load(1,{shade: [0.3,'#999']});
    //先销毁表格
    $('#cusTable2').bootstrapTable('destroy');
    var url = "<%=basePath%>manage/sys/role/thisCompanyList.do";
    //初始化表格,动态从服务器加载数据
    $("#cusTable2").bootstrapTable({
        method: "get",  //使用get请求到服务器获取数据
        url:"<%=basePath%>manage/personal/towaitList.do",//获取数据的Servlet地址
        dataType: "json",
        striped: false,  //表格显示条纹
        locale:'zh-CN',//中文支持
        pagination: true, //启动分页
        pageSize: 5,  //每页显示的记录数
        pageNumber:1, //当前第几页
        pageList: [5, 10, 15, 20, 25],  //记录数可选列表
        search: false,  //是否启用查询
        showColumns: false,  //显示下拉框勾选要显示的列
        showRefresh: false,  //显示刷新按钮
        showToggle: false,
        cardView: false,
        sidePagination: "client", //表示客户端请求
        responseHandler: function(res) {//在ajax请求成功后，发放数据之前可以对返回的数据进行处理，返回什么部分的数据
            //res = $.parseJSON(res);
            /* return res; */
			/* var result = res.rows; */
        	var result = res.rows.sort(compare(sortName2,sortType2));	 	 
        	/* var newObject = {"total": res.total, "rows": result}; */
            return result; 
        },
        columns: [
            {
                title: '标的状态',
                field: 'auditStatus',
                align: 'left',
                formatter:function(value,row,index){
                    var e ="";
                    if(row.auditStatus=='2'){
                        e="催收中";
                    }else if(row.auditStatus=='4'){
                        e="撤标结案中";
                    }else if(row.auditStatus=='5'){
                        e="撤标结案";
                    }else if(row.auditStatus=='6'){
                        e="撤案结案中";
                    }else if(row.auditStatus=='7'){
                        e="撤案结案";
                    }else if(row.auditStatus=='8'){
                        e="正常结案中";
                    }else if(row.auditStatus=='10'){
                        e="正常结案";
                    }
                    return e /*+ d*/;
                }
            },
            {
                title: '标的金额',
                field: 'amount',
                align: 'right',
                valign: 'middle',
                sortable: true,
                formatter:function(value,row,index){
                    if(value==''||value==null||value==undefined) return 0;
                    var num = (row.amount).toFixed(2);
                    var numArr = [];
                    if(num.toString().indexOf('.')!= -1){
                        numArr = num.toString().split('.');
                        num = numArr[0].replace(/(\d{1,3})(?=(\d{3})+$)/g,'$1,') +'.'+numArr[1];
                    }else{
                        num = num.toString().replace(/(\d{1,3})(?=(\d{3})+$)/g,'$1,');
                    }
                    return num;
                }
            },
            {
                title: '分配员工数',
                field: 'allotUserNum',
                align: 'right',
                valign: 'middle',
                sortable: true,
                formatter:function(value,row,index){
                    if(value==''||value==null||value==undefined) return 0;
                    var num = row.allotUserNum;
                    var numArr = [];
                    if(num.toString().indexOf('.')!= -1){
                        numArr = num.toString().split('.');
                        num = numArr[0].replace(/(\d{1,3})(?=(\d{3})+$)/g,'$1,') +'.'+numArr[1];
                    }else{
                        num = num.toString().replace(/(\d{1,3})(?=(\d{3})+$)/g,'$1,');
                    }
                    return num;
                }
            }

        ],
        //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
        //设置为limit可以获取limit, offset, search, sort, order
        queryParamsType : "undefined",
        queryParams: function queryParams(params) {   //设置查询参数
            var param = {
                pageNumber: params.pageNumber,
                pageSize: params.pageSize
            };
			console.log(params);
            sortName2 = params.sortName;
            sortType2 = params.sortOrder;
            return param;
        },
        onLoadSuccess: function(){  //加载成功时执行
            layer.closeAll('loading');

        },
        onLoadError: function(){  //加载失败时执行
            layer.closeAll('loading');
            /* layer.msg("加载数据失败", {time : 1500, icon : 2}); */
        },
        formatLoadingMessage: function () {
            /* layer.msg("请稍等，正在加载中..."); */
            layer.load(1,{shade: [0.3,'#999']});
        },
        formatNoMatches: function () {  //没有匹配的结果
            layer.closeAll('loading');
            layer.msg('无符合条件的记录');
        }

    });
}