We have a demo.json file which contains data into json format.We will make an Ajax request using $http and fetch the data into a $scope variable.
$scope.usersInfo = response; //ajax request to fetch data into $scope.data
Implement Pagination Feature
Angular has no built in functionality for Pagination.Now angular introduce some third party libraries for pagination.We are using dirPagination in our demo.
Implement pagination to the application first we need to include dirPagination.js file to our index.html.
To get dirPagination library you can download it by running-
bower install angular-utils-pagination
Or you can download it manually from below link: dirPagination.js
After include the above dirPagination.js into index.html then add angularUtils.directives.dirPagination as dependency to the module.
For pagination we can use dir-paginate directive.This directive work as ng-repeat.Now we will use itemsPerPage filter provide by this directive. This creates difference between ng-repeat and dir-pagination directive.
itemPerPage is used for display items per page.
<tr dir-paginate="user in users|orderBy:sortKey:reverse|filter:search|itemsPerPage:5">
Now dir-pagination-controls uses for controls the pagination which provides by dirPagination.Now we can navigate our table to different pages.
max-size=“5” Used to display maximum number of pages.
direction-links=“true” Direction links are use for create Next page and previous page links which can be true/false.
boundary-links=“true” Boundry links are use for create First page and last page links which can be true/false.
Implement Search Feature
Now add some filters for our users which performs searching on table data.
For searching data from table we need to create an input box where we can type keyword for searching.
Add a search bar above the table