Angularjs table sorting, filter and paging
This post provides an example about how create a table via sorting, filter and paging. Following directives and services in angularjs will be used:- orderby
- filter
- ng-click
- ng-model
- ng-repeat
<!DOCTYPE html>
<html>
<head>
<title>Angular JS table sort and filter example </title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://code.angularjs.org/1.4.8/angular.js"></script>
<script src="http://code.angularjs.org/1.4.8/angular-resource.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script>
var app = angular.module('MyForm', ['ui.bootstrap', 'ngResource']);
app.controller('myCtrl', function ($scope) {
$scope.predicate = 'name';
$scope.reverse = true;
$scope.currentPage = 1;
$scope.order = function (predicate) {
$scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
$scope.predicate = predicate;
};
$scope.students = [
{ name: 'Kevin', age: 25, gender: 'boy' },
{ name: 'John', age: 30, gender: 'girl' },
{ name: 'Laura', age: 28, gender: 'girl' },
{ name: 'Joy', age: 15, gender: 'girl' },
{ name: 'Mary', age: 28, gender: 'girl' },
{ name: 'Peter', age: 95, gender: 'boy' },
{ name: 'Bob', age: 50, gender: 'boy' },
{ name: 'Erika', age: 27, gender: 'girl' },
{ name: 'Patrick', age: 40, gender: 'boy' },
{ name: 'Tery', age: 60, gender: 'girl' }
];
$scope.totalItems = $scope.students.length;
$scope.numPerPage = 5;
$scope.paginate = function (value) {
var begin, end, index;
begin = ($scope.currentPage - 1) * $scope.numPerPage;
end = begin + $scope.numPerPage;
index = $scope.students.indexOf(value);
return (begin <= index && index < end);
};
});
</script>
<style>
.odd {
background-color: antiquewhite;
color: #008b8b;
}
td th {
height: 30px;
min-width: 100px;
}
thead {
background-color: darkgray;
color: white;
height: 30px;
}
</style>
</head>
<body ng-app="MyForm">
<div ng-controller="myCtrl">
<h3>List students</h3>
<div class="container-fluid">
<pre>Click header link to sort, input into filter text to filter</pre>
<hr />
<table class="table table-striped">
<thead>
<tr>
<th>Edit</th>
<th>
<a href="" ng-click="order('name')">Name</a>
</th>
<th><a href="" ng-click="order('age')"> Age</a> </th>
<th><a href="" ng-click="order('gender')">Gender</a> </th>
</tr>
</thead>
<tbody>
<tr>
<td>Filter =>></td>
<td> <input type="text" ng-model="search.name" /></td>
<td> <input type="text" ng-model="search.age" /> </td>
<td><input type="text" ng-model="search.gender" /> </td>
</tr>
<tr ng-repeat="user in students | orderBy:predicate:reverse | filter:paginate| filter:search" ng-class-odd="'odd'">
<td>
<button class="btn">
Edit
</button>
</td>
<td>{{ user.name}}</td>
<td>{{ user.age}}</td>
<td>{{ user.gender}}</td>
</tr>
</tbody>
</table>
<pagination total-items="totalItems" ng-model="currentPage"
max-size="5" boundary-links="true"
items-per-page="numPerPage" class="pagination-sm">
</pagination>
</div>
</div>
</body>
</html>
Run it on http://plnkr.co/
Thanks for your time reading
You may need
When I am filtering data, pagination is not refreshing the list. If I enter 'boy' in gender field, table should refresh pagination and show only boy related new table information with pagination.
ReplyDeleteI found a solution from this link, but it is working only for angularjs version 1.2.6 and not for higher versions
Deletehttp://jsfiddle.net/nackjicholson/5p6vF/2/
It works fine V 1.4.8. Checkout http://plnkr.co/edit/JB643Xz8NAqOrltoe4l2?p=preview
DeleteThis code is exactly I need, but the filter doesn't work when the item is in a page different from the current.
ReplyDeleteFor instance: try to search for name=bob with the current page 1.
Yes your right filter doesn't work when the item is in a page different from the current. Will check and update the code.
ReplyDeleteHi swapnill,
ReplyDeleteI just used the code above for sorting and filtering and I was wondering if you had any update on filter bug (when item is on different page)? I'm new to Angular and would be great if you could provide help/update on the above so that I can further use it?
Thanks
Pagination is not working. No errors
ReplyDeleteI have a paging in Index.html page and other paging in the popup , but when you change the page number in the popup also changes in pagination index , how to solve?
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteSorting is not working properly, it only sorts by page, not for all the data in all pages.
ReplyDeletesir paging is not working i need paging code Please any one post here..
ReplyDeletehey hi guys paging is working fine please add ui bootstrap js then it will autometically works. check one.
ReplyDeleteI really appreciate information shared above. It’s of great help. If someone want to learn Online (Virtual) instructor lead live training in ANGULAR JS, kindly contact us http://www.maxmunus.com/contact
ReplyDeleteMaxMunus Offer World Class Virtual Instructor led training on ANGULAR JS. We have industry expert trainer. We provide Training Material and Software Support. MaxMunus has successfully conducted 100000+ trainings in India, USA, UK, Australlia, Switzerland, Qatar, Saudi Arabia, Bangladesh, Bahrain and UAE etc.
For Demo Contact us.
Nitesh Kumar
MaxMunus
E-mail: nitesh@maxmunus.com
Skype id: nitesh_maxmunus
Ph:(+91) 8553912023
http://www.maxmunus.com/
Thank you for sharing very useful information.
ReplyDeleteAngular JS Online training
Angular JS training in hyderabad
Thank you for sharing very helpful information.
ReplyDeletePHP Training in Chennai | Certification | Online Training Course | Machine Learning Training in Chennai | Certification | Online Training Course | iOT Training in Chennai | Certification | Online Training Course | Blockchain Training in Chennai | Certification | Online Training Course | Open Stack Training in Chennai |
Certification | Online Training Course
http://globexdocuments.co//
ReplyDeletehttp://globexdocuments.co//
http://globexdocuments.co//
http://globexdocuments.co//
http://globexdocuments.co//
An overwhelming web journal I visit this blog, it's unfathomably amazing. Unusually, in this present blog's substance made inspiration driving truth and reasonable. The substance of data is enlightening.
ReplyDeleteFull Stack Course Chennai
Full Stack Training in Bangalore
Full Stack Course in Bangalore
Full Stack Training in Hyderabad
Full Stack Course in Hyderabad
Full Stack Training
Full Stack Course
Full Stack Online Training
Full Stack Online Course
Fantastic article and I must say, it's nice to know some things aren't just black and white in a time of such confusion. Instruction is an important topic, but like most issues today, there is so much uncertainty associated with it that we feel inundated with all of the ideas too. You dodged the issue brilliantly by making sure your audience knows that you DO NEED to listen and then offer great advice on how to accomplish this feat. We always look forward to reading more of your helpful advice!
ReplyDeleteAWS Training in Hyderabad
AWS Course in Hyderabad
Really enjoyed this article.Much thanks again. Want more
ReplyDeletebest machine learning course in hyderabad
machine learning training in hyderabad
It is late to find this act. At least one should be familiar with the fact that such events exist. I agree with your blog and will come back to inspect it further in the future, so keep your performance going.
ReplyDeleteBest Data Analytics Courses in Bangalore
You really make it look so natural with your exhibition however I see this issue as really something which I figure I could never understand. It appears to be excessively entangled and incredibly expansive for me.
ReplyDelete360DigiTMG, the top-rated organisation among the most prestigious industries around the world, is an educational destination for those looking to pursue their dreams around the globe. The company is changing careers of many people through constant improvement, 360DigiTMG provides an outstanding learning experience and distinguishes itself from the pack. 360DigiTMG is a prominent global presence by offering world-class training. Its main office is in India and subsidiaries across Malaysia, USA, East Asia, Australia, Uk, Netherlands, and the Middle East.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteI think this is an informative post and it is very useful and knowledgeable. therefore, I would like to thank you for the efforts you have made in writing this article.
ReplyDeletefull stack web development course
Thank you for sharing such a nice and interesting blog and really very helpful article.
ReplyDeleteWant to become Oracle Recruiting Cloud Certified Specialist or Consultant? Attend this Best Oracle Recruiting Cloud Training course offered by the Unogeeks (Rated as Top Oracle Recruiting Cloud Training Institute in the market)
Edius Pro 9 Crack software free download is non-linear video editing software which transforms ordinary looking movies into professional one .Edius Pro 9 Software Free Download For Pc
ReplyDeleteThanks for sharing this informative post with us. This information is very useful for those who are searching best Angularjs Development Services, or Angularjs Development Company
ReplyDelete