Skip to content

Instantly share code, notes, and snippets.

@sufiiiyan
Created March 30, 2020 07:29
Show Gist options
  • Save sufiiiyan/659c1718b1dc29debe73d778f67c3b92 to your computer and use it in GitHub Desktop.
Save sufiiiyan/659c1718b1dc29debe73d778f67c3b92 to your computer and use it in GitHub Desktop.
table search sorting

npm i ng2-search-filter --save npm install ng2-order-pipe --save

{ "name": "search-sort-pagination-angular2", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "^7.2.7", "@angular/common": "^7.2.7", "@angular/compiler": "^7.2.7", "@angular/core": "^7.2.7", "@angular/forms": "^7.2.7", "@angular/http": "^7.2.7", "@angular/platform-browser": "^7.2.7", "@angular/platform-browser-dynamic": "^7.2.7", "@angular/platform-server": "^7.2.7", "@angular/router": "^7.2.7", "bootstrap": "^3.3.7", "core-js": "^2.6.5", "ng2-order-pipe": "^0.1.5", "ng2-search-filter": "^0.4.7", "ngx-pagination": "^3.2.1", "rxjs": "^6.4.0", "rxjs-compat": "^6.4.0", "tslib": "^1.9.0", "zone.js": "^0.8.29" }, "devDependencies": { "@angular-devkit/build-angular": "~0.13.0", "@angular/cli": "^7.3.4", "@angular/compiler-cli": "^7.2.7", "@types/jasmine": "^3.3.9", "@types/node": "^11.10.4", "codelyzer": "^4.5.0", "jasmine-core": "^3.3.0", "jasmine-spec-reporter": "^4.2.1", "karma": "^4.0.1", "karma-chrome-launcher": "^2.2.0", "karma-cli": "^2.0.0", "karma-coverage-istanbul-reporter": "^0.2.0", "karma-jasmine": "^2.0.1", "karma-jasmine-html-reporter": "^1.4.0", "protractor": "^5.4.2", "rxjs-tslint": "^0.1.7", "ts-node": "~2.0.0", "tslint": "^5.13.1", "typescript": "^3.2.1", "webpack": "^4.29.6" } }

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { Ng2SearchPipeModule } from 'ng2-search-filter'; //importing the module
import { Ng2OrderModule } from 'ng2-order-pipe'; //importing the module
import {NgxPaginationModule} from 'ngx-pagination'; // <-- import the module
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
Ng2SearchPipeModule, //including into imports
Ng2OrderModule, // importing the sorting package here
NgxPaginationModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
<header>
<nav class="navbar navbar-default">
<a class="navbar-brand" href="#">Ma Games</a>
</nav>
</header>
<div class="container">
<div class="row">
<nav class="navbar">
<input class="form-control" type="text" name="search" [(ngModel)]="filter">
</nav>
<table class="table">
<thead>
<tr>
<th>#</th>
<th (click)="sort('name')">Name
<span class="glyphicon sort-icon" *ngIf="key =='name'" [ngClass]="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th (click)="sort('genre')">Genre
<span class="glyphicon sort-icon" *ngIf="key =='genre'" [ngClass]="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let game of games | orderBy: key : reverse | filter:filter | paginate: { itemsPerPage: 5, currentPage: p }; let i = index">
<td>{{i}}</td>
<td>{{game.name}}</td>
<td>{{game.genre}}</td>
</tr>
</tbody>
<pagination-controls (pageChange)="p = $event"></pagination-controls>
</table>
</div>
</div>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
games = [
{
"id":"1",
"name": "DOTA 2",
"genre": "Strategy"
},
{
"id":"2",
"name": "AOE 3",
"genre": "Strategy"
},
{
"id":"3",
"name": "GTA 5",
"genre": "RPG"
},
{
"id":"4",
"name": "Far Cry 3",
"genre": "Action"
},
{
"id":"5",
"name": "GTA San Andreas",
"genre": "RPG"
},
{
"id":"6",
"name": "Hitman",
"genre": "Action"
},
{
"id":"7",
"name": "NFS MW",
"genre": "Sport"
},{
"id":"8",
"name": "Fifa 16",
"genre": "Sport"
},{
"id":"9",
"name": "NFS Sen 2",
"genre": "Sport"
},{
"id":"10",
"name": "Witcher Assassins on King",
"genre": "Adventure"
}
];
//sorting
key: string = 'name';
reverse: boolean = false;
sort(key){
this.key = key;
this.reverse = !this.reverse;
}
p: number = 1;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment