解决bootstrap table展示字段和排序字段不一致问题

南码少年

已于 2023-07-21 08:51:20 修改

阅读量3.3k

点赞数

分类专栏： bootstrap bootstrap-table 文章标签： bootstrap-table bootstrap

于 2018-06-19 21:00:30 首次发布

本文链接：https://blog.youkuaiyun.com/envy_L/article/details/80738991

版权

bootstrap-table 同时被 2 个专栏收录

2 篇文章

订阅专栏

bootstrap

1 篇文章

订阅专栏

本文提供了一种针对BootstrapTable排序图标显示不正确的问题解决方案。通过修改onSort方法，解决了展示字段与排序字段不一致的问题，并确保了排序图标能正确显示。

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

针对网上没有处理最后的排序图标问题。现提供完整的修改方案，如下：

BootstrapTable.prototype.onSort = function (event) {
        var $this = event.type === "keypress" ? $(event.currentTarget) : $(event.currentTarget).parent(),
            $this_ = this.$header.find('th').eq($this.index());

        this.$header.add(this.$header_).find('span.order').remove();

        if (this.options.sortName === $this.data('field')) {
            this.options.sortOrder = this.options.sortOrder === 'asc' ? 'desc' : 'asc';
        } else {
            //this.options.sortName = $this.data('field');
            //解决展示字段和排序字段不一致问题
            this.options.sortName = $this.data('sortName') ? $this.data('sortName') : $this.data('field');
            this.options.sortOrder = $this.data('order') === 'asc' ? 'desc' : 'asc';
        }
        this.trigger('sort', this.options.sortName, this.options.sortOrder);

        $this.add($this_).data('order', this.options.sortOrder);

        // Assign the correct sortable arrow
        this.getCaret();

        if (this.options.sidePagination === 'server') {
            this.initServer(this.options.silentSort);
            return;
        }

        this.initSort();
        this.initBody();
    };

BootstrapTable.prototype.getCaret = function () {
        var that = this;

        $.each(this.$header.find('th'), function (i, th) {
           	//$(th).find('.sortable').removeClass('desc asc').addClass($(th).data('field') === that.options.sortName === that.options.sortName ? that.options.sortOrder : 'both');
        	//解决展示字段和排序字段不一致问题
        	$(th).find('.sortable').removeClass('desc asc').addClass(($(th).data('field') === that.options.sortName || $(th).data('sortName') === that.options.sortName) ? that.options.sortOrder : 'both');
        });
 };