Pagination with Angular Datatables

Posted By : Shashwat Gupta | 29-Oct-2017

What is Angular DataTables

Angular Data Tables is basically directive of Angular JS for representing huge data-sets. this Plugin has all the features that you might expect from any other data table plugin and moreover its very light weighted package with no external dependencies.

 

Features

  • large data sets Handled by it
  • Right and Left Column Pinning
  • Column Reordering
  • Column Resizing
  • Intelligent Column Width Algorithms ( Force fill / Flex-grow )
  • Horizontal/Vertical Scrolling
  • Virtual Paging WITH linked traditional pager
  • Tree Grids

Download

With Bower npm install [email protected]

Installation

Zero configuration

 

Ajax Call

.

The Angular way

You can build your table the "angular" way, eg you can use the directive ng-repeat on tr tag. first you need to do is to add the datatable directive with the value ng on your table in order to make it rendered with DataTables. Note: If you want to use the Angular way for showig the table along with the promise or the Ajax solution, then set the properties ng in the directive datatable for tell the directive to use the Angular way!

 

Server side processing

There was times when accessing data from the DOM is simply too unwieldy or slow particularly when dealing with many thousands or millions of dataset rows. To use this DataTables server-side processing feature gives us a method to do all "heavy lifting" be done by a database engine on the server-side (they are all quite highly optimised for this use case!), and then have that provide information in the user's web-browser. Consequently, you would display tables with consisting of millions of rows with ease. When you are using server-side Features, DataTables will make an Ajax xHR request to the server for each row of the information on the page (i.e. ordering,paging, searching, etc.) return the data in the format required by DataTables plugin Server-side processing Featur is enabled by using option "serverSideDT" , and configured using ajaxDT.;

 

With the DataTables Column Filter

The angular-datatables also provides an API for fixed Column You have to add the file angular-datatables.columnfilter.min.js to your HTML file. and add the dependency datatables.columnfilter to your Angular app.

About Author

Author Image
Shashwat Gupta

Shashwat is a bright Mean Stack Developer . He has good experience in development of complex UI's of web application and hybrid mobile applications.

Request for Proposal

Name is required

Comment is required

Sending message..