1、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>
2、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 }
3、由于是公司自己封装的框架,自己的需求可以结合自己的实际情况。由于使用的是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 }
效果图如下所示,所有列都可以点击排序操作:
待续......
来源:oschina
链接:https://my.oschina.net/u/4360005/blog/3588478