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 }

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

待续......

posted @ 2019-04-02 20:09 别先生 阅读(...) 评论(...) 编辑 收藏

BootstrapTable的列排序怎么搞相关推荐

  1. bootstrap-table自定义列排序

    bootstrap-table要实现排序的功能需要在给定的列添加两个属性 1:sortable(配置项)/data-sortable(html中的属性) 为true 2:如果列表中的数据是单纯的数值则 ...

  2. pandas对dataframe进行排序:单数据列排序、多数据列排序、NA值排序位置、排序算法

    pandas对dataframe进行排序:单数据列排序.多数据列排序.NA值排序位置.排序算法 目录 pandas对dataframe进行排序 #仿真数据 #基于单数据列进行dataframe排序

  3. R语言dplyr包arrage函数排序dataframe实战:单列排序、多列排序、自定义排序

    R语言dplyr包arrage函数排序dataframe实战:单列排序.多列排序.自定义排序 目录 R语言dplyr包arrage函数排序dataframe实战:单列排序.多列排序

  4. pymongo多结果进行多列排序的代码

    将做工程过程中常用的一些代码收藏起来,下面的代码内容是关于pymongo多结果进行多列排序的代码. >>> db.Account.find().sort("UserName ...

  5. mysql 按两列排序吗_按两列排序MySQL表

    噜噜哒 这可能有助于某人正在寻找通过两列排序表的方法,但是以相似的方式.这意味着使用聚合排序功能组合两种排序.例如,在使用全文搜索检索文章以及文章发布日期时,它非常有用.这只是一个例子,但是如果你理解 ...

  6. Java黑皮书课后题第8章:*8.27(列排序)用下面的方法实现一个二维数组中的列排序。返回新数组,且原数组保持不变。编写一个测试程序,提示用户输入一个3*3的double型矩阵,显示一个排好的矩阵

    *8.27(列排序)用下面的方法实现一个二维数组中的列排序.返回新数组,且原数组保持不变.编写一个测试程序,提示用户输入一个3*3的double型矩阵,显示一个排好的矩阵 题目 题目描述与运行示例 破 ...

  7. Java黑皮书课后题第8章:*8.16(对二维数组排序)编写一个方法,使用下面的方法头对二维数组排序。这个方法首先按行排序,然后按列排序

    *8.16(对二维数组排序)编写一个方法,使用下面的方法头对二维数组排序.这个方法首先按行排序,然后按列排序 题目 题目描述 破题 代码 运行实例 题目 题目描述 *8.16(对二维数组排序)编写一个 ...

  8. java多维数组按照某一列排序,PHP实现二维数组按某列进行排序的方法

    本文实例讲述了PHP实现二维数组按某列进行排序的方法.分享给大家供大家参考,具体如下: /* * 二维数组 按某列排序 * array_multisort($arr1,$arr2) * 手册 例子如下 ...

  9. HDU2068(错列排序)

    Problem Descrption 今年暑假杭电ACM集训队第一次组成女生队,其中有一队叫RPG,但做为集训队成员之一的野骆驼竟然不知道RPG三个人具体是谁谁.RPG给他机会让他猜猜,第一次猜:R是 ...

  10. python二维数组排序_Python实现二维数组按照某行或列排序的方法【numpy lexsort】...

    本文实例讲述了Python实现二维数组按照某行或列排序的方法.分享给大家供大家参考,具体如下: lexsort支持对数组按指定行或列的顺序排序:是间接排序,lexsort不修改原数组,返回索引. (对 ...

最新文章

  1. 喜闻乐见的const int *p、int* const p、const int* const p
  2. 华为持续引领,开辟5G Massive MIMO绿色新赛道
  3. android 退出程序解决内存释放so的问题
  4. memcache分布式 [一致性hash算法] 的php实现
  5. hibernate mysql 主从_MYSQL主从复制和写分离
  6. java 反射的效率_如何提高使用Java反射的效率?
  7. Python案例:四种方法判断回文字符串
  8. 【Spring】配置SpringBoot同时支持http和https访问
  9. 海龟交易法则06_掌握优势
  10. 创业型公司如何找有相同价值观的人(转)
  11. sql必知必会 案例数据库安装教程
  12. 增强型绿植植被指数_植被指数--数据产品-国家青藏高原科学数据中心
  13. 服务器虚拟机迁移的6个步骤,KVM 虚拟机迁移(示例代码)
  14. 机器人技术(7)AtdRobot六自由度机械臂控制教程
  15. 欧拉环游和中国邮递员问题
  16. 中央广播电视大学中等专业办公设备使用与维护
  17. 实践数据湖iceberg 第十课 快照删除
  18. 学在信息——一方豪杰
  19. 服务器电池维修,服务器电池电量低判断方法
  20. 马云谈“大数据”:很多人对这三个字有误解

热门文章

  1. python中整数类型取值范围有没有限制_python 数据库取值范围内
  2. 算法工程师大致是做什么的
  3. android 中角度计算
  4. kali linux怎么安装无线网卡驱动,Kali Linux 安装BCM43142网卡驱动
  5. 2020-Point attention network for semantic segmentation of 3D point clouds
  6. 【干货】实例讲解:跨部门沟通和与领导沟通的心得与技巧
  7. 阿里二面:设计一个电商平台积分兑换系统!
  8. PowerDesigner清理注册表
  9. oob袋外估计matlab,机器学习:随机森林RF-OOB袋外错误率
  10. 【树莓派】树莓派系统安装