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

Roadmap

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 )

VIDEO  DEMO  DOWNLOAD

Watch Video

Setup

First let’s set up our files.

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

index.html
<!doctype html>
<html lang="en" ng-app="angularTable">
  <head>
    <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">
  </head>
  <body>
    <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>
                    <div class="bs-component" ng-controller="listdata">
                    </div>
                </div>
      </div>
    </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.1/angular.js"></script>
        <script src="app/app.js"></script>
  </body>
</html>

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

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

mock.json
[{"id":1,"first_name":"Heather","last_name":"Bell","hobby":"Eating"},
{"id":2,"first_name":"Andrea","last_name":"Dean","hobby":"Gaming"},
{"id":3,"first_name":"Peter","last_name":"Barnes","hobby":"Reading Books"},
{"id":4,"first_name":"Harry","last_name":"Bell","hobby":"Youtubing"},
{"id":5,"first_name":"Deborah","last_name":"Burns","hobby":"Fishing"},
{"id":6,"first_name":"Larry","last_name":"Kim","hobby":"Skipping"},
{"id":7,"first_name":"Jason","last_name":"Wallace","hobby":"Football"},
.....,
......,
{"id":25,"first_name":"Russell","last_name":"Patterson","hobby":"Singing"}]

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.js
app.controller('listdata',function($scope, $http){
    $scope.users = []; //declare an empty array
    $http.get("mockJson/mock.json").success(function(response){
        $scope.users = response;  //ajax request to fetch data into $scope.data
    });
});

In our markup

ng-repeat="user in users"

This statement will repeat over the users.

index.html
....

<div class="bs-component" ng-controller="listdata">
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th>Id</th>
                                    <th>First Name</th>
                                    <th>Last Name</th>
                                    <th>Hobby</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="user in users">
                                    <td>{{user.id}}</td>
                                    <td>{{user.first_name}}</td>
                                    <td>{{user.last_name}}</td>
                                    <td>{{user.hobby}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

....

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 let’s add filtering for the list of users. Adding search in AngularJs is very easy, Angular comes in with lots of awesome built-in 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.

Let’s add our search bar just above our table.

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

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.

app.js
    $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.

index.html
    <thead>
        <tr>
            <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>
        </tr>
    </thead>

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.

index.html
 <thead>
        <tr>
            <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>
            <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>
            <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>
            <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>
            </th>
        </tr>
    </thead>
Data sorted by id
Data sorted by id

Woah! Our app just had search and now it has a 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.

Installation

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.

dirPagination.js

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.

index.html
 <tbody>
        <tr dir-paginate="user in users|orderBy:sortKey:reverse|filter:search|itemsPerPage:5">
            <td>{{user.id}}</td>
            <td>{{user.first_name}}</td>
            <td>{{user.last_name}}</td>
            <td>{{user.hobby}}</td>
        </tr>
    </tbody>

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.

index.html
 <dir-pagination-controls
        max-size="5"
        direction-links="true"
        boundary-links="true" >
    </dir-pagination-controls>

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


pagination
pagination

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

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

th {
    cursor:pointer;
}

Conclusion

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 a better User Experience for your applications. Now that you know, you can add them to your projects.

240 Comments

      1. 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. 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 : http://code.ciphertrick.com/2015/02/07/live-search-using-custom-filter-in-angular-js/

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

            https://jsfiddle.net/emilonlinester/f6rs7nx4/

          2. 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. 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. 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 http://www.sigma-aldrich.com 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

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

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

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

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

          9. 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 openrecipesearch.com. 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. 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. 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 – 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. 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.

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

    Cheers

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

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

  4. 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. Thanks Kishan,
      If you see the below line

      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.

      eg:

      Hope this helps! 🙂

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

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

        thnx

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

  6. 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 users..like( no records are found).. in which part I have to modify/edit.. to display that above message. please let me know

      1. 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 }}
        {{user.username}}
        {{user.email}}
        Client
        Vendor
        Active
        Pending

        Edit
        Delete

        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.
          No Result
          This should solve your problem.

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

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

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

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

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

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

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

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

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

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

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

    tks

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

  15. 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|filter:cectr.search|itemsPerPage:5″

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

  17. 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?)
    Thanks!

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

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

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

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

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

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

  24. Hi,
    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.

  25. Hello,
    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

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

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

    GOD BLESS

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

    5
    10
    15

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  44. hey i have problem with manula number like this

    {{$index+1}}
    {{itemusers.name}}

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

    please help thanks

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Thank You

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

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

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

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

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

Leave a Reply

Your email address will not be published.