Angularjs table sorting filter and paging

Angularjs table sorting, filter and paging

This post provides an example about how create a table via sorting, filter and paging. Following directives and services in angularjs will be used:
  • orderby
  • filter
  • ng-click
  • ng-model
  • ng-repeat



 <!DOCTYPE html>  
 <html>  
 <head>  
   <title>Angular JS table sort and filter example </title>  
   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">  
   <script src="http://code.angularjs.org/1.4.8/angular.js"></script>  
   <script src="http://code.angularjs.org/1.4.8/angular-resource.js"></script>  
   <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>  
   <script>  
     var app = angular.module('MyForm', ['ui.bootstrap', 'ngResource']);  
     app.controller('myCtrl', function ($scope) {  
       $scope.predicate = 'name';  
       $scope.reverse = true;  
       $scope.currentPage = 1;  
       $scope.order = function (predicate) {  
         $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;  
         $scope.predicate = predicate;  
       };  
       $scope.students = [  
         { name: 'Kevin', age: 25, gender: 'boy' },  
         { name: 'John', age: 30, gender: 'girl' },  
         { name: 'Laura', age: 28, gender: 'girl' },  
         { name: 'Joy', age: 15, gender: 'girl' },  
         { name: 'Mary', age: 28, gender: 'girl' },  
         { name: 'Peter', age: 95, gender: 'boy' },  
         { name: 'Bob', age: 50, gender: 'boy' },  
         { name: 'Erika', age: 27, gender: 'girl' },  
         { name: 'Patrick', age: 40, gender: 'boy' },  
         { name: 'Tery', age: 60, gender: 'girl' }  
       ];  
       $scope.totalItems = $scope.students.length;  
       $scope.numPerPage = 5;  
       $scope.paginate = function (value) {  
         var begin, end, index;  
         begin = ($scope.currentPage - 1) * $scope.numPerPage;  
         end = begin + $scope.numPerPage;  
         index = $scope.students.indexOf(value);  
         return (begin <= index && index < end);  
       };  
     });  
   </script>  
   <style>  
     .odd {  
       background-color: antiquewhite;  
       color: #008b8b;  
     }  
     td th {  
       height: 30px;  
       min-width: 100px;  
     }  
     thead {  
       background-color: darkgray;  
       color: white;  
       height: 30px;  
     }  
   </style>  
 </head>  
 <body ng-app="MyForm">  
   <div ng-controller="myCtrl">  
     <h3>List students</h3>  
     <div class="container-fluid">  
       <pre>Click header link to sort, input into filter text to filter</pre>  
       <hr />  
       <table class="table table-striped">  
         <thead>  
           <tr>  
             <th>Edit</th>  
             <th>  
               <a href="" ng-click="order('name')">Name</a>  
             </th>  
             <th><a href="" ng-click="order('age')"> Age</a> </th>  
             <th><a href="" ng-click="order('gender')">Gender</a> </th>  
           </tr>  
         </thead>  
         <tbody>  
           <tr>  
             <td>Filter =>></td>  
             <td> <input type="text" ng-model="search.name" /></td>  
             <td> <input type="text" ng-model="search.age" /> </td>  
             <td><input type="text" ng-model="search.gender" /> </td>  
           </tr>  
           <tr ng-repeat="user in students | orderBy:predicate:reverse | filter:paginate| filter:search" ng-class-odd="'odd'">  
             <td>  
               <button class="btn">  
                 Edit  
               </button>  
             </td>  
             <td>{{ user.name}}</td>  
             <td>{{ user.age}}</td>  
             <td>{{ user.gender}}</td>  
           </tr>  
         </tbody>  
       </table>  
       <pagination total-items="totalItems" ng-model="currentPage"  
             max-size="5" boundary-links="true"  
             items-per-page="numPerPage" class="pagination-sm">  
       </pagination>  
     </div>  
   </div>  
 </body>  
 </html>  

Run it on http://plnkr.co/

Thanks for your time reading

You may need






28 comments:

  1. When I am filtering data, pagination is not refreshing the list. If I enter 'boy' in gender field, table should refresh pagination and show only boy related new table information with pagination.

    ReplyDelete
    Replies
    1. I found a solution from this link, but it is working only for angularjs version 1.2.6 and not for higher versions

      http://jsfiddle.net/nackjicholson/5p6vF/2/

      Delete
    2. It works fine V 1.4.8. Checkout http://plnkr.co/edit/JB643Xz8NAqOrltoe4l2?p=preview

      Delete
  2. This code is exactly I need, but the filter doesn't work when the item is in a page different from the current.
    For instance: try to search for name=bob with the current page 1.

    ReplyDelete
  3. Yes your right filter doesn't work when the item is in a page different from the current. Will check and update the code.

    ReplyDelete
  4. Hi swapnill,

    I just used the code above for sorting and filtering and I was wondering if you had any update on filter bug (when item is on different page)? I'm new to Angular and would be great if you could provide help/update on the above so that I can further use it?

    Thanks

    ReplyDelete
  5. Pagination is not working. No errors

    ReplyDelete
  6. I have a paging in Index.html page and other paging in the popup , but when you change the page number in the popup also changes in pagination index , how to solve?

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  8. This comment has been removed by the author.

    ReplyDelete
  9. Sorting is not working properly, it only sorts by page, not for all the data in all pages.

    ReplyDelete
  10. sir paging is not working i need paging code Please any one post here..

    ReplyDelete
  11. hey hi guys paging is working fine please add ui bootstrap js then it will autometically works. check one.

    ReplyDelete
  12. I really appreciate information shared above. It’s of great help. If someone want to learn Online (Virtual) instructor lead live training in ANGULAR JS, kindly contact us http://www.maxmunus.com/contact
    MaxMunus Offer World Class Virtual Instructor led training on ANGULAR JS. We have industry expert trainer. We provide Training Material and Software Support. MaxMunus has successfully conducted 100000+ trainings in India, USA, UK, Australlia, Switzerland, Qatar, Saudi Arabia, Bangladesh, Bahrain and UAE etc.
    For Demo Contact us.
    Nitesh Kumar
    MaxMunus
    E-mail: nitesh@maxmunus.com
    Skype id: nitesh_maxmunus
    Ph:(+91) 8553912023
    http://www.maxmunus.com/




    ReplyDelete
  13. An overwhelming web journal I visit this blog, it's unfathomably amazing. Unusually, in this present blog's substance made inspiration driving truth and reasonable. The substance of data is enlightening.


    Full Stack Course Chennai
    Full Stack Training in Bangalore

    Full Stack Course in Bangalore

    Full Stack Training in Hyderabad

    Full Stack Course in Hyderabad

    Full Stack Training

    Full Stack Course

    Full Stack Online Training

    Full Stack Online Course



    ReplyDelete
  14. Fantastic article and I must say, it's nice to know some things aren't just black and white in a time of such confusion. Instruction is an important topic, but like most issues today, there is so much uncertainty associated with it that we feel inundated with all of the ideas too. You dodged the issue brilliantly by making sure your audience knows that you DO NEED to listen and then offer great advice on how to accomplish this feat. We always look forward to reading more of your helpful advice!
    AWS Training in Hyderabad
    AWS Course in Hyderabad

    ReplyDelete
  15. It is late to find this act. At least one should be familiar with the fact that such events exist. I agree with your blog and will come back to inspect it further in the future, so keep your performance going.

    Best Data Analytics Courses in Bangalore

    ReplyDelete
  16. You really make it look so natural with your exhibition however I see this issue as really something which I figure I could never understand. It appears to be excessively entangled and incredibly expansive for me.

    ReplyDelete
  17. 360DigiTMG, the top-rated organisation among the most prestigious industries around the world, is an educational destination for those looking to pursue their dreams around the globe. The company is changing careers of many people through constant improvement, 360DigiTMG provides an outstanding learning experience and distinguishes itself from the pack. 360DigiTMG is a prominent global presence by offering world-class training. Its main office is in India and subsidiaries across Malaysia, USA, East Asia, Australia, Uk, Netherlands, and the Middle East.

    ReplyDelete
  18. This comment has been removed by the author.

    ReplyDelete
  19. I think this is an informative post and it is very useful and knowledgeable. therefore, I would like to thank you for the efforts you have made in writing this article.
    full stack web development course

    ReplyDelete
  20. Thank you for sharing such a nice and interesting blog and really very helpful article.
    Want to become Oracle Recruiting Cloud Certified Specialist or Consultant? Attend this Best Oracle Recruiting Cloud Training course offered by the Unogeeks (Rated as Top Oracle Recruiting Cloud Training Institute in the market)

    ReplyDelete
  21. Edius Pro 9 Crack software free download is non-linear video editing software which transforms ordinary looking movies into professional one .Edius Pro 9 Software Free Download For Pc

    ReplyDelete
  22. Thanks for sharing this informative post with us. This information is very useful for those who are searching best Angularjs Development Services, or Angularjs Development Company

    ReplyDelete

Popular Posts