-
Asp.net MVC: AngularJs Pagination
almost 8 years ago
Asp.net MVC: AngularJs Pagination
AngularJs allow pagination through uib-pagination directive.
Example to demonstrate Asp.net MVC angularjs Pagination.
Asp.net MVC StudentController:
using System.Web.Mvc; namespace MvcExample12.Controllers { public class StudentController : Controller { public ActionResult DemoPagination() { return View(); } } }DemoPagination View:
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Demonginclude</title> <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.0.1.js"></script> </head> <body ng-app="DemoApp"> <div ng-controller="Ctrlpaginate"> <p>Subjects</p> <div class="table-responsive"> <table> <tr> <th>Subject Name</th> <th>Subject Marks</th> </tr> <tr ng-repeat="subject in student.subjects | filter:paginate"> <td>{{ subject.subname }}</td> <td>{{ subject.marks }}</td> </tr> </table> <div uib-pagination total-items="pagination.totalItems" ng-model="pagination.currentPage" max-size="5" boundary-links="true" items-per-page="pagination.numPerPage" class="pagination-sm"> </div> </div> </div> <script src="~/Scripts/Demo.js"></script> </body> </html>Demo.js
var app = angular.module("DemoApp", ['ui.bootstrap']); app.controller("Ctrlpaginate", function ($scope) { $scope.student = { subjects: [ { subname: 'Accounts', marks: 70 }, { subname: 'Commerce', marks: 80 }, { subname: 'computer', marks: 65 }, { subname: 'English', marks: 75 }, { subname: 'Economics', marks: 67 } ] } $scope.pagination = { totalItems: $scope.student.subjects.length, currentPage: 1, numPerPage: 2 }; $scope.paginate = function (value) { var start, end, index; start = ($scope.pagination.currentPage - 1) * $scope.pagination.numPerPage; end = start + $scope.pagination.numPerPage; index = $scope.student.subjects.indexOf(value); return (start <= index && index < end); }; });Output:
Explanation:
In above example, in StudentController, action named DemoPaginate is defined which returns DemoPaginate view. First include Angular JS library reference in the view. This view defines an angularjs app DemoApp and angularjs controller Ctrlpaginate and angularjs uib-pagination directive is defined in the view. It contains certain properties like
boundary-links : whether first/last button is to be displayed. Default value is false.
Direction-links : whether prev/next button is to be displayed. Default value is true.
ng-model : It is the current page number. Page number starts from 1.
total-items : As the name suggest it is assigned with value of total number of items to be displayed in all pages.
Items-per-page : the items to be displayed per page.
max-size : the number of pager buttons to be shown.
The uib-pagination directive is only providing the pagination bar and enable/disable buttons. In above program the pagination is actually performed by filter. The filter paginate is used with ng-repeat which tells angularjs to apply filter to student.subjects array. The filter paginate is a filter function present on $scope object defined in js file which return either true or false. When true is returned then ng-repeat process element of the array else the element is ignored.
A separate js file named Demo.js is defined and is included in the view. In Demo.js file all properties of uib-pagination is initialized with a value and filter function paginate is defined. The currentPage value changes when links on pagination bar is clicked. In paginate function items of the student.subjects array is passed. A start,end and index value is calculated based on currentPage, numPerPage and based on start,end and index value paginate function returns true or false for the value in array and accordingly that value is processed by ng-repeat.
0 Comment(s)