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 }
效果图如下所示,所有列都可以点击排序操作:
待续......
BootstrapTable的列排序怎么搞相关推荐
- bootstrap-table自定义列排序
bootstrap-table要实现排序的功能需要在给定的列添加两个属性 1:sortable(配置项)/data-sortable(html中的属性) 为true 2:如果列表中的数据是单纯的数值则 ...
- pandas对dataframe进行排序:单数据列排序、多数据列排序、NA值排序位置、排序算法
pandas对dataframe进行排序:单数据列排序.多数据列排序.NA值排序位置.排序算法 目录 pandas对dataframe进行排序 #仿真数据 #基于单数据列进行dataframe排序
- R语言dplyr包arrage函数排序dataframe实战:单列排序、多列排序、自定义排序
R语言dplyr包arrage函数排序dataframe实战:单列排序.多列排序.自定义排序 目录 R语言dplyr包arrage函数排序dataframe实战:单列排序.多列排序
- pymongo多结果进行多列排序的代码
将做工程过程中常用的一些代码收藏起来,下面的代码内容是关于pymongo多结果进行多列排序的代码. >>> db.Account.find().sort("UserName ...
- mysql 按两列排序吗_按两列排序MySQL表
噜噜哒 这可能有助于某人正在寻找通过两列排序表的方法,但是以相似的方式.这意味着使用聚合排序功能组合两种排序.例如,在使用全文搜索检索文章以及文章发布日期时,它非常有用.这只是一个例子,但是如果你理解 ...
- Java黑皮书课后题第8章:*8.27(列排序)用下面的方法实现一个二维数组中的列排序。返回新数组,且原数组保持不变。编写一个测试程序,提示用户输入一个3*3的double型矩阵,显示一个排好的矩阵
*8.27(列排序)用下面的方法实现一个二维数组中的列排序.返回新数组,且原数组保持不变.编写一个测试程序,提示用户输入一个3*3的double型矩阵,显示一个排好的矩阵 题目 题目描述与运行示例 破 ...
- Java黑皮书课后题第8章:*8.16(对二维数组排序)编写一个方法,使用下面的方法头对二维数组排序。这个方法首先按行排序,然后按列排序
*8.16(对二维数组排序)编写一个方法,使用下面的方法头对二维数组排序.这个方法首先按行排序,然后按列排序 题目 题目描述 破题 代码 运行实例 题目 题目描述 *8.16(对二维数组排序)编写一个 ...
- java多维数组按照某一列排序,PHP实现二维数组按某列进行排序的方法
本文实例讲述了PHP实现二维数组按某列进行排序的方法.分享给大家供大家参考,具体如下: /* * 二维数组 按某列排序 * array_multisort($arr1,$arr2) * 手册 例子如下 ...
- HDU2068(错列排序)
Problem Descrption 今年暑假杭电ACM集训队第一次组成女生队,其中有一队叫RPG,但做为集训队成员之一的野骆驼竟然不知道RPG三个人具体是谁谁.RPG给他机会让他猜猜,第一次猜:R是 ...
- python二维数组排序_Python实现二维数组按照某行或列排序的方法【numpy lexsort】...
本文实例讲述了Python实现二维数组按照某行或列排序的方法.分享给大家供大家参考,具体如下: lexsort支持对数组按指定行或列的顺序排序:是间接排序,lexsort不修改原数组,返回索引. (对 ...
最新文章
- 喜闻乐见的const int *p、int* const p、const int* const p
- 华为持续引领,开辟5G Massive MIMO绿色新赛道
- android 退出程序解决内存释放so的问题
- memcache分布式 [一致性hash算法] 的php实现
- hibernate mysql 主从_MYSQL主从复制和写分离
- java 反射的效率_如何提高使用Java反射的效率?
- Python案例:四种方法判断回文字符串
- 【Spring】配置SpringBoot同时支持http和https访问
- 海龟交易法则06_掌握优势
- 创业型公司如何找有相同价值观的人(转)
- sql必知必会 案例数据库安装教程
- 增强型绿植植被指数_植被指数--数据产品-国家青藏高原科学数据中心
- 服务器虚拟机迁移的6个步骤,KVM 虚拟机迁移(示例代码)
- 机器人技术(7)AtdRobot六自由度机械臂控制教程
- 欧拉环游和中国邮递员问题
- 中央广播电视大学中等专业办公设备使用与维护
- 实践数据湖iceberg 第十课 快照删除
- 学在信息——一方豪杰
- 服务器电池维修,服务器电池电量低判断方法
- 马云谈“大数据”:很多人对这三个字有误解
热门文章
- python中整数类型取值范围有没有限制_python 数据库取值范围内
- 算法工程师大致是做什么的
- android 中角度计算
- kali linux怎么安装无线网卡驱动,Kali Linux 安装BCM43142网卡驱动
- 2020-Point attention network for semantic segmentation of 3D point clouds
- 【干货】实例讲解:跨部门沟通和与领导沟通的心得与技巧
- 阿里二面:设计一个电商平台积分兑换系统!
- PowerDesigner清理注册表
- oob袋外估计matlab,机器学习:随机森林RF-OOB袋外错误率
- 【树莓派】树莓派系统安装