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.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
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.