点击上下箭头对数据排序

本文介绍了如何通过点击上下箭头来实现数据表格中的排序功能。内容涉及前端开发中的事件监听、数据处理和DOM操作,详细讲解了点击箭头后如何切换升序和降序,并更新表格展示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

public R sort(Long tid, String type) {
    try {
        Courescatalog a = getById(tid);
        if (type.equals("up")) {
            LambdaQueryWrapper<Courescatalog> qw1 = new LambdaQueryWrapper<>();
            qw1.and(it -> it.eq(Courescatalog::getCid, a.getCid()).eq(Courescatalog::getSort, a.getSort() - 1));
            Courescatalog b = getOne(qw1);
            Courescatalog m = getById(b.getTid());
            m.setSort(m.getSort() + 1);
            updateById(m);
            a.setSort(a.getSort() - 1);
            updateById(a);
            return R.ok(null);
        } else {
            LambdaQueryWrapper<Courescatalog> qw1 = new LambdaQueryWrapper<>();
            qw1.and(it -> it.eq(Courescatalog::getCid, a.getCid()).eq(Courescatalog::getSort, a.getSort() + 1));
            Courescatalog b = getOne(qw1);
            Courescatalog m = getById(b.getTid());
            m.setSort(m.getSort() - 1);
            updateById(m);
            a.setSort(a.getSort() + 1);
            updateById(a);
            return R.ok(null);
        }
    } catch (Exception e) {
        return R.error("排序失败:已达到后一级。");
    }
}
在JSP中实现数据排序需要借助前端的JavaScript来实现,可以使用jQuery插件或者原生JavaScript来实现。下面提供一种基于jQuery插件的实现方式: 1. 引入jQuery和jQuery插件,如tablesorter.js ```html <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js"></script> ``` 2. 在JSP页面中定义一个table表格,并在表格头部添加上下箭头图标 ```html <table id="table"> <thead> <tr> <th>列1</th> <th>列2</th> <th>列3<i class="fa fa-sort"></i></th> </tr> </thead> <tbody> <tr> <td>数据1</td> <td>数据2</td> <td>数据3</td> </tr> ... </tbody> </table> ``` 3. 添加JavaScript代码,初始化tablesorter插件并绑定排序事件 ```javascript $(document).ready(function() { $("#table").tablesorter({ headers: { 2: { sorter: "digit" } // 列3按照数字进行排序 } }); $("#table th").click(function() { // 点击表头时切换排序状态 var index = $(this).index(); var sortList = [[index, 0]]; if ($(this).hasClass("headerSortUp")) { sortList = [[index, 1]]; } $("#table").trigger("sorton", [sortList]); }); }); ``` 4. 添加CSS代码,设置箭头图标的样式 ```css .fa-sort { margin-left: 5px; cursor: pointer; } .fa-sort:before { content: "\f0dc"; } .fa-sort.headerSortUp:before { content: "\f0de"; } .fa-sort.headerSortDown:before { content: "\f0dd"; } ``` 这样就可以在JSP页面中实现数据排序,并且在表头上添加上下箭头图标来表示当前的排序状态。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值