BootstrapTable的列排序怎么搞

1、BootstrapTable的列排序怎么搞。

先搞一个table，使用ajax将数据查询出来，然后可以在所有列都加上排序。满足自己的需求。

data-sortable="true"，此属性加到列上面，可以显示出上下排序的箭头。

 <div style="float: left; width: 100%;">
 <div class="clearfix"></div>
 <table id="dataTable" style="font-size: 12px;" data-toolbar="#timeSearch"
     data-toggle="table"
     data-locale="zh-CN"
     data-ajax="ajaxRequest"
     data-side-pagination="server"
     data-striped="true"
     data-click-to-select="true"
     data-sort-name="id"
     data-sort-order="desc"
     data-row-style="rowStyle"
     data-pagination="true" data-pagination-first-text="首页"
     data-pagination-pre-text="上一页" data-pagination-next-text="下一页"
     data-pagination-last-text="末页" data-show-jumpto="true">
     <thead style="text-align: center;">
         <tr>
             <th data-radio="true"></th>
             <th data-field="id"
                 data-width="" data-formatter="indexFormatter" data-halign="center" data-align="center">序号</th>
             <th data-field="code" data-sortable="true" data-formatter="codeFormatter" data-halign="center" data-width=""
                 data-align="center">编码</th>
             <th data-field="field1" data-halign="center" data-sortable="true" data-width=""
                 data-align="center">字段1</th>
             <th data-field="field2" data-halign="center" data-sortable="true" data-width=""
                 data-align="center">字段2</th>
             <th data-field="field3" data-halign="center" data-sortable="true" data-width=""
                 data-align="center">字段3</th>
             <th data-field="field4" data-halign="center" data-sortable="true" data-width=""
                 data-align="center">字段4</th>
         </tr>
     </thead>
 </table>
 </div>

2、ajax的处理如下所示：

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

 function ajaxRequest(params) {
     var pageSize = params.data.limit;
     var pageNum = params.data.offset/pageSize + ;
     index = params.data.offset + ;

     var dataStr = "pageSize = " + pageSize
         + "&pageNum=" + pageNum
         + "&sort=" + params.data.sort    //排序的字段。
         + "&type=" + params.data.order;  // 排序的方式，排序升序或者降序。
     var url = 'xxxAction!findDataxxx.action';
     $.ajax({
         type : 'post',
         url : url,
         data : dataStr,
         dataType : 'json',
         global : false,
         async : true,
         success : function(data) {
             var count = ;
             var applies = [];
             if (data && data.result) {
                 applies = data.result.items ? data.result.items : [];
                 count = data.result.count;
             }
             params.success({
                 total : count,
                 rows : applies
             });
             params.complete();
         }
     });
 }

3、由于是公司自己封装的框架，自己的需求可以结合自己的实际情况。由于使用的是struts，自己根据自己需求搞吧。

 private String sort;
 private String type;
 自己定义自己的setter/getter。由于使用的是struts，自己根据自己需求搞吧。    

 public String findDataxxx() {
     Map<String, Object> params = new HashMap<>();
     Pagination<xxx> page = new Pagination<xxx>();
     page.setCounted(true);
     page.setSize(pageSize);
     page.setIndex(pageNum);
     Ordering order = new Ordering();
     //可以判断自己排序的列，然后判断一下，进行排序操作。由于是公司自己封装的框架，自己的需求可以结合自己的实际情况
     if("id".equals(sort)) {
         order.setName("name");
         order.setType("asc");
     }else if("name".equals(sort)) {
         order.setName("name");
         order.setType(type);
     }else if("field1".equals(sort)){
         order.setName("field1");
         order.setType(type);
     }else if("field2".equals(sort)){
         order.setName("field2");
         order.setType(type);
     }else if("field3".equals(sort)){
         order.setName("field3");
         order.setType(type);
     }else if("field4".equals(sort)){
         order.setName("field4");
         order.setType(type);
     }

     if (Detect.notEmpty(sourceCode)) {
         params.put("sourceCode", sourceCode);
     }
     if (Detect.notEmpty(startTime)) {
         params.put("startTime", startTime);
     }
     if (Detect.notEmpty(endTime)) {
         params.put("endTime", endTime);
     }
     //查询check数据表返回的数据
     Pagination<xxx> findDataxxx = xxxService.findDataxxx(params, order, page);
     dataMap.put("result", findDataxxx);
     return SUCCESS;
 }

效果图如下所示，所有列都可以点击排序操作：

待续......