CODEWITHSUNDEEP
javascriptangulartypescript
Tejas
Tejas

Reputation: 97

Sort array on click of table heading

I want to sort array in both way (ascending and descending) automatically one by one on click of table heading

Here is the code I am using

SortLast() {
    this.students.sort(function (a, b) {
      var textA = a.lastName.toUpperCase();
      var textB = b.lastName.toUpperCase();
      if (textA < textB)
        return -1
      else if (textA > textB)
        return 1
      else
        return 0;
    });
  }

So I don't want to specify sort order, it automatically sort in one by one way and above array students is patched to grid on HTML.

Upvotes: 1

Views: 195

Answers (3)

BJ Coder
BJ Coder

Reputation: 402

sorting(arr, ascending) {    
    if (typeof (ascending) === "undefined")
      ascending = true;
    var multi = ascending ? 1 : -1;
    var sorter = function (a: { lastName: string; }, b: { lastName: string; }) {
      if (a.lastName === b.lastName)      // identical? return 0
        return 0;
      else if (a.lastName === 0)  // a is null? last 
        return 1;
      else if (b.lastName === 0)  // b is null? last
        return -1;
      else                  // compare, negate if descending
        return a.lastName.toString().localeCompare(b.lastName.toString()) * multi;
    }
    return arr.sort(sorter);
  }

Use this function like this.sorting(array[],false); // true for asc, false for desc

Upvotes: 0

filipe
filipe

Reputation: 2047

Store the sort state, then just sort asc or desc depending of last sort.

ASC = "asc"
DESC = "desc"

class Table {

    constructor(){
        this.sortDir = null;
        this.students = [{lastName: "John"}, {lastName: "Zoe"}, {lastName: "Ana"}];
    }

    isAsc(){ return this.sortDir === ASC; }
    isDesc(){ return this.sortDir === DESC; }

    sort() {
        const scope = this;
        this.sortDir = this.isAsc() ? DESC: ASC

        this.students.sort(function (a, b) {
            const textA = scope.isDesc() ? b.lastName.toUpperCase() :  a.lastName.toUpperCase();
            const textB = scope.isDesc() ?  a.lastName.toUpperCase() :  b.lastName.toUpperCase();
            return  (textA < textB) ? -1 : (textA > textB) ? 1 : 0
        });
    }
}

try:

const table = new Table()
console.log(table.sortDir,table.students)
table.sort()
console.log(table.sortDir, table.students)
table.sort()
console.log(table.sortDir, table.students)

output:

null [ { lastName: 'John' }, { lastName: 'Zoe' }, { lastName: 'Ana' } ]
asc [ { lastName: 'Ana' }, { lastName: 'John' }, { lastName: 'Zoe' } ]
desc [ { lastName: 'Zoe' }, { lastName: 'John' }, { lastName: 'Ana' } ]

Upvotes: 1

Syed Kashif
Syed Kashif

Reputation: 422

Try this,I hope it will help you

// asc
this.dataArray.sort(function(a, b){
    if(a.lastName.toString().toLowerCase() < b.lastName.toString().toLowerCase()) { return -1; }
    if(a.lastName.toString().toLowerCase() > b.lastName.toString().toLowerCase()) { return 1; }
});
// des
this.dataArray.sort(function(a, b){
    if(b.lastName.toString().toLowerCase() < a.lastName.toString().toLowerCase()) { return -1; }
    if(b.lastName.toString().toLowerCase() > a.lastName.toString().toLowerCase()) { return 1; }
}

Upvotes: 0

Related Questions