dirPagination – AngularJS Pagination, Sorting and Searching

This is a simple angularjs pagination example using angular 1.5+. This Tutorial will demonstrate record listing with pagination, sorting, and searching. I am using third-party angular libs, that convert the simple listing table into pagination with searching features.

I will use dirPagination libs, It’s very simple and easy to use. You can integrate with any angualr 1.4+ version, not for 2/4/6,.

For angular 2+ – They are providing separate components that help to add pagination and sorting.

I was using angular data table for listing and pagination but it was too slow on 200+ records, So I have found this lib for pagination with performance, it’s too fast compared to other table list pagination libs. The dirPagination is truly plug-n-play libs and doesn’t need any set-up or logic in your angularjs controller. It’s compatible with Bootstrap 3 as well.

The dir-paginate help to iterate on items and list within table. We will display them with the ng-repeat directive.

<ul><li>{{ item }}</li></ul>

The dir-pagination-controls directory helps to create pagination nav links and navigate to a particular page.

How to Install Angular-utils-pagination

There is two methods to install package with angularjs, You can use bower or npm to install packages.

npm install angular-utils-pagination

I am not using node package manager So I’ll download dirPagination.js file from GitHub and include into index.html file.

<script src="/assets/libs/dirPagination/dirPagination.js" type="text/javascript"></script>

Fetch Data Using HTTP Angular Service From Server

Angularjs is providing HTTP service to get data from the server using restful API. I have created HTTP rest call to get data from PHP rest API, Added below code into app.js controller file.

var request = {
method: 'get', 
url: appConfig.apiPrefix + '/employees/',
data : '',
headers: {
}
};
function get_employees(){
var employees = [];
$http(request).success(function(response){
if(angular.isDefined(response.results)) {
$scope.employees = response.results;
});
}
}).error(function(){
console.log('Unable to get employees data.');
}).finally(function(){ 
});
}

get_employees();

The Angularjs HTTP Request Params are:

• method – This is HTTP method type, We are Using GET Type HTTP call so I have passe GET.
• url – This is HTTP Rest API URL.
• data – This will use to send data with HTTP request to the server.
• headers – Use to send extra header information to the server, like base64 string for authentication, request data format etc.

How to Use dirPagination Libs Into Angular Apps

First, You need to include the module in your project, as like below:

// in your app
angular.module('testApp', ['angularUtils.directives.dirPagination']);

Now, We will call the listing and pagination directory into index.html file:

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Salary</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>- {{req.name}}</td>
            <td>{{req.salary}}</td>
            <td>{{req.age}}</td>
        </tr>
        <tr>
            <td>No records found!</td>
        </tr>
    </tbody>
</table>

As you can see above code, I have associted sort() method with name column for sorting, I will define this method later on in this tutorial. I have used some inbuilt directives of dirPagination:

• dir-paginate – Use to iterate on records and display data into table row.
• dir-pagination-controls – Display pagination into table.
• max-size – The miximum number of pagination links to display.
• direction-links – Use to display direction nav link(“forwards” & “backwards” arrows) in the pagination.
• boundary-links – Use to display the “start” & “end” arrows in the pagination..

How to Add Searching With Angular Table Listing

Angularjs providing $filter service to filter results based on passed search value, We will pass filter service within dir-paginate directive.

dir-paginate="req in employees|filter:search|itemsPerPage:10"

Now, Create the search input element into index.html file.

<div class="col-xs-12 well">
<div class="col-sm-4 pull-right">
<div class="active-cyan-3 active-cyan-4 mb-4"><input class="form-control" type="text" placeholder="Search" aria-label="Search"></div>
</div>
</div>

How to Add Sorting With Angular Table Listing

To apply sorting into the table listing, We will create a sort method and pass the column name as a parameter.

We will define sortBy method in app.js the controller file.

$scope.sort = function(keyname){
$scope.sortKey = keyname; //the sort column name
$scope.isASC = !$scope.isASC; // ASC/DESC sorting
}