Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >解决bootstrap-table-fixed-columns.js固定的列不能排序问题

解决bootstrap-table-fixed-columns.js固定的列不能排序问题

作者头像
tianyawhl
发布于 2019-04-04 01:59:45
发布于 2019-04-04 01:59:45
3.9K0
举报
文章被收录于专栏:前端之攻略前端之攻略

我们用bootstrap-table-fixed-columns插件固定列的时候,发现固定的列不能排序,其他的列是能排序的,需要修改下,

1、将插件的代码

var that = this, $trs = this.$header.find('tr').clone(); 修改为 var that = this, $trs = this.$header.find('tr').clone(true);

这样点击排序的功能是实现了,但是小图标没有变化,因为源码我也看不太明白,直接在外面写的js控制图标的变化。

2、另外写的js代码

 $(".fixed-table-header-columns").on("click", "th div.sortable", function() {             var sibling = $(this).parent().siblings().find("div.sortable")             if (!$(this).hasClass("asc") && !$(this).hasClass("desc")) {                 sibling.removeClass("asc desc")                 $(this).addClass("desc")             } else if ($(this).hasClass("asc")) {                 sibling.removeClass("asc desc")                 $(this).removeClass("asc desc").addClass("desc")             } else if ($(this).hasClass("desc")) {                 sibling.removeClass("asc desc")                 $(this).removeClass("asc desc").addClass("asc")             }         })          $(".fixed-table-header").on("click", "th div.sortable", function() {             $(".fixed-table-header-columns th div.sortable").removeClass("asc desc")         }) 

查看表格效果

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018/11/01 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
jQuery
    2.jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程。它的宗旨就是:“Write less, do more.“
changxin7
2022/05/06
9K0
jQuery
解决bootstrap-table-fixed-columns.js显示列与隐藏列按钮切换表格不对齐
含有data-show-columns="true"属性时会在右边显示可以切换列的按钮
tianyawhl
2019/04/04
5.7K0
Bootstrap Table 插件实现固定左侧列
bootstrap-table-fixed-columns.css与bootstrap-table-fixed-columns.js
tianyawhl
2019/04/04
4.7K0
BootstrapTable的列排序怎么搞
先搞一个table,使用ajax将数据查询出来,然后可以在所有列都加上排序。满足自己的需求。
别先生
2019/06/03
4.9K0
Ajax方式分页加载列表实现
  最近需要用到这个功能,所以这几天一直在研究这个,目前大致功能已实现,后续需要完善,但需要的功能点已完成,记录下;
JQ实验室
2022/02/09
3.5K0
JQuery 实现开发常用功能
标签克隆的两种实现方式: <body> <div> <p> <a onclick="Add(this)">+</a> <input type="text"/> </p> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script> function Add(ths) {
王瑞MVP
2022/12/28
5.4K0
Bootstrap Bootstrap表格插件bootstrap-table配置与应用小结
https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js
授客
2019/09/10
13.2K0
Bootstrap Bootstrap表格插件bootstrap-table配置与应用小结
Bootstrap3.Collapse.Expandable Table
以前写过一篇 collapse 的简单应用: Bootstrap.Collapse
szhshp
2022/09/21
9150
layui treeTable「建议收藏」
layui table结构不能很直观的展示层级信息,所以参考”https://fly.layui.com/extend/treeTable/“组件(layui版本为v2.5.6),修改为树形展示,修改了treeTable.js,保留了一些原table定义;
全栈程序员站长
2022/08/11
1.8K0
layui treeTable「建议收藏」
Bootstrap Table 插件自定义排序使用方法
Bootstrap Table 插件含有样式的数据如何排序,如下面的字段stargazers_count
tianyawhl
2019/09/10
2.3K0
jQuery
jQuery基础 1、    jQuery其实就是一个类库,集成了DOM/BOM/JavaScript的类库 http://jquery.cuishifeng.cn/这个网站里有所有的jQuery
coders
2018/01/04
4.6K0
jQuery
jQuery实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="jquery-3.2.1.min.js"></script> <style> * { margin: 0px; padding: 0px; } li { list-style: none; }
人生不如戏
2018/04/12
1.1K0
JqGridView 1.0.0.0发布
前几个月,客户要求显示列表做到列锁定+表头锁定+列组合,但从Extjs到Jquery EasyUi,从Jquery Grid到Telerik等等组件,发现无一符合条件,要么只能用列锁定,要么只能用列组合,当两者结合就不行了。于是只好开始自己琢磨了,然后就有了jqGridView。
雪雁-心莱科技
2018/12/27
6930
22.jQuery(实例)
1.开关灯效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } </style> </head> <body> <input id="i1" type="button" value="开关" /> <div class="c
zhang_derek
2018/04/11
1.7K0
四级地址插件升级改造(京东商城地址选择插件)city-picker
最近公司做的项目要和京东的数据做对接,所以要做个类似京东商品的详情页。页面的数据,是可以从京东接口获取到的,但是地址插件选择的效果需要自己实现。前端的同事在之前的项目中,已经选择了一款地址插件(city-picker.js),但是这款插件最多只支持三级地址,而且最主要的是这插件的地址数据来源,是写死在一个json文件中的,意思就是说,在使用这个插件的时候页面要一次性的把所有的地址数据都加载出来,这在pc端一般倒还可以承受,但是到了,移动端,随便一个手机就会卡死,浏览器直接崩溃。 经过在网上的各种查找,和研究
纪莫
2018/04/19
3.2K0
Vue 实现表格搜索、固定表头与排序 原
在搜索完,删除搜索内容后展示所有的内容,用computed就比较容易实现,思路:v-model绑定搜索关键字,在tbody的tr上v-for循环计算属性。methods也可以实现需要改成
tianyawhl
2019/04/04
2.5K0
04 . 前端之JQuery
JQuery简介 # 1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 # 2. jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便
iginkgo18
2020/09/27
3.5K0
基于bootstrap table 列表展示父子级
六月的雨在Tencent
2024/03/28
1440
基于bootstrap table 列表展示父子级
BootStrap-table的使用实现排序功能
BootStrap-table的使用实现排序功能 1.Bootstrap table 官网地址: http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 2.下载相应的包后引入 <script src="./js/jquery-3.1.1.js"></script> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="./bootstrap-3.3.
Dream城堡
2018/12/07
2.2K0
jquery学习
<1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team。
菲宇
2019/06/13
2.3K0
相关推荐
jQuery
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档