您现在的位置是：网站首页> 编程资料编程资料

jquery点击实现升序降序图标切换_jquery_

2023-05-24 360人已围观

简介 jquery点击实现升序降序图标切换_jquery_

本文实例为大家分享了jquery点击实现升序降序图标切换的具体代码，供大家参考，具体内容如下

需求: 有一个查询结果,返回的是表格的形式,点击表头任何一列,都能实现升序/降序的UI变换,同时表格内容该列也升序降序排列.支持分页.

实现步骤:

1.css

.table-sort {     display: inline-block;     width: 10px;     height: 20px;     margin-left: 5px;     cursor: pointer !important;     vertical-align: middle;     position: relative }   .table-sort i {     border: 6px dashed transparent;     position: absolute;     left: 5px }   .table-sort .sort-asc {     top: 2px;     border-top: none;     border-bottom-style: solid;     border-bottom-color: #b2b2b2 }   .table-sort .sort-asc.cur, .table-sort .sort-asc:hover {     border-bottom-color: #fff }   .table-sort .sort-desc {     bottom: 3px;     border-bottom: none;     border-top-style: solid;     border-top-color: #b2b2b2 }   .table-sort .sort-desc.cur, .table-sort .sort-desc:hover {     border-top-color: #fff }

2.html部分:

在相应的表头加上样式: sortIndex_? 这个用来标识列,比如一个表格有5个列需要有排序功能,就可以依次设置5个th sortIndex_1 、sortIndex_2 ……

     面积 (亩)                                   人数 (位)

3. html部分,写在form标签以内,需要提交给后台的隐藏表单: orderByIndex- 标识第几列需要排序; ascOrDesc-标识需要升序还是降序

4.javaScript部分

最终效果图:第1列,第2列实现了手动排序. (注意,一次操作,只能对一列排序,其它列的排序不会被点亮.)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

上一篇：vue parseHTML函数源码解析start钩子函数_vue.js_

下一篇：javascript 实现纯前端将数据导出excel两种方式_javascript技巧_

您现在的位置是：网站首页> 编程资料编程资料

jquery点击实现升序降序图标切换_jquery_

相关内容

点击排行

本栏推荐

猜你喜欢