Search Sort and Pagination in ng-repeat – AngularJS

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

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

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="lib/angular/angular.js"></script>
        <script src="app/app.js"></script>
  </body>
</html>

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.

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.

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

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

Further Links

Like our articles? Get them straight to your inbox!

* indicates required
Search Sort and Pagination in ng-repeat – AngularJS
Tagged on:             

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

  • June 5, 2015 at 2:50 pm
    Permalink

    Thank you for the effort in posting this.

    Reply
      • June 12, 2015 at 2:57 pm
        Permalink

        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

        Reply
        • June 13, 2015 at 2:30 pm
          Permalink

          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/

          Reply
          • June 22, 2015 at 4:15 pm
            Permalink

            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/

          • June 24, 2015 at 4:18 am
            Permalink

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

          • June 24, 2015 at 10:48 am
            Permalink

            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

          • August 6, 2015 at 4:30 pm
            Permalink

            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

          • August 8, 2015 at 2:26 pm
            Permalink

            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.

          • August 21, 2015 at 2:07 pm
            Permalink

            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

          • August 22, 2015 at 5:03 am
            Permalink

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

          • August 13, 2015 at 11:25 am
            Permalink

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

          • August 13, 2015 at 12:15 pm
            Permalink

            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.

          • August 13, 2015 at 12:48 pm
            Permalink

            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

      • September 21, 2015 at 5:14 am
        Permalink

        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.

        Reply
        • September 21, 2015 at 5:55 am
          Permalink

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

          Reply
    • September 3, 2015 at 5:14 am
      Permalink

      This code is not working in Chrome and IE browser

      Reply
      • September 3, 2015 at 10:04 am
        Permalink

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

        Reply
    • April 21, 2016 at 3:21 am
      Permalink

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

      Reply
  • June 9, 2015 at 3:42 pm
    Permalink

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

    Reply
    • June 10, 2015 at 4:50 pm
      Permalink

      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.

      Reply
    • June 10, 2015 at 4:47 pm
      Permalink

      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>
      Reply
  • June 9, 2015 at 5:34 pm
    Permalink

    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

    Reply
    • June 10, 2015 at 4:54 pm
      Permalink

      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.

      Reply
  • June 22, 2015 at 7:33 am
    Permalink

    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?

    Reply
      • June 23, 2015 at 6:57 am
        Permalink

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

        Reply
        • June 24, 2015 at 4:16 am
          Permalink

          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.

          Reply
  • June 25, 2015 at 6:35 am
    Permalink

    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

    Reply
    • June 25, 2015 at 12:30 pm
      Permalink

      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.

      eg:

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

      Hope this helps! 🙂

      Reply
      • June 26, 2015 at 5:14 am
        Permalink

        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.

        Reply
        • July 4, 2015 at 9:17 am
          Permalink

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

          Reply
  • July 3, 2015 at 10:41 pm
    Permalink

    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?

    Reply
    • July 4, 2015 at 9:16 am
      Permalink

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

      Reply
      • July 4, 2015 at 3:39 pm
        Permalink

        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

        Reply
    • July 10, 2015 at 4:57 am
      Permalink

      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.

      Reply
    • July 10, 2015 at 12:38 pm
      Permalink

      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.

      Reply
      • July 10, 2015 at 12:40 pm
        Permalink

        I apologize for all the typo errors in my comments.

        Reply
      • July 14, 2015 at 4:46 am
        Permalink

        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.

        Reply
  • July 27, 2015 at 12:56 pm
    Permalink

    Great one, thank you !!

    Reply
  • July 28, 2015 at 5:07 am
    Permalink

    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

    Reply
    • July 28, 2015 at 8:53 am
      Permalink

      Hi Kishan, did you try this?

      <span ng-show="(user in users|filter:search).length == 0">No Result</span>
      Reply
      • July 28, 2015 at 10:44 am
        Permalink

        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

        Reply
        • July 28, 2015 at 2:59 pm
          Permalink

          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.

          Reply
          • July 29, 2015 at 4:54 am
            Permalink

            Thanks lot rahil,

            Its Working… Thank you So much

  • July 28, 2015 at 7:57 am
    Permalink

    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.

    Reply
  • July 28, 2015 at 11:42 am
    Permalink

    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.

    Reply
    • July 28, 2015 at 3:01 pm
      Permalink

      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.

      Reply
    • July 30, 2015 at 6:08 am
      Permalink

      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.

      Reply
  • July 31, 2015 at 1:00 pm
    Permalink

    Nice and simple explanation

    Loved to read documentation

    Thanks buddy

    Reply
  • August 3, 2015 at 6:02 am
    Permalink

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

    Reply
    • August 4, 2015 at 4:32 am
      Permalink

      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.

      Reply
  • August 18, 2015 at 9:48 am
    Permalink

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

    Reply
  • August 18, 2015 at 10:47 am
    Permalink

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

    Reply
  • August 19, 2015 at 9:18 am
    Permalink

    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:

    Reply
  • September 2, 2015 at 8:19 am
    Permalink

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

    Reply
    • October 27, 2015 at 8:12 am
      Permalink

      how to make it to work on selected pages

      Reply
  • September 10, 2015 at 6:15 pm
    Permalink

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

    Reply
  • September 13, 2015 at 12:12 pm
    Permalink

    Thanks a lot………………. 🙂

    Reply
  • September 15, 2015 at 6:42 pm
    Permalink

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

    Reply
    • September 16, 2015 at 5:45 am
      Permalink

      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.

      Reply
  • September 16, 2015 at 12:28 am
    Permalink

    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

    Reply
    • September 16, 2015 at 5:46 am
      Permalink

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

      Reply
  • September 16, 2015 at 12:09 pm
    Permalink

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

    Reply
  • September 16, 2015 at 4:52 pm
    Permalink

    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.

    Reply
    • September 18, 2015 at 5:02 am
      Permalink

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

      Reply
  • September 17, 2015 at 5:34 pm
    Permalink

    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

    Reply
  • October 7, 2015 at 1:54 pm
    Permalink

    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″

    Reply
    • October 10, 2015 at 5:26 am
      Permalink

      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.

      Reply
  • October 26, 2015 at 7:23 am
    Permalink

    THANK YOU ! ! ! !

    Reply
  • October 27, 2015 at 7:19 am
    Permalink

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

    Reply
  • October 27, 2015 at 8:15 am
    Permalink

    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

    Reply
  • November 4, 2015 at 3:16 pm
    Permalink

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

    Reply
  • November 8, 2015 at 11:01 am
    Permalink

    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!

    Reply
  • November 17, 2015 at 11:00 am
    Permalink

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

    Reply
  • November 20, 2015 at 7:23 am
    Permalink

    Fantastic article, very helpful..Thank you Rahil

    Reply
  • November 23, 2015 at 1:51 pm
    Permalink

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

    Reply
  • December 2, 2015 at 12:01 pm
    Permalink

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

    Reply
  • December 2, 2015 at 12:37 pm
    Permalink

    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?

    Reply
    • December 3, 2015 at 4:38 am
      Permalink

      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.

      Reply
  • December 2, 2015 at 3:28 pm
    Permalink

    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

    Reply
    • December 3, 2015 at 4:40 am
      Permalink

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

      Reply
  • December 8, 2015 at 7:25 am
    Permalink

    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.

    Reply
    • December 9, 2015 at 9:16 am
      Permalink

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

      Reply
  • December 8, 2015 at 2:53 pm
    Permalink

    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.

    Reply
    • December 8, 2015 at 2:55 pm
      Permalink

      You’ve done a great job!

      Reply
      • December 9, 2015 at 9:55 am
        Permalink

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

        Reply
        • December 9, 2015 at 10:29 am
          Permalink

          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.

          Reply
          • December 10, 2015 at 7:58 am
            Permalink

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

  • December 16, 2015 at 9:19 pm
    Permalink

    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 🙂

    Reply
  • December 19, 2015 at 9:32 am
    Permalink

    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.

    Reply
  • December 22, 2015 at 6:36 am
    Permalink

    Nice Article.

    Reply
  • December 24, 2015 at 11:12 pm
    Permalink

    Thank you very much

    Reply
  • January 5, 2016 at 4:05 am
    Permalink

    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

    Reply
    • January 5, 2016 at 5:23 am
      Permalink

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

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

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

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

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

      Hope, this will help you.
      Thanks.

      Reply
  • January 7, 2016 at 4:44 pm
    Permalink

    Thank you. Your tutorial was very helpful.

    Reply
  • January 8, 2016 at 11:11 am
    Permalink

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

    Reply
  • January 13, 2016 at 5:52 pm
    Permalink

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

    Reply
  • January 14, 2016 at 3:42 am
    Permalink

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

    GOD BLESS

    Reply
    • January 14, 2016 at 6:51 am
      Permalink

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

      Reply
  • January 20, 2016 at 10:55 am
    Permalink

    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

    Reply
  • January 20, 2016 at 4:52 pm
    Permalink

    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.

    Reply
    • January 21, 2016 at 4:23 am
      Permalink

      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` http://plnkr.co/edit/Wtkv71LIqUR4OhzhgpqL?p=preview

      Reply
      • January 21, 2016 at 11:43 am
        Permalink

        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.

        Reply
  • January 21, 2016 at 3:02 pm
    Permalink

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

    Reply
      • February 1, 2016 at 10:39 am
        Permalink

        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!

        Reply
  • February 5, 2016 at 6:11 pm
    Permalink

    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.

    Reply
    • February 6, 2016 at 8:47 am
      Permalink

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

      Reply
  • February 8, 2016 at 8:09 am
    Permalink

    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.

    Reply
    • February 8, 2016 at 11:13 am
      Permalink

      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.

      Reply
  • February 12, 2016 at 2:58 am
    Permalink

    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

    Reply
  • February 15, 2016 at 6:04 pm
    Permalink

    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.

    Reply
  • February 26, 2016 at 5:13 pm
    Permalink

    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?

    Reply
    • February 27, 2016 at 5:12 am
      Permalink

      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.

      Reply
  • February 29, 2016 at 7:51 am
    Permalink

    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.

    Reply
  • March 5, 2016 at 8:33 pm
    Permalink

    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!

    Reply
    • March 7, 2016 at 5:06 am
      Permalink

      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.

      Reply
  • March 10, 2016 at 7:30 am
    Permalink

    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.

    Reply
    • March 11, 2016 at 9:12 am
      Permalink

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

      Reply
  • March 12, 2016 at 8:41 pm
    Permalink

    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.

    Reply
    • March 13, 2016 at 5:45 am
      Permalink

      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.

      Reply
  • March 21, 2016 at 12:39 pm
    Permalink

    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.

    Reply
    • March 23, 2016 at 4:41 am
      Permalink

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

      Reply
  • April 2, 2016 at 12:12 pm
    Permalink

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

    Reply
  • April 20, 2016 at 10:03 am
    Permalink

    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.

    Reply
    • April 21, 2016 at 5:38 am
      Permalink

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

      Reply
  • April 26, 2016 at 6:03 am
    Permalink

    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

    Reply
  • May 10, 2016 at 6:37 am
    Permalink

    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.

    Reply
    • May 10, 2016 at 7:50 am
      Permalink

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

      Reply
  • May 19, 2016 at 4:46 am
    Permalink

    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?

    Reply
  • June 28, 2016 at 4:40 pm
    Permalink

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

    Reply
    • June 30, 2016 at 4:15 am
      Permalink

      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.

      Reply
  • June 29, 2016 at 10:37 am
    Permalink

    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.

    Reply
  • June 30, 2016 at 2:28 am
    Permalink

    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.

    Reply
  • July 14, 2016 at 1:16 am
    Permalink

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

    Reply
  • July 15, 2016 at 6:54 am
    Permalink

    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?

    Reply
    • July 17, 2016 at 9:34 am
      Permalink

      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.

      Reply
  • July 19, 2016 at 4:49 pm
    Permalink

    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.

    Reply
    • July 20, 2016 at 5:00 am
      Permalink

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

      Reply
  • July 31, 2016 at 6:41 am
    Permalink

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

    Reply
    • July 31, 2016 at 7:03 am
      Permalink

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

      Reply
  • August 1, 2016 at 7:51 am
    Permalink

    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

    Reply
  • August 1, 2016 at 1:11 pm
    Permalink

    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.

    Reply
    • August 1, 2016 at 3:07 pm
      Permalink

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

      Reply
  • August 5, 2016 at 9:29 am
    Permalink

    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

    Reply
  • August 22, 2016 at 10:53 am
    Permalink

    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.

    Reply
  • August 24, 2016 at 8:46 pm
    Permalink

    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.

    Reply
    • August 26, 2016 at 6:10 am
      Permalink

      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.

      Reply
  • August 24, 2016 at 10:58 pm
    Permalink

    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

    Reply
  • August 25, 2016 at 3:15 pm
    Permalink

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

    Reply
  • September 2, 2016 at 7:59 am
    Permalink

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

    Reply
    • September 2, 2016 at 12:17 pm
      Permalink

      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.

      Reply
  • September 6, 2016 at 7:02 am
    Permalink

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

    Reply
    • September 6, 2016 at 8:25 am
      Permalink

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

      Reply
  • September 10, 2016 at 6:24 am
    Permalink

    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.

    Reply
  • September 22, 2016 at 9:58 am
    Permalink

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

    Reply
  • September 27, 2016 at 6:52 am
    Permalink

    Great article. Save me a lot of time ! Thanks

    Reply
  • September 29, 2016 at 12:27 pm
    Permalink

    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

    Reply
    • September 29, 2016 at 2:32 pm
      Permalink

      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.

      Reply
  • October 3, 2016 at 5:39 pm
    Permalink

    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

    Reply
  • October 4, 2016 at 10:48 pm
    Permalink

    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.

    Reply
  • October 5, 2016 at 5:53 am
    Permalink

    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 ?

    Reply
  • October 19, 2016 at 5:10 pm
    Permalink

    Hey Rahil,

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

    Reply
    • October 20, 2016 at 4:31 am
      Permalink

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

      Reply
      • October 20, 2016 at 10:02 am
        Permalink

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

        Reply
  • October 19, 2016 at 7:58 pm
    Permalink

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

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

    Thank You

    Reply
  • October 27, 2016 at 8:25 am
    Permalink

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

    Reply
  • October 30, 2016 at 2:54 am
    Permalink

    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.

    Reply
  • December 12, 2016 at 11:56 pm
    Permalink

    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?

    Reply
    • December 13, 2016 at 12:06 am
      Permalink

      Hi. Thanks again.

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

      Reply
  • December 15, 2016 at 3:39 am
    Permalink

    This article is very useful for paging.
    Thanks

    Reply
  • December 18, 2016 at 5:11 am
    Permalink

    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.

    Reply
  • January 4, 2017 at 7:29 pm
    Permalink

    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

    Reply
  • January 23, 2017 at 5:30 pm
    Permalink

    this is good.thanks for sharing…

    Reply
  • February 13, 2017 at 3:53 am
    Permalink

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

    Reply
  • February 15, 2017 at 12:19 pm
    Permalink

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

    Reply
  • February 17, 2017 at 10:31 am
    Permalink

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

    Reply
  • February 22, 2017 at 9:09 am
    Permalink

    Great tutorial. Thanks.

    Reply
  • February 24, 2017 at 5:17 am
    Permalink

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

    Thanks,

    Reply
  • February 26, 2017 at 2:11 pm
    Permalink

    Great works ! Thank you so much

    Reply
  • March 15, 2017 at 6:09 am
    Permalink

    Thank you so much…
    It really worked well…!!!!

    Reply

Leave a Reply