BootstrapTable的列排序怎麼搞

一、BootstrapTable的列排序怎麼搞。

先搞一個table，使用ajax將數據查詢出來，而後能夠在全部列都加上排序。知足本身的需求。

data-sortable="true"，此屬性加到列上面，能夠顯示出上下排序的箭頭。

 1 <div style="float: left; width: 100%;">
 2 <div class="clearfix"></div>
 3 <table id="dataTable" style="font-size: 12px;" data-toolbar="#timeSearch"
 4     data-toggle="table" 
 5     data-locale="zh-CN" 
 6     data-ajax="ajaxRequest"
 7     data-side-pagination="server" 
 8     data-striped="true"
 9     data-click-to-select="true" 
10     data-sort-name="id"
11     data-sort-order="desc" 
12     data-row-style="rowStyle"
13     data-pagination="true" data-pagination-first-text="首頁"
14     data-pagination-pre-text="上一頁" data-pagination-next-text="下一頁"
15     data-pagination-last-text="末頁" data-show-jumpto="true">
16     <thead style="text-align: center;"> 
17         <tr>
18             <th data-radio="true"></th>
19             <th data-field="id" 
20                 data-width="40" data-formatter="indexFormatter" data-halign="center" data-align="center">序號</th>
21             <th data-field="code" data-sortable="true" data-formatter="codeFormatter" data-halign="center" data-width="280"
22                 data-align="center">編碼</th>
23             <th data-field="field1" data-halign="center" data-sortable="true" data-width="280"
24                 data-align="center">字段1</th>
25             <th data-field="field2" data-halign="center" data-sortable="true" data-width="280"
26                 data-align="center">字段2</th>
27             <th data-field="field3" data-halign="center" data-sortable="true" data-width="280"
28                 data-align="center">字段3</th>
29             <th data-field="field4" data-halign="center" data-sortable="true" data-width="280"
30                 data-align="center">字段4</th>
31         </tr>
32     </thead>
33 </table>
34 </div>

二、ajax的處理以下所示：

"&sort=" + params.data.sort，排序的字段。"&type=" + params.data.order，排序的方式，排序升序asc或者降序desc。

 1 function ajaxRequest(params) {
 2     var pageSize = params.data.limit;
 3     var pageNum = params.data.offset/pageSize + 1;
 4     index = params.data.offset + 1;
 5     
 6     var dataStr = "pageSize = " + pageSize
 7         + "&pageNum=" + pageNum
 8         + "&sort=" + params.data.sort    //排序的字段。
 9         + "&type=" + params.data.order;  // 排序的方式，排序升序或者降序。
10     var url = 'xxxAction!findDataxxx.action';        
11     $.ajax({
12         type : 'post',
13         url : url,
14         data : dataStr,
15         dataType : 'json',
16         global : false,
17         async : true,
18         success : function(data) {
19             var count = 0;
20             var applies = [];
21             if (data && data.result) {
22                 applies = data.result.items ? data.result.items : [];
23                 count = data.result.count;
24             }
25             params.success({
26                 total : count,
27                 rows : applies
28             });
29             params.complete();
30         }
31     });
32 }

三、因爲是公司本身封裝的框架，本身的需求能夠結合本身的實際狀況。因爲使用的是struts，本身根據本身需求搞吧。   

 1 private String sort;
 2 private String type;
 3 本身定義本身的setter/getter。因爲使用的是struts，本身根據本身需求搞吧。    
 4 
 5 public String findDataxxx() {
 6     Map<String, Object> params = new HashMap<>();
 7     Pagination<xxx> page = new Pagination<xxx>();
 8     page.setCounted(true);
 9     page.setSize(pageSize);
10     page.setIndex(pageNum);
11     Ordering order = new Ordering();
12     //能夠判斷本身排序的列，而後判斷一下，進行排序操做。因爲是公司本身封裝的框架，本身的需求能夠結合本身的實際狀況
13     if("id".equals(sort)) {
14         order.setName("name");
15         order.setType("asc");
16     }else if("name".equals(sort)) {
17         order.setName("name");
18         order.setType(type); 
19     }else if("field1".equals(sort)){
20         order.setName("field1");
21         order.setType(type);
22     }else if("field2".equals(sort)){
23         order.setName("field2");
24         order.setType(type);
25     }else if("field3".equals(sort)){
26         order.setName("field3");
27         order.setType(type);
28     }else if("field4".equals(sort)){
29         order.setName("field4");
30         order.setType(type);
31     }
32     
33     if (Detect.notEmpty(sourceCode)) {
34         params.put("sourceCode", sourceCode);
35     }
36     if (Detect.notEmpty(startTime)) {
37         params.put("startTime", startTime);
38     }
39     if (Detect.notEmpty(endTime)) {
40         params.put("endTime", endTime);
41     }
42     //查詢check數據表返回的數據
43     Pagination<xxx> findDataxxx = xxxService.findDataxxx(params, order, page);
44     dataMap.put("result", findDataxxx);
45     return SUCCESS;
46 }

效果圖以下所示，全部列均可以點擊排序操做：

 

待續......