All AngularJS Javascript
Rahil Shaikh  

Search Sort and Pagination in ng-repeat – 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 these in your Angular applications.

Note: This is a tutorial for Angular 1, if you are looking for pagination 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 ( filter )
  3. Implement sort ( orderBy )
  4. Implement pagination ( 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="lib/angular/angular.js"></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.

240 thoughts on “Search Sort and Pagination in ng-repeat – AngularJS

  1. Don Cistaro

    Thank you for the effort in posting this.

    1. Rahil Shaikh

      Your welcome Don, thanks for stopping by and commenting.

      1. 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

        1. Rahil Shaikh

          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 :

          1. 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.


          2. Rahil Shaikh

            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. 🙂

          3. 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

          4. Rahil Shaikh

            Okay Sure!

          5. 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

          6. Rahil Shaikh

            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.

          7. 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

          8. Rahil Shaikh

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

          9. 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.???

          10. Rahil Shaikh

            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.

          11. 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

        2. Rahil Shaikh

          Hi Don, I’ve written a new article on Custom Filters in angularJS. I’ve implemented a custom filter similar to what you’ve asked as example.

          Might help if you are still looking for it!
          Cheers 🙂

      2. 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.

        1. Rahil Shaikh

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

    2. vishnu

      This code is not working in Chrome and IE browser

      1. Rahil Shaikh

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

    3. 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!!

      1. Rahil Shaikh


  2. pulkitsinghal

    @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?

    1. Rahil Shaikh

      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. elijaxMoises

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

    1. Rahil Shaikh

      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:


    1. Rahil Shaikh

      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. YY

    can we set the current page by default? example:

    1. Rahil Shaikh

      Hey there, dirPaginate exposes an optional attribute as “current-page” that can be used to set the current page.
      So in our example .

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

      Not tried it myself, but this should work.

      You can also refer to this doc.

  6. 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?

    1. Rahil Shaikh

      Yes Hank, in that case you should use server side paging where the server will only return you data for one-page and as you click on next page you make another request to get the next set of data.
      dirPagination gives you a nice setup to do this.

      1. 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?

        1. Rahil Shaikh

          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.

  7. 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

    1. Rahil Shaikh

      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! 🙂

      1. 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.

        1. Rahil Shaikh

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

  8. James Van Leuven

    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?

    1. Rahil Shaikh

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

      1. James Van Leuven

        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 🙂


        1. Rahil Shaikh


  9. Desmond

    Thanks for the beautiful article.

    1. Rahil Shaikh

      You are welcome Desmond!

  10. Gustavo Romero-Vargas

    how i can have it working on 2 tables in the same page?

    1. Rahil Shaikh

      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.

    2. 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.

      1. Don Cistaro

        I apologize for all the typo errors in my comments.

      2. Rahil Shaikh

        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.

  11. rinatoptimus (@rinatoptimus)

    Great tutorial, thank you!

    1. Rahil Shaikh

      Your Welcome!

  12. Teja

    Great one, thank you !!

    1. Rahil Shaikh

      You are welcome, glad this helped you.

  13. 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

    1. Rahil Shaikh

      Hi Kishan, did you try this?

      <span ng-show="(user in users|filter:search).length == 0">No Result</span>
      1. 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 }}


        1. Rahil Shaikh

          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.

          1. kishan

            Thanks lot rahil,

            Its Working… Thank you So much

          2. Rahil Shaikh

            You’re welcome!

  14. 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.

  15. 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.

    1. Rahil Shaikh

      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.

  16. Yassir

    Thanks Rahil,

    I have a question, i follow tutorial ( to create pagination “load more button” and success.

    How can i add search feature to find all data in my Json file (like tutorial above).

    1. Rahil Shaikh

      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.

  17. Vikas Sharma

    Nice and simple explanation

    Loved to read documentation

    Thanks buddy

    1. Rahil Shaikh

      Thanks for stopping by, glad you liked it!

  18. Vidhya

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

    1. Rahil Shaikh

      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.

  19. raghavendra

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

    1. Rahil Shaikh

      You are welcome, thanks for stopping by.

  20. Imran

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

    1. Rahil Shaikh

      You are welcome, glad this was useful to you.

  21. 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:

  22. vijay soni

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

    1. Rahil Shaikh

      Hey Vijay, it sorts records for all pages.

    2. Bhargavi M

      how to make it to work on selected pages

  23. Omar

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

    1. Rahil Shaikh

      Glad it helped you!

  24. Priyank srivastava

    Thanks a lot………………. 🙂

    1. Rahil Shaikh

      You’re welcome!

  25. Ahmad

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

    1. Rahil Shaikh

      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.

  26. 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

    1. Rahil Shaikh

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

  27. 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

    1. Rahil Shaikh

      Glad it helped you 🙂

  28. 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.

  29. valleteclark12

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

    1. Rahil Shaikh

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

  30. valleteclark12

    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


    1. Rahil Shaikh

      Check my tutorial on Server side pagination.

      1. peZhman

        Hello Rahil,

        Thank you a lot for this post.

        In addition to server side paging, i want to use sorting, and filtering features and handle this features in server side.

  31. 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″

    1. Rahil Shaikh

      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.

  32. Aying Man

    THANK YOU ! ! ! !

    1. Rahil Shaikh

      You are welcome!

  33. Bhargavi M

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

  34. 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

  35. pp

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

  36. 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?)

  37. Prasad Parab

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

    1. Rahil Shaikh

      You’re welcome!

  38. Chirag

    Fantastic article, very helpful..Thank you Rahil

    1. Rahil Shaikh

      Welcome Chirag! Thanks for stopping by.

  39. kkanagan

    Hi How to change URL with paging?.,

  40. pp

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

  41. Wai Yan Aung

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

    1. Rahil Shaikh

      You are welcome.

  42. 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?

    1. Rahil Shaikh

      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.

  43. 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

    1. Rahil Shaikh

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

  44. hs

    Awesome Job man

  45. 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.

    1. Rahil Shaikh

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

  46. 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.

    1. Ivan

      You’ve done a great job!

    2. Rahil Shaikh

      Could you please tell more about your problem.

      1. Ivan

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

        1. 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.

          1. Ivan

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

  47. ada

    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 🙂

  48. Femi

    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.

    1. Femi

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

      1. Rahil Shaikh

        Great! You are welcome.

  49. Venu Kotagiri

    Nice Article.

  50. Mohamed Emam

    Thank you very much

  51. 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

    1. Inaam Hussain

      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.

  52. Dimebag

    Thank you. Your tutorial was very helpful.

    1. Rahil Shaikh

      You are welcome!

  53. fabio

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

  54. Nagaraju

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

  55. Girma M.

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


    1. Rahil Shaikh

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

  56. Lin Wanfei

    Thank you, Rahil. This code is very helpful~

    1. Rahil Shaikh

      Glad it was useful.

  57. 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.


  58. 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.

    1. Rahil Shaikh

      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`

      1. 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.

  59. johanneskeim

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

    1. Rahil Shaikh

      Glad it was helpful 🙂

      1. 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!

  60. Jonathan Quiñonez

    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.

    1. Rahil Shaikh

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

  61. Mayank Rathor

    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.

    1. Rahil Shaikh

      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.

  62. 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

  63. 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.

  64. Jonathan Quiñonez

    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?

    1. Rahil Shaikh

      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.

    2. Jonathan Quiñonez

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

  65. Muhammad Rauuf

    your tutorial helped me a lot, thanks 😀

    1. Rahil Shaikh


  66. 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.

    1. Rahil Shaikh

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

  67. Justin Mancherje

    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!

    1. Rahil Shaikh

      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.

  68. 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.

    1. Rahil Shaikh

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

  69. jemlifathi

    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.

    1. Rahil Shaikh

      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.

  70. 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.

    1. Rahil Shaikh

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

  71. blitzjunge

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

    1. Rahil Shaikh

      My pleasure!

  72. 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.

    1. Rahil Shaikh

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

  73. Khurshid Alam

    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

  74. Kapil

    Thanks Rahil. Really helpful

  75. msaiyaff

    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.

    1. Rahil Shaikh

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

  76. mandeepkhaleriyam

    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?

  77. Haroon Ansari

    Find out the solution THANKS

  78. John Marc Malunao

    Very useful, thank you Sir.

  79. Ritika Nigam

    Great Article Indeed!!

  80. Chap

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

    1. Rahil Shaikh

      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.

  81. Lokesh

    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.

  82. Imran Ahmed

    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.

    1. Rahil Shaikh

      Look for pagination-id in the documentation.

  83. Marcello

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

  84. veronica

    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?

    1. Rahil Shaikh

      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.

  85. Guylherme Tabosa

    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.

    1. Rahil Shaikh

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

  86. luonghuynh

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

  87. luonghuynh

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

    1. luonghuynh

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

  88. devan

    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

    1. Rahil Shaikh

      Use this formula.

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

      1. nb

        How do I use the above mentioned formula in html? Do I use paginate or pagination control directive? Or I have to inject paginationservice in controller? Its unclear, can you explain?

        1. nb

          Here is what I did to get it working. Added current-page attribute with current_page value from controller on dir-paginate directive. Used it as baseline to calculate correct index based on following formula. {{ (($scope.current_page-1) * 10) + 1 + $index}}. This is working well with sort and paginate controls.
          Is this the correct way?

  89. vinod miriyala

    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.

    1. Rahil Shaikh

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

  90. vinod miriyala

    ti’s not working,give me another solution

  91. 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

    1. Rahil Shaikh

      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.

  92. 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.

    1. Rahil Shaikh

      Use pagination-id.

  93. 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.

    1. Rahil Shaikh

      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.

  94. 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.

  95. Alla

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

  96. kusuma

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

    1. Rahil Shaikh

      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.

  97. Ashok G

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

    1. Ashok G

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

  98. 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.

  99. Domenico

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

    1. Rahil Shaikh

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

  100. tom

    Great article. Save me a lot of time ! Thanks

  101. 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

    1. Rahil Shaikh

      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.

  102. 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

    1. Rahil Shaikh

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

  103. 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.

  104. adarshs241

    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 ?

  105. cricketlifeweb

    Hey Rahil,

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

    1. Rahil Shaikh

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

      1. cricketlifeweb

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

  106. Anaid

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

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

    Thank You

    1. Rahil Shaikh

      You can always do array.length to fetch that.

  107. sokphea chea (@csokphea)

    Thanks, I’m a beginner of AngularJS and it’s very helpful.

  108. ridhi

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

  109. sokphea (@csokphea)

    [email protected] Hello, you can set a width on your td.

  110. 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.

  111. Joan Sanchez

    Awesome! Thank you so much!

  112. Bogi S

    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?

    1. Bogi S

      Hi. Thanks again.

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

  113. Jitendra Anjanpuri

    This article is very useful for paging.

  114. fawel

    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.

  115. 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

  116. nalin

    this is good.thanks for sharing…

  117. Rifqy

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

  118. Raffaele Venafra

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

  119. nidhi

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

  120. Rajesh Prabhu

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

Leave A Comment