How to apply Search Sort and Pagination in AngularJS Example using dir-pagination-controls

How to apply Search Sort and Pagination in AngularJS Example using dir-pagination-controls

How to apply Search Sort and Pagination in AngularJS Example using dir-pagination-controls

In this tutorial i will describe you how to create pagination for a list of records and how to apply filter on that list.

You must implement searching sorting and pagination if you are working for large data items. If you implementing these features in your application then you make your application more flexible and user friendly and also data will list in manageable order.

First you will have to display your data using dir-paginate directive. Then apply search, sort and pagination for your list of data.

Step1: Create index.html

First create a html file and declare your app using ng-app directive as ng-app="angularjsTable" and controller as ng-controller="listitemdata"

Include library of angularjs to access the features of angularjs as dir-paginate directive for creating pagination in angularjs.

  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="angularjsTable">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Angular js</title>
  6. <link href='//,300' rel='stylesheet' type='text/css'>
  7. <link rel="stylesheet" href="">
  8. <script src=""></script>
  9. <script src=""></script>
  10. <!-- Angular JS -->
  11. <script src=""></script>
  12. </head>
  13. <body style="background: #e1e1e1;">
  14. <div class="panel panel-primary">
  15. <div class="panel-heading">Searching Sorting and Pagination in Angular js</div>
  16. <div class="panel-body">
  17. <div ng-controller="listitemdata">
  18. <div class="alert alert-success">
  19. <p>Sort By: {{sortBy}}</p>
  20. <p>Reverse: {{reverse}}</p>
  21. <p>Search Text : {{search}}</p>
  22. </div>
  23. <div class="col-md-12">
  24. <input type="text" ng-model="search" class="form-control" placeholder="Type your search keyword..">
  25. </div>
  26. <table class="table table-striped table-hover">
  27. <thead>
  28. <tr>
  29. <th ng-click="sort('id')">Id
  30. <span class="glyphicon sort-icon" ng-show="sortBy=='id'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
  31. </th>
  32. <th ng-click="sort('product_name')">Product Name
  33. <span class="glyphicon sort-icon" ng-show="sortBy=='product_name'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
  34. </th>
  35. <th ng-click="sort('product_details')">Product Details
  36. <span class="glyphicon sort-icon" ng-show="sortBy=='product_details'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
  37. </th>
  38. </tr>
  39. </thead>
  40. <tbody>
  41. <tr dir-paginate="product in products|orderBy:sortBy:reverse|filter:search|itemsPerPage:5">
  42. <td>{{}}</td>
  43. <td>{{product.product_name}}</td>
  44. <td>{{product.product_details}}</td>
  45. </tr>
  46. </tbody>
  47. </table>
  48. <dir-pagination-controls
  49. max-size="5"
  50. direction-links="true"
  51. boundary-links="true" >
  52. </dir-pagination-controls>
  53. </div>
  54. </div>
  55. </div>
  56. <script src="lib/dirPagination.js"></script>
  57. <script src="app/app.js"></script>
  58. </body>
  59. </html>

If you don't have dirpagination.js then click this link to get file of dirPagination.js and include this to index.html file.

You will notice that i have used dir-paginate to paginate over data.

Without using dir-pagination-controls table will have paginated data but don't have controls to paginate so use dir-pagination-controls to have controls over the list.

You can make changes in setting of direction-links either true or false to according show or hide next page and previous page links and boundary-links can be true or false to according show or hide first page and last page links.

ng-click event define the activity that means what should be done when HTML element is clicked.

We can bind data by using ng-model of input controls so this is helpfull in search.

Step2: create app.js

Now create app.js file to define your angular module and create controller and inject $scope and |$http in your controller.

  1. var app = angular.module('angularjsTable', ['angularUtils.directives.dirPagination']);
  2. app.controller('listitemdata',function($scope, $http){
  3.     $scope.products = []; //declare an empty array
  4.     $http.get("dataJson/demodata.json").success(function(response){
  5.         $scope.products = response; //ajax request to fetch data into $
  6.     });
  8.     $scope.sort = function(keyname){
  9.         $scope.sortBy = keyname; //set the sortBy to the param passed
  10.         $scope.reverse = !$scope.reverse; //if true make it false and vice versa
  11.     }
  12. });

Include this file app.js in your index.html file.

I have injected angularUtils.directives.dirPagination dependencies in module to get additional benefits.

$http is a service to make request to server whenever you need to access the data of server api you use $http service to communicate with server.

Step3: Create a json file

Now create a demodata.json json file in dataJsondirectory.

  1. [{"id":1,"product_name":"Expert PHP","product_details":"Best PHP Tutorial provided"},
  2. {"id":2,"product_name":"Demo Expert PHP","product_details":"Demo"},
  3. {"id":3,"product_name":"Home Page","product_details":"Expert PHP Home Page"},
  4. {"id":4,"product_name":"Articles","product_details":"Best PHP Articles"},
  5. {"id":5,"product_name":"Tutorial","product_details":"Best PHP Tutorial"},
  6. {"id":6,"product_name":"Category","product_details":"Category"},
  7. {"id":7,"product_name":"Tag","product_details":"Tags"},
  8. {"id":8,"product_name":"AngularJS","product_details":"AngularJS"},
  9. {"id":9,"product_name":"Module","product_details":"Pagination, Searching with Sorting"}]

For now i make a ajax request using $http service for a file that contain dummy data.

Now you can try this code in your application for search sort and pagination in angularjs.

Phone: (+91) 8800417876
Noida, 201301
ataşehir escort maltepe escort bostancı escort kadıköy escort maltepe escort ataşehir escort tuzla escort pendik escort ümraniye escort kartal escort
pendik escort
izmir escort izmir escort izmir escort izmir escort denizli escort antalya escort antalya escort antalya escort izmir escort izmir escort izmir escort izmir escort izmir escort
hatay escort nevsehir escort nigde escort kirikkale escort batman escort osmaniye escort kirklareli escort tokat escort rize escort adiyaman escort gumushane escort batman escort
porno izle
cialis satış cialis fiyat cialis 20 mg cialis 100 mg cialis 5 mg fiyat
sohbet okey oyna
ankara escort marmaris escort bursa escort mersin escort antalya escort izmir escort samsun escort bodrum escort çeşme escort kuşadası escort adana escort eskişehir escort gaziantep escort esenyurt escort pendik escort tuzla escort fatih escort ümraniye escort mecidiyeköy escort kartal escort bahçelievler escort bahçeşehir escort ataşehir escort bakırköy escort nişantaşı escort avcılar escort büyükçekmece escort kurtkoy escort konya escort beşiktaş escort taksim escort beylikdüzü escort malatya escort sakarya escort şişli escort maltepe escort kadıköy escort ataköy escort bostancı escort şirinevler escort bağcılar escort üsküdar escort etiler escort başaksehir escort ortaköy escort kağıthane escort sultangazi escort halkalı escort çekmeköy escort şaşkınbakkal escort mamak escort sincan escort keçiören escort çankaya escort beypazarı escort akyurt escort pursaklar escort kahramankazan escort göztepe escort alsancak escort bornova escort buca escort karabaglar escort karşıyaka escort konak escort narlıdere escort izmit escort başiskele escort kandira escort körfez escort karamürsel escort dilovası escort gölcük escort gebze escort kocaeli escort kayseri escort elazığ escort denizli escort diyarbakir escort adana escort ankara escort izmir escort antalya escort gaziantep escort kayseri escort konya escort mersin escort denizli escort kocaeli escort diyarbakır escort