Search Sort and Pagination in ng-repeat – AngularJS

January 10, 2019
by Rahil Shaikh
  • Unit testing in AngularJS

In any web application to display data,  we often use tables or lists. When working with angular applications you will use ng-repeat to display the data in tables or lists.

However when the data items get large, our table must-have features such as search, sort and pagination. These features will make your application more user-friendly and tables more manageable. This AngularJS tutorial will show you how to implement search, sort, and Pagination in your Angular applications.

Note: This is a tutorial for Angular 1, if you are looking for implementation in Angular 2 visit this tutorial


For our demo application, we will first display the data using ng-repeat. Next, we will start implementing the three features one by one starting with the easiest first.

  1. Display data using ng-repeat
  2. Implement search in AngularJS( filter )
  3. Implement sort in AngularJS( orderBy )
  4. Implement pagination in AngularJS( dirPaginate )


Watch Video



First lets set up our files.

We have included angular.js and app.js to our index.html. Then we have declared our angular app as ng-app="angularTable" and controller as ng-controller="listdata". We have also included some bootstrap css files.

<!doctype html>
<html lang="en" ng-app="angularTable">
    <meta charset="utf-8">
    <title>Search Sort and Pagination in Angular js</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <div role="main" class="container theme-showcase">
      <div class="" style="margin-top:90px;">
        <div class="col-lg-8">
                    <div class="page-header">
                        <h2 id="tables">Search Sort and Pagination in Angular js</h2>
                    <div class="bs-component" ng-controller="listdata">
        <script src=""></script>
        <script src="app/app.js"></script>

app.js will contain our js code, our angular module and controller. If you see below we have also injected $scope and $http into our controller.

var app = angular.module('angularTable', []);

app.controller('listdata',function($scope, $http){


We also have a file as mock.json which contains data in json format. We will make an ajax request using $http and display the data in our markup using ng-repeat.

{"id":3,"first_name":"Peter","last_name":"Barnes","hobby":"Reading Books"},


Display data using ng-repeat

To fetch the data we will do a $http request to the mock.json. Next we will take the data into a $scope variable and then using ng-repeat we will display the data.

[adrotate banner=”5″]

Since the data fetched will be an array of objects, ng-repeat will iterate over it.
In your controller.

app.controller('listdata',function($scope, $http){
    $scope.users = []; //declare an empty array
        $scope.users = response;  //ajax request to fetch data into $

In our markup
ng-repeat="user in users"
This statement will repeat over the users.


<div class="bs-component" ng-controller="listdata">
                        <table class="table table-striped table-hover">
                                    <th>First Name</th>
                                    <th>Last Name</th>
                                <tr ng-repeat="user in users">


We have created a table and then added ng-repeat to iterate on our list of users.

Display data using ng-repeat

Display data using ng-repeat

So far so good.

Implement search feature

Now lets add filtering for the list of users. Adding search in AngularJs is very easy, Angular comes in with lots of awesome builtin filters.
To do this we need to create an input text box where the end-user can type in the keyword and then apply the value of the input model to ng-repeat.

Lets add our search bar just above our table.

    <form class="form-inline">
        <div class="form-group">
            <label >Search</label>
            <input type="text" ng-model="search" class="form-control" placeholder="Search">

Now we have to filter our

ng-repeat="user in users" with the value of ng-model="search".
After which our ng-repeat statement will look like this.

ng-repeat="user in users|filter:search"

So now the if the end-user types anything in the search bar the search results will instantaneously appear in the table.

search filter

search filter

Implement sort feature

AngularJs provides orderBy filter which takes in two further arguments.

  1. Name of the key to sort with
  2. Order of sort (asc or desc), a Boolean value.

Lets add that to our ng-repeat statement.
ng-repeat="user in users|orderBy:sortKey:reverse|filter:search"

Remember, here orderBy is the filter name and sortKey and reverse are $scope variables. So now to make this work we need to set values of $scope.sortKey and $scope.reverse variables.

To do this we will make our table headers clickable, and call a function in our controller using ng-click. This function will change the sortKey and reverse based on the table header clicked.

Lets first add sort function to our controller.

    $scope.sort = function(keyname){
        $scope.sortKey = keyname;   //set the sortKey to the param passed
        $scope.reverse = !$scope.reverse; //if true make it false and vice versa

As you can see this function does two things, sets the sortKey variable and reverses the reverse variable.

Time to invoke this function using ng-click. Change your table headers to below.

            <th ng-click="sort('id')">Id</th>
            <th ng-click="sort('first_name')">First Name</th>
            <th ng-click="sort('last_name')">Last Name</th>
            <th ng-click="sort('hobby')">Hobby</th>

Remember the parameter sort() function takes should be the key of that column. The sorting will work now but we should add some indicator in UI so that the user knows sorting is on which column and if it is ascending or descending.

We will use bootstrap glyphicons to show the sort icon. Code that does the trick.

<span class="glyphicon sort-icon" ng-show="sortKey=='id'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>

We only want to show the icon on the column that is being sorted, we do that using ng-show="sortKey=='id'", then we use ng-class to change the icon depending upon the value of reverse.

Now your table head should look like this.

            <th ng-click="sort('id')">Id
                <span class="glyphicon sort-icon" ng-show="sortKey=='id'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
            <th ng-click="sort('first_name')">First Name
                <span class="glyphicon sort-icon" ng-show="sortKey=='first_name'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
            <th ng-click="sort('last_name')">Last Name
                <span class="glyphicon sort-icon" ng-show="sortKey=='last_name'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
            <th ng-click="sort('hobby')">Hobby
                <span class="glyphicon sort-icon" ng-show="sortKey=='hobby'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>

Data sorted by id

Data sorted by id

Woah! Our app just had search and now it has sort, it just keeps on getting better. Time to paginate.

Implement pagination

Although we saw Angular provides built-in filters for searching and sorting but there is nothing as such when it comes to pagination. So what now? Do we need to build the entire pagination logic by our-self? Well, you can do that but there are a few third party libraries that we can use to add pagination. One of them is dirPaginate.

The reason I’m using dirPaginate is because of its features and ease of implementation. By using this you don’t need to write any logic into your controller. Kind of plug and play.



First thing we need to do is get the dirPaginate library.
If you have used bower you can download it by simply running.
bower install angular-utils-pagination

Or you can download it manually from the below link.


Now include the dirPagination.js in your index.html and add angularUtils.directives.dirPagination as dependency to your module.

<script src="lib/dirPagination.js">&lt/script>
angular.module('angularTable', ['angularUtils.directives.dirPagination']);

Basic settings

Now to paginate your data we can use the dir-paginate directive. This directive will replace the ng-repeat directive in our code. And we will add the itemsPerPage filter which is provided by this library.
itemsPerPage would be the number of items to be displayed per page.
Observe closely the below code.

        <tr dir-paginate="user in users|orderBy:sortKey:reverse|filter:search|itemsPerPage:5">

Before adding pagination:
ng-repeat="user in users|orderBy:sortKey:reverse|filter:search"
After adding pagination:
dir-paginate="user in users|orderBy:sortKey:reverse|filter:search|itemsPerPage:5"

Now our table is paginated but we don’t have pagination controls to navigate to different pages. dirPaginate provides dir-pagination-controls to display pagination controls.
Add this just below your table or any where on the page where you want to display.

        boundary-links="true" >

max-size="5" maximum number of page numbers to show.
direction-links="true" Next page and previous page links true/false
boundary-links="true" First page and last page links true/false

Now we also have pagination in our application. dirPagination comes with more awesome features such as using a custom template for pagination controls, multiple paging per page, page change event etc. Visit the Github page to find out more.



I’ve also went ahead and added a bit of custom styling to the application.

.sort-icon {
    font-size: 9px;
    margin-left: 5px;

th {



AngularJS has some great built-in features to implement search and sort this tutorial explains how to do that in the simplest possible way, this AngularJS tutorial also explained arguably the easiest way to implement the complicated pagination. Search Sort and Pagination are three things that a client will demand 9 times out of 10 when displaying large tabular data. These features allow ease of use and better the User Experience of your applications. Now that you know, you can add them to your projects.

Further Links


Engineer. Blogger. Thinker. Loves programming and working with emerging tech. We can also talk on Football, Gaming, World Politics, Monetary Systems.

Get notified on our new articles

Subscribe to get the latest on Node.js, Angular, Blockchain and more. We never spam!
First Name:


  1. Don Cistaro

    Thank you for the effort in posting this.

    • |

      Your welcome Don, thanks for stopping by and commenting.

      • Don

        Hi Rahil I modified your code to build a sample app for my company. Works great.. But I am wondering if there is a way to incluce and/or logic in the search function. i am new to angularJS so I don’t know where the limits are. But and/or will greatly enhance search functionality. My data in the mockjson file has more fields and I discovered that your search will display results for fields not displayed in the view. and that is good and powerful, but and/or would really help. Thank you for your efforts really like this functionality

        • |

          Your welcome Don. By and/or if you mean to search for 2 fields, eg:(‘FirstName AND LastName’) so this will show results with the searched first name and last name, similarly for OR. So this basically can be said as a column search, meaning a search string for each column ? OR a single search string but keywords separated by a (, comma) or some special character eg(Jhon,Gaming).
          In my example I’ve used a built in filter provided by AngularJS, but angularJs also allows you to build custom filters, so in your case you would need to build a custom filter according to your needs.
          We have also done a tutorial to build a basic custom filter, you can refer to that for some help. Cheers 🙂
          Link :

          • Don Cistaro

            Hi Rahil.. I found a link where multiple arguments can be entered in the search box and results are returned that meet the AND relationship of the search terms.. I will try to modify your code to use this, but I thought it would be best if you could do so and share with others as well. In this case the search terms are separated by a space and conditions that match both terms are returned.


          • |

            That’s awesome Don, try to modify and play around to make it best work for you, mean while if I get some time I’ll incorporate it in this post. 🙂

          • Don Cistaro

            Hello Rahil,, on further examination of this link from fiddle, the relationship is an OR relationsip, not an AND relationship. I will explore facetted search and get back to you with the results. Don

          • Don Cistaro

            Hello Rahil… I have a new question. as a new angularjs guy, I don’t know how to create the code that would allow me to click on a field in a row and use that value to link to another site. For example ,, my rows have a column with catalog numbers. 581324-U , 53827-U If I click on the row, I want to go to to show theproduct detail and price from our web site. I just don’t know how to grab the row and the column. Since I am using dir-paginate, I don’t know where to setCurrent row.. Can you help? Thanks

          • |

            Use ng-click to call a function that will take in the row parameters, and inside the function change the route or if its an external URL use window.location, and you can pass the required parameters in URL and grab them in that page.

          • Don Cistaro

            Hello Rahil ,, as a new AngularJS guy, I am struggling with where to place the ng-click. Should it be in the dir-Paginate js,? If so, where? Or should it be in the html template? If so, where? Thank you so much for your help. Don

          • |

            If you want a click on each row, then place ng-click in your template along side the dir-paginate directive.

          • Tim Bauer

            Im Mad at this Angular <.< Im trying to do exactly what Don Cistaro said :
            multipe serach terms comasepareted in one input box. but everything i try wont work because of the pagination <.< has somebody a solution to get this pagniation/sort script with the possibility of searching multiple stings in an or configuration.???

          • |

            Hi Tim checkout my latest post on Custom Filters, there I’ve added an example of search with multiple search strings. Might help. The link is in the comments in this thread.

          • Don Cistaro

            Hi Tim, Rahil .. I could not figure out how to do this with this app. But I am exploring Elastic Search. There is an Angular Guide for Eleastic Search and also a live app at I will post more as I learn more.. I a REALLY new at AngularJS, but have been programming for 30+ years, mostly in Lotuscript for IBM Lotus Notes Apps in the client, not the browser, so i entered a new universe and am benefitting from the works of Rahil and others

      • Kyle Ming

        Hi, Does the sort go back through and sort the entire list or just what is on the page? If it is only the page, how would I get it to sort the entire list.

        • |

          It sorts the entire list, you can easily verify that by sorting on ID in the demo.

      • |

        Thanks a lot …… reduced 99% of work

      • |

        Thank you for the effort in posting this.

    • vishnu

      This code is not working in Chrome and IE browser

      • |

        Its working, run it on a local server, use xamp if you are on windows.

    • Gabriel

      Hey man!, i don’t usually leave coments in posts…but this one deservse it… thatnk you very much for your contribution… you really helped me with my project with this post!, thank you a lot!!

  2. |

    @rahil – This is super! Have you considered writing a follow up that takes the same example and discusses performance? For example how the $digest cycle and number of watchers are affected by moving filters to the controller rather than the HTML … or maybe dir-paginate directive already adds that as an optimization?

    • |

      Thank pulkit, thanks for the suggestion, will consider this for future posts.
      If you have a lot of data displayed via ng-repeat and you are worried about the performance, you could probably use “bindonce” directive. Its a 3rd part library available. check it out on Github.

  3. |

    Hi Rahil, how can i check if the searched string didn’t get any results?

    • |

      If you are planing to check it in UI, you can do something like this.

      <span ng-show="(user in users|filter:search).length == 0">No Result</span>
  4. Rafael

    Hi, nice post. This is exactly the same way I used to work with “powertables” in Angular.
    But one thing always bother me.. How can I move all the icon logic to a directive? Transform this:

    into something like this:


    • |

      Thanks Rafael, Its seems something is missing from you comment.
      Regarding the directive, if you want a directive for icons on sort, you can simply pass the values of sortKey and reverse as attributes and change the icon in the directive, or these variables will also be available as parent scope objects.

  5. Hank

    What if your data consists of 3000 rows? It does doesn’t seem like a good idea to get all that data in a single $http request and hold it in the DOM?

      • Hank

        Thanks Rahil!
        I get the server side pagination, but if using server side pagination the search and sort must be done server side too?

        • |

          Your welcome Hank! It depends on your business logic, if you intend to do search sort only for one page then you could probably do on client-side but if you intend to do it on entire collection then you would need to implement server side search and sort.

  6. kishan

    Hi Rahil,

    your code was awesome, and I am new to angularJs, in your code (pagination) display records 20 per page only.. but I want to display no. of records dynamically, that is user may select 5 or 10 or 20 or 25 from drop-down box. so can you please guide me.. what are the changes made to code

    • |

      Thanks Kishan,
      If you see the below line

       <tr dir-paginate="user in users|orderBy:sortKey:reverse|filter:search|itemsPerPage:5"></tr>

      There is a filter as “itemsPerPage” (in this case set to 5 by default), you can change this dynamically by providing the value of model (variable that holds the dropdown value) of dropdown.


       <tr dir-paginate="user in users|orderBy:sortKey:reverse|filter:search|itemsPerPage:dropdownModelValue"></tr>

      Hope this helps! 🙂

      • kishan

        Thanks, Rahil

        your code really helps me, I need a demo regarding Sessions & Cookies Concept in AngularJs, I want to learn more about AngularJs. Please guide me with a Demo.. or any references regarding Sessions and Cookies.

        • |

          You’re welcome kishan, I’ll consider session,cookies and localstorage for my future posts.

  7. |

    Good post. I didn’t want to use one of the many plugins and/or ui-grid so I appreciate this entry. I was wondering though. I have this viewport and a thumbnail viewport switch with two separate partials. I was wondering if the search aspect can also be implemented in order to keep the aspect of navigation (above the grid/thumbnail) viewpoints as it is within it’s own partial…. thoughts?

    • |

      Thanks James, Can you explain your scenario in more detail or with a jsfiddle/plnkr or paste a sample code in here ?

      • |

        Hey Rahil,

        I did a bit of a rework on my code and it’s fine. It all comes down to the search, not the grid and sort aspect, and I can adjust the paging/sorting aspect as well because it’s all determined by the ng-repeat, not the grid layout 🙂


  8. |

    Thanks for the beautiful article.

    • |

      Hi Gustavo,
      I assume your question is related with pagination as search/sort can be easily done using different variables.
      So dir-pagination provides a directive called as “paginationId”, we can use this to associate the “dir-paginate” directive to its respective “dir-pagination-controls”.
      In our case the code should look some thing like this.

      dir-paginate="user in users|orderBy:sortKey:reverse|filter:search|itemsPerPage:5" pagination-id="user"

      And also in your dir-pagination-controls add this directive ‘pagination-id=”user”‘

      Your other instance will have its own unique “pagination-id”
      You can find more info on its GitHub Page.

    • Don Cistaro

      I am a novice at angulajs, but I achieved this by using a separate controller on the second table which loaded a different json table. It worked fin, except I could not control the appearace of the page when the top table was small. the bottom table was visible.. So, in my application I created a separate page for each table aind it looks fine. But I am a novice to web development and maybe there is a better way of keeping content of the lowaer pasrts of a single page from appearing if the top part has a small omout of content. Padding perhaps? I really don’t know. But I REALLY like the work Raihil has contriuted here.

      • Don Cistaro

        I apologize for all the typo errors in my comments.

      • |

        It’s fine Don, we learn only when we try. The only thing we should make sure is that, we are better that what we were yesterday.

  9. Teja

    Great one, thank you !!

    • |

      You are welcome, glad this helped you.

  10. kishan

    Hi Rahil,

    I have a query.. please can you please help me out.. with this situation. in your demo search box is there. if I type a letter/word it came search wise result.. if I type something abcd…..
    I didn’t found any record.. in this situation I need a message to no records are found).. in which part I have to modify/edit.. to display that above message. please let me know

    • |

      Hi Kishan, did you try this?

      <span ng-show="(user in users|filter:search).length == 0">No Result</span>
      • kishan

        Hi Rahil,

        Sorry Rahil, that is not working for me… please find my code below..

        This is my code.. (Reference of Your Code).. and where was to set that one.. i want display No records found message in two scenarios

        1. In Search box scenario
        2. If there is no records in database then display No records Found Message

        please guide me.. i was stuck in middle of my work

        {{ $index + 1 }}


        • |

          Hi Kishan,
          I had not tested that but had a brief idea of how it would be, i actually got that wrong.
          Use the below, I’ve tried it on my demo.

          <span ng-show="(users|filter:search).length == 0">No Result</span>

          This should solve your problem.

          • kishan

            Thanks lot rahil,

            Its Working… Thank you So much

  11. kishan

    Hi Rahil,

    Continue with above query.. I want (No Record found) message when table having zero records in database. please guide me rahil

    Thanks in Advanced.

  12. kishan

    Hi Rahil,

    I need a custom pagination in angularjs,

    In your demo fetch all the records (using data-tables concept) at a time.. but I need records as per page only.. why I am asking in my database there is 20000 records.. so it takes more time to fetch the records.

    • |

      Hi above in the comments section I’ve explained this scenario to Hank i.e how we could achieve server side pagination with dirPagination, use that as a pointer and refer to the dirPagination documentation.

    • |

      If you are not loading the entire data at once, i.e you are loading data from the server based on the page number, then to search in the entire data set you will need a server side search mechanism, search on the client side will only search in the loaded data.

  13. Vikas Sharma

    Nice and simple explanation

    Loved to read documentation

    Thanks buddy

    • |

      Thanks for stopping by, glad you liked it!

  14. Vidhya

    how can i set a variable in dir paginate to display tables with row size we mentioned in a select box?

    • |

      If I understand this correctly you mean to say “how can we change rows per page using a drop-down”.
      For that the “itemsPerPage” filter can take the value from the drop-down’s “model”, so if you change the value of dropdown the value of “itemsPerPage” will change as well and you will see the changes reflected in the UI.

  15. raghavendra

    thank u sooo much it’s helps a lot in my project

    • |

      You are welcome, thanks for stopping by.

  16. Imran

    ver nice article Rahil, i implemented it in my company’s site

    • |

      You are welcome, glad this was useful to you.

  17. Tim Bauer

    Important, i tricked with some different filters and it works perfekt but now i need to get the object of all entrys that are displayed does somepady know hot to get ? when i am looking for the filtered data i only get the object of the one or the other filter not from both.

    this is my dir-paginate:

  18. vijay soni

    your sorting on record is working on selected page but i want to sort all record.

    • |

      Hey Vijay, it sorts records for all pages.

      • |

        Vijay is right. i have same problem. i have 5000 records and it sorts per page.

    • Bhargavi M

      how to make it to work on selected pages

  19. Omar

    Woow, you really helped me!
    Thanks a lot, I had been suffering with plugins, directives and false solutions

  20. Priyank srivastava

    Thanks a lot………………. 🙂

  21. Ahmad

    Rahil, very nice work but not working on Firefox. Works very well with Chrome. Also wanted to modify the buttons with bootrap.

    • |

      It works on firefox, I’ve tested it, there should be no browser related issues with this code.
      But let me know your firefox version, so I can test specific to that.
      If you want to modify the buttons you can check it in the template file, you can also specify your own template. Check the documentation on dir-paginate, you’ll find it.

  22. Ahmad

    When you perform search in text box, it goes back to the first page even though you are performing a search on middle page

    • |

      It recalculates the pages based on the number of results left after using the search filter.

  23. Muhammad Usama Khan

    wow it really helped thanks a lot I am searching for quite some time but this blog has really solved my problem

  24. Ahmad

    Firefox is working, made bootstrap modifications – everything is working very nicely. Search is becoming an issue, I would like to be able to search on current page during pagination. Please let me know if you have a quick fix for that, otherwise I might have to wrestle with the code. THANK YOU for prompt response.

  25. |

    hi friend, i can not download source, can you send me via my email ?

    • |

      Click on the download button, you will see a “Download as zip” option to your right. Click on it to download the source code.

  26. |

    hi friend,

    Now i want to paging as following:
    – I dont want get all record, because it’s very slow if i have 1mili records.
    – I want to each time get some records(10). when user click to page index, it is go to db and get again


  27. PP

    dir-paginate doesn’t work with controller as syntax. For Example ng-controller = “listdata as myc”
    dir-paginate=”user in myc.users|orderBy:sortKey:reverse||itemsPerPage:5″

    • |

      It does with controller-as syntax. I’ve even used it in my other tutorial “Server Side Pagination with angularJS”, you can check that out.

  28. Aying Man

    THANK YOU ! ! ! !

  29. Bhargavi M

    sorting is working for all the pages i need it to work for individual pages how to make it?

  30. Bhargavi M

    it is sorting the records of all the pages i need it to work for individual pages how to make it please help me out Rahil

  31. pp

    How to make it work with nested tables usind expand/collapse feature

  32. Daniel

    Hi Rahil!
    The filter works great, however, if it finds results on a later page, it leaves them there. For example if I have 2 pages with 10 results each, and it found 1 result with the filter on the first page, and 2 results on the second page, it will show 1 result on page 1 and 2 results on page 2. Any way to consolodiate this so I have all three filtered results on page 1 (up to 10 records?)

  33. Prasad Parab

    Its awesome article……keep it up…helped me a lot…. Thanks again !!!

  34. Chirag

    Fantastic article, very helpful..Thank you Rahil

    • |

      Welcome Chirag! Thanks for stopping by.

  35. |

    Hi How to change URL with paging?.,

  36. pp

    Hi Rahil,
    A feature like excel data filter (multiple checkboxes showing unique) values on the table columns will make it a complete solution

  37. Wai Yan Aung

    Thanks you so much for sharing.
    I got the pagination with angular.

  38. Heshan

    Thank You very much for sharing. First of all I am a beginner to angularjs.I have use this to create tables within 4 tags .But there is a small issue as tab1 contains many data the pages will be set according to the first tab. But I want to use this separately according to different tabs.Could you please tell me a way?

    • |

      From what i understand, you want to implement pagination separately at more than one places. You can do that by using the pagination-id attribute you can know more on it in the documentation on dir-pagination, Link is in the blog.

  39. Ali

    Hi Rahil,

    Great Job.

    I was wondering where the implementation of the function get in app.js “$http.get()”.
    A mean where can I fin the get function.

    Thank you

    • |

      $http is a service provided by AngularJS for communicating to a web-server, It has all those methods built in.

  40. hs

    Awesome Job man

  41. AJ

    Nice post Rahil. Need your help for my scenario.

    I have implemented sorting functionality as mentioned in the post. It is working fine for single table.

    If I have multiple instances of the same table in a single page, i am encountering a strange issue. If i am trying to sort a column in one table, the other table is getting sorted. How can i prevent the other table from getting sorted.

    • |

      Make sure the variables holding the sort value and order are unique to each table.

  42. Ivan

    Hi! Your tutorial is great. My expression brakes when I change ng-repeat to dir-pagination. What could be the problem? I added the dependency, and the link for dirPagination.js.

    • Ivan

      You’ve done a great job!

    • |

      Could you please tell more about your problem.

      • Ivan

        I solved the problem. I was using an older version of angularJS. I updated it to 1.4 and now it works.

        • Ivan

          I just have one problem, when i move to 2,3 in pagination my id is incrementing 1 to 5 all the time, not 6-11, 12-17. Thanks for your time.

          • Ivan

            I solved the problem. In my json file I add property id, before I used $index do this for me.

          • Allan

            Hey, I was wondering on how you fixed this?

  43. |

    Hello Rahil, I have a problem implementing the pagination part.
    When I execute the application, the pages (that we click to navigate) are shown as a vertical list and not as shown in your example.
    What could be the problem?
    Thanks for the tutorial 🙂

  44. |

    Just going through your great article. I am trying to implement it. However, I have more than one table on the page and the pagination controls is changing all the tables to the next page at once. Pls how I can I get the controls to work with just the current table alone and not all the tables on my page at once. Thanks.
    P.S: Sorry I wasnt chanced to read all the 121 comments and thought it will be faster to get help this way.

    • |

      Sorry, I have resolved this by adding pagination-ID.
      Thanks all the same

  45. Venu Kotagiri

    Nice Article.

  46. Mohamed Emam

    Thank you very much

  47. chenguang

    I used your js, and i used “dir-paginate” twice in two different div at the same page. but when i change one of the page number, the other will changes. Is that a bug?
    Thank you

    • |

      It’s not a bug. You just have to specify different id for paginations. for example.

      <!-- first pagination instance -->
          <li dir-paginate="customer in customers | itemsPerPage: 10" pagination-id="cust">{{ }}</li>

      <dir-pagination-controls pagination-id="cust"></dir-pagination-controls>

      <!-- second pagination instance -->
          <li dir-paginate="branch in branches | itemsPerPage: 10" pagination-id="branch">{{ }}</li>

      <dir-pagination-controls pagination-id="branch"></dir-pagination-controls>

      Hope, this will help you.

  48. Dimebag

    Thank you. Your tutorial was very helpful.

  49. fabio

    hi boss… it is possible shoq data from two tables??

  50. Nagaraju

    Just wanted to check whether can we implement search and sort functionality to restrict for the current result itself instead of whole result.

  51. Girma M.

    excellent and clear explanation, very much appreciated, taking your time and helping the public at large


    • |

      You are welcome Girma! Thanks for stopping by. You can subscribe to stay updated.

  52. |

    Thank you, Rahil. This code is very helpful~

  53. Nouredine

    Hello Rahil,
    Thanks for Sharing,it’s veru helpful ,
    Can you help me please, I want to make my “max-size” dynamic,
    For ex : make three choices in a select.


  54. Nouredine

    Thanks Rahil for sharing, I want to make the attribute (“max-size”) dynamic.
    For Example make three choices in a select. select a choice and set it in a pagination directive.

    • |

      Hi Nouredine, most of the time I’ve seen the requirement to be for the dynamic `itemsPerPage` instead of `max-size`. Either ways both can be made dynamic by referencing them from a variable in controller. The variable can get the dynamic values from a dropdown.
      Check this demo, where the itemsPerPage is dynamic, you can try a similar thing for `max-size`

      • Nouredine

        First, Thank you Rahil For your time, exactly i’m wanting `itemsPerPage` to be dynamic instead ‘max-size’ in my example, just i made an error and sorry for it.

        Thaks Rahil for your help.

  55. |

    Fantastic. The most comprehensive guide von pagination with Angular. Thank you very much!

      • Juan

        Hi! first of all i want to thaks you because I have been working 3 weeks with angular and i found this VERY useful and it has helped me a lot.

        But i have a doubt…. Is there any way to get the conrtoller know which registers are being shown after filtering?

        I mean i have 100 registers for example, and im paginating per 10 pages, afeter sorting, and filtering…. Can I get the registers are being shown somehow?

        I would like to do this cuz i have more than 1000 registers, orders to be specific, and i have to make a http.get call every 5 seconds in order to know the current state… it would be stupid to do 1000 get calls if i could get the sorted collection of the ones are being shown i would only have to do 10.

        I hope i explained myself, sorry for my english.

        Thanks in advance!

  56. |

    Thank you very much for the contribution has helped me a lot.
    Only I have a problem I hope you can help me.
    When I search for a string that does not exist. eg helloworldnotfound
    to clear the input no longer brings me records, this also happens in the demo and other sites I’ve seen.

    • |

      I just checked the demo works as expected, can you describe to me, how you are trying to clear the input.

  57. |

    Hi Rahil,

    I need one help, I’ve created a page similar to this and I want to add one more functionality to choose number of records display in the table. I’ve tried creating a dropdown field to select how many rows to show in a table but I’m not able to achieve this. Can you help me out this.

    By the way very helpful blog indeed.

    • |

      It is very easy, I’ve already replied to this query in above comments, you can check my reply to @Nouredine just a few comments above, there is a link to plnkr.

  58. Kickinmhl

    i was wondering if you have attempted to implement this with async calls. With pagination working correctly, I attempted to add a async call, adding records to the collection when the last page was selected. The data was retrieved and added to the model correctly, but the table would not show the records. When selecting one of the newly arrived pages, the data would stay forever on the previous page.

    Have you run into this scenario?
    Thank for any advice

  59. Kickinmhl

    Rahil, I’m having a problem with the pagination when being used to gather async data. The initial request during instantiation of the table retrieves data properly. When the next data request is called, it is received, but the pagination links for the first new pages don’t point to the new data, they loop through the original data. It doesn’t seem to recognize the new data at all. Have you run into a scenario like this? Have you successfully implemented this with async( or server side) data?

    Thanks for any input.

  60. |

    Hi Rahil, In your demo when I add “HelloWorld” and delete the filter I do not return records.
    This problem have it all pagers angular. you know why?

    • |

      As far as I understand, You are typing a search string which returns no records and then deleting the same to find no record again? I just checked the demo its not happening with me. Please elaborate more on your problem. You can email me as well, I would be glad to help.

    • |

      Thank you very much, solved my problem disabled “NickelBlock 1.1.2” from chrome extension

  61. |

    your tutorial helped me a lot, thanks 😀

  62. Awais

    HI Rahil!
    I want know, whether we can use all this stuff with JSON Object. With JSON Object i have to implement search filters on all coulmns of table. I am using the same directive for pagination.

    • |

      Of-course you can, but should be an array of objects.

  63. |

    this is a great article.
    I have been working on an app using this angular-utils-pagination directive. It is working great, but Is there a way to easily attach the page number as a URL param so a user can navigate to a specific page in the pagination, or hit the browsers ‘back’ button from another page and end up exactly where they left off before? (I am also using ui-router). Thanks!

    • |

      Ohh that is possible. UI-routers state params will form your URL, dir-pagination’s “current-page” directive can set the page after fetching it from the param, and the “on-page-change” event can change the state if you want. Have a look at these three things, you should be able to achieve the required result.

  64. Anand

    Hi Rahil , Thanks for the sharing this.

    There is a potential problem as when we are on page 3 and we sort the list , then we should ideally redirected to page 1, can you suggest how to handle this.

    • |

      Set the ‘current-page’ property to desired page number, in this case to 1.

  65. |

    Hi Mr Rahil

    Thank you for this good tutorial, it was simple and very useful.

    I have a question, when i tried to display two tables in the same page using 2 different controllers, sorting and filter was working well but pagination was binded to both the two tables(if you click on page 2, you get page 2 on both tables) because it was one only object “pagination” in the $scope to deal with pagination.

    Can you please suggest anything that can fix this.
    Thank you very much.

    • |

      You are welcome Jemlifathi.
      I have already replied to this query several times, use the browser search to search for ‘pagination-id’ on this page, and you will find the solution.

  66. Amit Gupta

    Hello Rahil,

    Thanks for such a great tutorial. I am novice at angularjs but your tutorial really help me learning some of the basic things.

    Now I am trying using it with ionic framework with sideline template but angular.js used there conflicts with this one. And couldn’t able to use both modules (one related to sideline template and one ‘angularTable’ module used here) in app.js.

    Have you ever used this with ionic and if yes then please help me implementing there. Though I can able to implement in blank template but not in sideline template that used its own module. My purpose is to implement it in one of the ionic page and my other pages will also work in a perfect way.

    Thanks once again for such a great tutorial.

    • |

      Although I have never used it with ionic. This implementation should ideally work.

  67. blitzjunge

    Rahul, this is a great article. Thanks for sharing your knowledge.

  68. jai

    Hi Rahil,

    I have tried to use this pagenation directive for two gridviews with in the same page. it’s not working. Please suggest me a way to do this for two gridviews.

    • |

      You will have to use pagination-id. Check the dir-pagination documentation, I have also provided a solution in previous comments.

  69. |

    hey everyone this is not enough . i wanna change my url also with page number and serch options with ui-routing.
    also manage its state

  70. |

    Thanks Rahil. Really helpful

  71. |

    Hi Rahil,
    This library was really useful. Kudos to the work you’ve done…
    I’ve been trying to change the styles of pagination in the view.
    Is there any way that i can do it?
    I do wanna change the styles of it and the colors which suite my website’s theme.
    and some more custom stylings.

    • |

      You can add a custom template for the pagination links. You will find it in the documentation.

  72. |

    can you help me in cakephp 3.2?for same topic? And how a user login with fb,gmail in cakephp 3.2?with forget password and with change password?

  73. Chap

    how would you implement a select menu to choose from “hobby”?

    • |

      Just set the value of the filter variable using a dropdown.
      You can look for more on the offical doucumenation, on how to search for a specific property.
      And you can also cheeck our “custom filters in AngularJS” Tutorial for more info.

  74. |

    Thanks for posting awesome Article. i was using some github api’s for doing these things in my laravel project. Those reducing the page loading speed. This article very helpful to me. Thanks for sharing.

  75. |

    Hi Great article. Just have a question. If i want to use pagination for multiple list in one page i am not able to do it. If i change page in one pagination control then it changes the value in other controls as well. Please let me know how to fix it. Thanks in advance.

    • |

      Look for pagination-id in the documentation.

  76. Marcello

    That was just what i’m looking for! Thanks!

  77. |

    Hi, great article, just one thing I´m dealing with. If I want to add a user thumbnail to de json, how would you include it?

    • |

      Your JSON should return the web url to the thumbnail. Then you can display it using ‘ng-src’ directive. The images should be stored in any web location.

  78. |

    Thanks for the article, well written and very intuitive. I didn’t use the pagination because my server side was already doing that for me, but with this kind of component can I do external pagination? I mean getting data under demand, the next page to be a new request?

    Thanks for sharing.

    • |

      Check out our article on Server side pagination in AngularJS! It’s explained with the same component.

  79. |

    Great tuts, but i have a problem with searct title head in table. Not work when click id, first_name, last_name…

  80. |

    I fixed problem, very good. I likes you… 😀

    • |

      you have tuts creat, update, delete data to json file with angularJs. Thanks for give.

  81. |

    hey i have problem with manula number like this


    when i click to page 2 in pagination, the number in table back to 1 not continuing to 6

    please help thanks

    • |

      Use this formula.

      [((pagenumber – 1) * itemPerPage) + 1]

      • Donald

        Hi, Rahil

        Where and how could I get value of pagenumber? Could you give an expression? I’m stuck with it. Thanks!

  82. |

    Hai rahil,i have a problem in pagination,that is when i click to go next page in pagination the index number not starting which number is end in first page continue number not displaying it displaying again 1 and continue…please give me a solution.

    • |

      Hi Vinod, please check my reply for the above comment. That is what you are looking for. 🙂

  83. anupama

    Hai rahil,i have a problem in pagination. I have checkboxes with every row in the table. when i check one row in the 1st page and go to 2nd page and come back to the 1st, the checked row status is set to default(it becomes unchecked).. how to solve this? pls reply

    • |

      What are you using to hold the checked items? Ideally, it would be an array, you can use the onPageChange event to rerender the checkboxes based on the array values.
      I use this module for dealing ith checkboxes in ng-repeat.

  84. Jayaprakash

    Hi Rahil,

    Thanks for the great post. It is very simple and useful.

    I have a problem with pagination with search with two tables in the same page.

    Details: When I search for any string in first table and go to second table, pagination in the second table is adjusted for the filtered size of data in the first table. When I sort or go to second page in pagination, it works fine. That means it needs a refresh.

    Please help to resolve this.

  85. Sara

    Hi Rahil,

    Thank you very much for the tutorial. It was very helpful. However my table groups the data. For example when I use filter itmesPerPage: 2 , it displays 2 items per group instead of showing just 2 items, period. I used pagination-id and set that with the unique key that each item has, but it didn’t work.

    • |

      Pagination-id is supposed to be used per table and not per item. Read the dir-paginate documentation for clarification. Should be quite straight forward. Also please do not post the same comment with different names, it might get considered as spam. I try to reply to comments as soon as possible, but in some cases if I’m busy with something else it gets delayed. Please be patient.

  86. Jayaprakash

    Hi Rahil,
    Thank you for quick reply.
    I have one more problem. We don’t use bootstrap, so styling is missing. Can you pls tell me, how to add custom css styling.

  87. |

    Thank you very mach for this article! So simple and powerfool!

  88. kusuma

    while exporting,only one page is getting exported ,Is there any way to export all the pages while providing the above pagination

    • |

      Yes should be as easy as exporting the original array. Or if its getting altered by the this directive store a replica in some other object and refer to it for export.

  89. Ashok G

    hi rahil i need to display total records …..can u help me pls

    • Ashok G

      {{(icdslist| filter:q).length}} i got it myself.

  90. Girish Reddy Gunduluru

    Hi Rahil,
    By default I need to show ascending order for firstname on clicking on that it can show descending order again. for that what i need to change. Please help me.

  91. Domenico

    Hi, i get this error “angular is not defined”. How can I fix?

    • |

      Make sure angular.js is included into your index.html

  92. tom

    Great article. Save me a lot of time ! Thanks

  93. thrinay

    The article and your approach looks promising. I have a question, I have 3.5 lakh records that have server side pagination. I managed to work the pagination part. But, the search thing just checks the page elements that am currently in and not the other ones reason being it has server side pagination. How do you think that searching part works in alliance with your code. Help would really be glad to hear from your side, Thanks

    • |

      Whenever there is a new search term you have send the query to the backend and fetch the result and then paginate on those. I have done a blog on server side pagination, you may wanna check that out.

  94. ozzy

    Great tutorial ! i really appreciate it, i am having trouble implementing the pagination part, is there a way you can look at my code and guide me to what is going wrong? i would really appreciate it

    • |

      You can create a plnk or fidle and send me the link.

  95. Chandana

    Hi Rahil,

    I implemented sort in my app and it sorts the items across pages. I was wondering if there’s a solution to sort the items in the page. Any help would be appreciated.

  96. |

    Hi Rahil,
    I am new to angularJs. In our project we are fetching more than 10k record from rest API. So in this scenario how can i make search will work. will search all 10 k record ? how to optimize speed while searching record ?

  97. |

    Hey Rahil,

    dir-paginate is not work for me. could you let me know how to solve that issue?

    • |

      Why is it not working? Is it giving any errors? Need more details.

      • |

        No. it won’t given any error but it does not retrieve the values in the table.

  98. Anaid

    Do you know how I get the number of rows displayed?

    For example filter by ‘a’
    Show ‘number’ of total items

    Thank You

    • |

      You can always do array.length to fetch that.

  99. ridhi

    Thanks for article. Can anyone explain me how to keep column width consistent while sorting? It’s fluctuating as seen in demo.

  100. Anirban Mishra

    can we create the table in javascript…like putting all content under the table tags into a javascript variable and do an innerhtml and set it to that variable.

  101. |

    Hi Rahil.
    Thanks for this.

    How do I order on column by number?
    As it is now: if I have ca. 500 id’s. If I reverse sort, I get 99 first.

    Is there an easy solution to this?

    • |

      Hi. Thanks again.

      The solution was simply to change the id’s to integers: ‘Number(id)’
      Then in html {{ | number}}

  102. Jitendra Anjanpuri

    This article is very useful for paging.

  103. |

    Wow!! I found dirpagination third party tool before but afraid of implementing on my app. But after reading this article, i make my app exactly like this with dir-pagination module, shorting, filtering everything. Many many many thanks for this kind of article. Actually this article explained too easy way to implement to my app.

  104. Chandana

    Hi Rahil,

    I implemented sort in my app and it sorts the items across pages. I was wondering if there’s a solution to sort the items in the page. Any help would be appreciated.

    Thank you

  105. nalin

    this is good.thanks for sharing…

  106. Rifqy

    Hi Sahil, can i ask u something about pagination?
    How to show the pagination control even my data is empty?

  107. |

    Great article!!! Simple and clear!!! Thank a lot!

  108. nidhi

    How can i change the style of this pagination control???

  109. |

    Hi Do you know how to reset dir-paginate to point to page 1? I mean Make Page one active?

  110. |

    Nice tutorial, thanks for posting its very helpful for beginners.
    I bookmark this page.

  111. Shilpi Jain

    Great tutorial. Thanks.

  112. Rajesh Prabhu

    Nice Tutorial.
    I need one help, how can I set current Page? I am setting “current-page” like how we set “total-items” but it is not refreshing? Any idea?


  113. Muslim Gadriwala

    Great works ! Thank you so much

  114. Rupasri

    Thank u so much really it helped me a lot……

  115. |

    I have added sorting functionality in ng-repeat in SPA, it’s working as per expectation. I have menu with different menu items. Based on menu item click event data will be changed. Here I am facing an issue as I have clicked on My deals menu item data has been binded and applied sorting on one field. When I am clicked on any other menu item data has been binding but previous sorting key applied to this data also. Please help me how to reset applied sorting keys before binding new data to grid.

  116. sanka

    Thanks Dear…….

  117. Anitha

    dir pagination does not work properly ,when i gave 10 to itemperpage getting 20records ,but in pagination one and two working when i click next its showing disable mark in red color.actually i have 25 records .The pagination next is not working .

  118. |

    Thank you so much Rahil. You make my life easy 🙂

  119. |

    Hi Rahil, thanks for this perfect tutoral, it’s one of the best I’ve seen on searching/sorting/paging !

    Unfortunately I have something I can not figure out how to fix !

    On my pagination I can the “…” are disabled and I can’t click on it.

    I mean I have “[1][2][3][…][69]” and I can’t click on the […].

    Do you know how can I change this ?


  120. |

    Hi Rahil , Today fortunately i saw your because am searching for this example nearly two days finally i got it. Thanks for your effect. And the way how you are guiding the steps it’s too awesome.

    • |

      Thanks Poobendra, you can subscribe to stay updated. Lot’s of exciting stuff on Angular 2+ and Node.js coming up.

  121. |

    Nice article.. you have described it very simple also very helpful.. keep it up.. (Y)

  122. |

    Hey Rahil ,
    I was searching for this from past 3 days , finally got this and it helped me a lot.
    We have a timestamp field in our table. We are giving value as timeStamp:1495619189571 which after formatting is giving us correct date as 29/05/2017 03:04:54 PM.

    Now issue is – When we are searching say 71 in search box, we are getting this record. This is because 71 lies in timeStamp:1495619189571. This should not be the case. Request you to please share your inputs.

    • |

      The way I see it the best option you have is to create a custom filter.

      • |

        Hey Rahil , thanks for your suggestion . i have created one , but it is best for a limit of records like up to 1k or 2 k but for large number of records , it is taking too too time , it is hanging while i started typing in search text box . i have tried ng-model-options=”{debounce: 500}” too but it was not useful too. Can you please suggest something else that can make my searching fast.

  123. |

    This is just what I was looking for, worked fine for me.
    Thanks a lot

  124. |

    Hi, I love this tutorial! Thanks for this. I notice though when searching with the pagination, only what is on the current page is filtered. That is if I am searching for something that is not on the current page but on another page, then it will not show up. How can I search and the results come up, no matter which page I am on?

  125. |

    thank you so muchhhhhh… i manage to do it finallyy !

  126. |

    Hi Rahil, how can I align pagination to right of my page ,if I align now sequence of number in pagination is getting reverse.

  127. |

    Well…. Excellent job, but have I one question.
    If I have in database names with non English characters (e.g. Guerníca, Gústav, Günther etc…) and I will begin to write in search field “gu” the expected selection is all three names (Guerníca, Gústav, Günther), but in my case I get only the name Guerníca.
    Also characters o for (ó,ô,ö) or r for (ŕ,ř) etc…. (frequently in Czech, Slovak, Germans names)
    Interestingly, that small and capital letters are not sensitive.
    Can you any help me? Thanks.

    • |

      Hmm interesting, I’ll see if I can figure out something out.

  128. |

    very well explained, i hope you create more of this angular tools,
    best tutorial ive seen so far,

    • |

      Glad you enjoyed Kevin and yes you can subscribe to stay updated.

  129. |

    Please you help me for Saving Images , I want to save Image in my Project folder and path in my database . Please help me ,Please help me ,Please help me ,Please help me

  130. |

    How can we implement this pagination with Spring MVC controller…………

    Nice Tutorial

  131. |

    Awesome post bro…

  132. |

    Hello sir,
    This is aswsome tutorial for the implement the pagination in AngularJs.sir i have an question, how to load more data After click on the 2 page and how it is working internally.

  133. |

    Hey Rahil , great post.

    I am currently trying to implement this at work but we do not serve up our data in tables and instead call a separate directive after our ng-if, I am stuck as to how i could utilize the dir-pagination without tables. So i have ng-reapeat: -item in items > then after i call another directive that pulls the information for each field and styles it item = Item. But none of it plays nice with dir 🙁 Any advice is appreciated

  134. |

    Good tutorial! You have contribute to improve my project.

    Simple and clear 😀

  135. |

    user in users|filter:search|orderBy:sortKey:reverse|itemsPerPage:5|filter:search|orderBy:sortKey:reverse|itemsPerPage:5

    Use this code…the sorting will work in all pages

    • |

      There is something called as paginationId look it up in the library documentation. That would help.

  136. |

    Hi Rahil, thnks for this awesome post. But i’m stuck with my code, I want to get the id for the item and send it to a fuction at my app.js. But after implemented your post, it just stop work, it’s sandding a empty string to my function instead of the id value. Any idea what i am doing wrong? Bellow are the code part of my ng-repeat(in the case dir-paginate):


  137. |

    Thanks mate! its was really useful.

  138. |

    Hi Rabil,

    thanks for this wonderful article. I have one question , how to make filter apply on entire data set when pagination is in place. after the pagination implementation sort and filter applies only to the current data displayed. thanks in advance.

  139. |

    This is such a great guide. Thank you so much for this!

  140. |

    Getting this error at console, Please do rectify

    Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

  141. |

    I have 16 entries from table. I want to show message below at left bottom.

    Showing 1 to 10 of 16 entries

    How can it show that message.

  142. |

    ((pagenumber – 1) * itemPerPage) + 1

    it starts 1, 2, 3… 100. It is very good.

    but when I sorted it, the table sorted order by reversed row number. it is very good.

    but the row number starts 1, 2, 3.. 100 again…

    I want to get 100, 99, 98…. which are reversed row number.

  143. |

    Thank you, great publication

  144. |

    I have added the row like below.

    and there is a number in the first page starting from 1 but in the second page its again starts from ‘1’ rather than ’11’

    tag: angularjs

  145. |

    Thanks for posting, very easy and helpful to implement.

  146. |

    Awesome. I really needed it. Solved my pagination problem.
    One doubt:
    After applying this my serial no column ($index + 1) is restarting on each page, how to keep it continue.

    Thank you.

  147. |

    Can we used Expand/collapse using dir-paginate. we able to do expand/collapse using ng-repeat but when we are using dir-paginate not able to use. Let us know if any way to use Expand/collapse with dir-paginate. Thanks

  148. |

    Thank for the great post!!!

  149. |

    Hi man. when I use dir-paginate in place of ng-repeat data in my table disappeares. Can you please help me out?

  150. |

    Thank you! Very much helpful!

  151. |

    Hi Rahil,
    This was amazing!! This one post solved all of my problems!!


Leave a Comment