diff --git a/src/body.js b/src/body.js index 077245c6..69af332a 100644 --- a/src/body.js +++ b/src/body.js @@ -297,6 +297,12 @@ var Body = Backgrid.Body = Backbone.View.extend({ collection.setSorting(order && column.get("name"), order, {sortValue: column.sortValue()}); + this.columns.each(function(model, index) { + if (model.get('name') !== column.get('name')) { + model.set('direction', null); + } + }); + if (collection.fullCollection) { // If order is null, pageable will remove the comparator on both sides, // in this case the default insertion order comparator needs to be diff --git a/src/header.js b/src/header.js index 26ecb12e..f32fafd9 100644 --- a/src/header.js +++ b/src/header.js @@ -56,16 +56,31 @@ var HeaderCell = Backgrid.HeaderCell = Backbone.View.extend({ if (Backgrid.callByNeed(column.sortable(), column, collection)) $el.addClass("sortable"); if (Backgrid.callByNeed(column.renderable(), column, collection)) $el.addClass("renderable"); - this.listenTo(collection.fullCollection || collection, "backgrid:sorted", this.removeCellDirection); + this.listenTo(collection.fullCollection || collection, "backgrid:sorted", this.refreshCellDirection); }, /** - Event handler for the collection's `backgrid:sorted` event. Removes - all the CSS direction classes. + Event handler for the collection's `backgrid:sorted` event. Refreshes the CSS + direction classes. */ - removeCellDirection: function () { - this.$el.removeClass("ascending").removeClass("descending"); - this.column.set("direction", null); + refreshCellDirection: function (collection) { + // If this is a pageable collection and is in an active sort state, + // preserve the existing sort classes on related headers + if (Backbone.PageableCollection && + collection instanceof Backbone.PageableCollection && + this.$el.hasClass(collection.state.sortKey) && + collection.state.order !== 0) { + if (collection.state.order > 0) { + this.$el.removeClass("ascending").addClass("descending"); + this.column.set("direction", "descending"); + } else { + this.$el.removeClass("descending").addClass("ascending"); + this.column.set("direction", "ascending"); + } + } else { + this.$el.removeClass("ascending").removeClass("descending"); + this.column.set("direction", null); + } }, /**