CODEWITHSUNDEEP
javascriptangularpagination
LordGrim
LordGrim

Reputation: 751

Angular Pagination

What's the best practice for Angular pagination or any pagination?

Is using pagination libraries a good practice? When I use pagination library, It will load all

the data and separate into many pages but what if there's a thousands of datas,

it will become slower right? I'm thinking, when I load the page it will just get the datas for this page only. Like when you click Page 2. It will request another data. You will just get the data for this page when you click that page. It won't load all datas at once. But I'm confused. I don't have any idea how to do it.

For example, numbers 1 to 10 is for Page 1 only. and numbers 11 to 20 is for page 2. I got headache thinking about how to know whether 11 to 20 is for page 2 only when you request data.

Is it a good practice to just use pagination where I will load all the data and separate it in pages? Or request data for pages? I'm still confused. I hope there's somebody who can enlighten me and help me.

Upvotes: 2

Views: 3387

Answers (4)

Ankit
Ankit

Reputation: 671

export class PaginationComponent {
constructor() {}

// get number of rows/items from response
  @Input() totalItems: number;

  // get current page to display
  @Input() currentPage: number;

// number of records shows in single page
  @Input() limit: number;

// number of page link shows at a time
  @Input() visible_items: number = 4;

// send which page lnk clicked to parent
  @Output() childEvent = new EventEmitter<any>();


// count total pages
  private count_total_pages(): number {
    return Math.ceil(this.totalItems / this.limit);
  }

// calculate page number to shows
  getPages(): number[] {
    let page_arr: number[] = [],
      total_page: number = this.count_total_pages(),
      last_page = Number(this.currentPage) + this.visible_items,
      last_page_index = last_page > total_page ? total_page : last_page,
      first_page = Number(this.currentPage) - this.visible_items,
      first_page_index = first_page < 1 ? 1 : first_page;

    for (let i = first_page_index; i <= last_page_index; i++) page_arr.push(i);

    return page_arr;
  }
}

Upvotes: 0

Behnam
Behnam

Reputation: 6459

You can implement your UI in angular for pagination and use Pagino to handle pagination logic https://github.com/pagino/pagino-js

Upvotes: 0

sivamani
sivamani

Reputation: 545

Step:1
npm install ngx-pagination --save

Step:2
app.module.ts
import {NgxPaginationModule} from 'ngx-pagination';
@NgModule({
    imports: [BrowserModule, NgxPaginationModule], // <-- include it in your app module
    declarations: [MyComponent],
    bootstrap: [MyComponent]
})

Step:3
app.component.html

<div class="col-md-3">
   <input type="text" class="form-control" placeholder="Search by brand/year/color 
       " [(ngModel)]="term">
</div>

<div class="col-lg-6" *ngFor="let car of data |filter:term | paginate: 
  {itemsPerPage:6, currentPage: p}">

  //Bind your data here//

</div>

<div class="container">
    <div class="pagination">
        <pagination-controls (pageChange)="p=$event"></pagination-controls>
    </div>
</div>

Upvotes: 1

Jahid
Jahid

Reputation: 31

You can try ui-bootstrap pagination in a very easy way with Angularjs. In your HTML file write the below code for the page number buttons.

For ui-bootstrap-tpls 2.x.x -

<ul uib-pagination total-items="filteredData.length" ng-model="currentPage" max-size="maxSize" class="pagination-sm pagination" rotate="false" boundary-links="true" items-per-page="itemsPerPage"></ul>

For ui-bootstrap-tpls 1.x.x -

<uib-pagination total-items="filteredData.length" ng-model="currentPage" max-size="maxSize" class="pagination-sm pagination" rotate="false" boundary-links="true" items-per-page="itemsPerPage"></uib-pagination>

For ui-bootstrap-tpls 0.x.x -

<pagination total-items="filteredData.length" ng-model="currentPage" max-size="maxSize" class="pagination-sm pagination" rotate="false" boundary-links="true" items-per-page="itemsPerPage"></pagination>

In javascript controller write:

$scope.currentPage = 1;
$scope.itemsPerPage = 5;
$scope.maxSize = 5; //Number of pager buttons to show

Your ng-repeat should be as like:

<tr ng-repeat="cate in filteredData = (categoryList | filter : search:Name) | limitTo:itemsPerPage:itemsPerPage*(currentPage-1) track by $index">
   <td>{{$index+1}}</td>
   <td>{{cate.Name}}</td>
   <td>{{cate.Description}}</td>
</tr>

You will have to include the following files to your HTML head.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>    
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

>> View Live Demo <<

Upvotes: 1

Related Questions