专栏首页别先生BootstrapTable的列排序怎么搞

BootstrapTable的列排序怎么搞

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 }

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

待续......

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 利用BootStrap Table插件实现自己的弹出框分页。

    参考链接1:     官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/home/         开始使用:h...

    别先生
  • BootstrapTable,选中某几行,获取其数据并进行后台处理。以及其他的属性使用。

    1、首先将复选框搞出来,<table data-single-select="true"> 属性,限制了只能单选。去除以后添加<th data-checkbox...

    别先生
  • ajax导致Echarts不显示饼图数据、柱状图数据只显示气泡的问题。

      ajax的同步。这个同步的意思是当JS代码加载到当前ajax的时候会把页面里所有的代码停止加载,页面出去假死状态,当这个ajax执行完毕后才会继续运行其他代...

    别先生
  • 采用HTML5之"data-"机制自由提供数据

    周末总是过得很快,又到了跟代码亲密接触的日子,我在北京向各位问好,今天我分享一点关于前端的东西,HTML5之标签"data-*"自定义属性的值传递。     ...

    赵小忠
  • [半zz]迅雷笔试题

    用户1130771
  • 通过空气质量指数AQI学习统计分析并进行预测(上)

    AQI(空气质量指数),用来衡量空气清洁或者污染的程度。值越小,表示空气质量越好。近年来,因为环境问题,空气质量也越来越受到人们的重视。

    朱小五
  • 使用 Python 实现几种常见的排序算法

    冒泡排序是最为基础的排序算法,其核心思想就是相邻元素两两比较,把较大的元素放到后面,在一轮比较完成之后,最大的元素就位于最后一个位置了,就好像是气泡,慢慢的浮出...

    周萝卜
  • 讲讲切比雪夫定理

    前面讲了大数定理,讲了中心极限定理,有读者留言让讲讲切比雪夫定理,安排。这一篇就来讲讲切比雪夫定理。

    张俊红
  • C++ string实现

    作为C++从业者,我相信都会被考察过实现简单的string类,包括构造、析构、拷贝构造以及赋值拷贝等,因为这能够很好的考察面试者的C++基本功。借看《剑指off...

    evenleo
  • pandas的一些小知识

    生信编程日常

扫码关注云+社区

领取腾讯云代金券