javascript - How can I add arrow class on table sort header? - Stack Overflow

admin管理员组

文章数量:1389797

I am trying to have sorting on table header. I am able to utilize this but I wanted to add arrows on click on header (asc/desc) or maybe a class to toggle which I can do it from css.

sort(property) {
    this.isDesc = !this.isDesc; //change the direction    
    this.column = property;
    let direction = this.isDesc ? 1 : -1;

    this.records.sort(function (a, b) {
      if (a[property] < b[property]) {
        return -1 * direction;
      }
      else if (a[property] > b[property]) {
        return 1 * direction;
      }
      else {
        return 0;
      }
    });
  };

Thanks for your help.

Happy New Year!

I am trying to have sorting on table header. I am able to utilize this https://stackblitz./edit/angular-sort-filter but I wanted to add arrows on click on header (asc/desc) or maybe a class to toggle which I can do it from css.

sort(property) {
    this.isDesc = !this.isDesc; //change the direction    
    this.column = property;
    let direction = this.isDesc ? 1 : -1;

    this.records.sort(function (a, b) {
      if (a[property] < b[property]) {
        return -1 * direction;
      }
      else if (a[property] > b[property]) {
        return 1 * direction;
      }
      else {
        return 0;
      }
    });
  };

Thanks for your help.

Happy New Year!

• javascript
• angular
• typescript
• toggle

Share Improve this question Follow asked Jan 5, 2021 at 0:12 Kunal VijanKunal Vijan 45722 gold badges1010 silver badges3434 bronze badges 2

• 1 I'm confused what this code has to do with arrows. – evolutionxbox Commented Jan 5, 2021 at 0:13
• If you want arrows. You could use a service like fontawesome. They have a good selection of icons for free. And you could insert them right into your html. fontawesome./icons?d=gallery&q=arrow – Alanaj Commented Jan 5, 2021 at 0:35

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

In css:

.pointer.active.desc:after {
  content: "▲";
}
.pointer.active.asc:after {
  content: "▼";
}

In template:

<div class="form-group">
    <div class="col-md-6">
        <input type="text" [(ngModel)]="searchText"
           class="form-control" placeholder="Search By Category" />
  </div>
    </div>

    <div class="col-md-12">
        <table class="table table-responsive table-hover">
            <tr>
                <th [ngClass]="{pointer: true, active:column=='CategoryID',desc:isDesc, asc:!isDesc}"
                    (click)="sort('CategoryID')">
                    Category ID</th>
                <th [ngClass]="{pointer: true, active:column=='CategoryName',desc:isDesc, asc:!isDesc}"
                    (click)="sort('CategoryName')">
                    Category</th>
                <th [ngClass]="{pointer: true, active:column=='Description',desc:isDesc, asc:!isDesc}"
                    (click)="sort('Description')">
                    Description</th>
            </tr>
            <tr *ngFor="let item of records | category : searchText">
                <td>{{item.CategoryID}}</td>
                <td>{{item.CategoryName}}</td>
                <td>{{item.Description}}</td>
            </tr>
        </table>
    </div>

try

You can create a method to get the right symbol for your headers

In your class, create this method:

arrow(columnName) {
  if (this.column === columnName) {
    return this.isDesc ? '↑' : '↓';
  }
  return '';
}

In you template, change each header to be like:

<th class="pointer" (click)="sort('CategoryID')">
    Category ID
    <span [innerHTML]="arrow('CategoryID')"></span>
</th>

same on each header

本文标签： javascriptHow can I add arrow class on table sort headerStack Overflow