Pagination on a list using ng-repeat - javascript

I'm trying to add pages to my list. I followed the AngularJS tutorial, the one about smartphones and I'm trying to display only certain number of objects. Here is my html file:
<div class='container-fluid'>
<div class='row-fluid'>
<div class='span2'>
Search: <input ng-model='searchBar'>
Sort by:
<select ng-model='orderProp'>
<option value='name'>Alphabetical</option>
<option value='age'>Newest</option>
</select>
You selected the phones to be ordered by: {{orderProp}}
</div>
<div class='span10'>
<select ng-model='limit'>
<option value='5'>Show 5 per page</option>
<option value='10'>Show 10 per page</option>
<option value='15'>Show 15 per page</option>
<option value='20'>Show 20 per page</option>
</select>
<ul class='phones'>
<li class='thumbnail' ng-repeat='phone in phones | filter:searchBar | orderBy:orderProp | limitTo:limit'>
<a href='#/phones/{{phone.id}}' class='thumb'><img ng-src='{{phone.imageUrl}}'></a>
<a href='#/phones/{{phone.id}}'>{{phone.name}}</a>
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
</div>
I've added a select tag with some values in order to limit the number of items that will be displayed. What I want now is to add the pagination to display the next 5, 10, etc.
I have a controller that works with this:
function PhoneListCtrl($scope, Phone){
$scope.phones = Phone.query();
$scope.orderProp = 'age';
$scope.limit = 5;
}
And also I have a module in order to retrieve the data from the json files.
angular.module('phonecatServices', ['ngResource']).
factory('Phone', function($resource){
return $resource('phones/:phoneId.json', {}, {
query: {method: 'GET', params:{phoneId:'phones'}, isArray:true}
});
});

If you have not too much data, you can definitely do pagination by just storing all the data in the browser and filtering what's visible at a certain time.
Here's a simple pagination example from the list of fiddles on the angular.js Github wiki, which should be helpful:
var app=angular.module('myApp', []);
function MyCtrl($scope) {
$scope.currentPage = 0;
$scope.pageSize = 10;
$scope.data = [];
$scope.numberOfPages=function(){
return Math.ceil($scope.data.length/$scope.pageSize);
}
for (var i=0; i<45; i++) {
$scope.data.push("Item "+i);
}
}
//We already have a limitTo filter built-in to angular,
//let's make a startFrom filter
app.filter('startFrom', function() {
return function(input, start) {
start = +start; //parse to int
return input.slice(start);
}
});
<div ng-controller="MyCtrl">
<ul>
<li ng-repeat="item in data | startFrom:currentPage*pageSize | limitTo:pageSize">
{{item}}
</li>
</ul>
<button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
Previous
</button>
{{currentPage+1}}/{{numberOfPages()}}
<button ng-disabled="currentPage >= data.length/pageSize - 1" ng-click="currentPage=currentPage+1">
Next
</button>
</div>

I copied the accepted answer but added some Bootstrap classes to the HTML:
var app=angular.module('myApp', []);
function MyCtrl($scope) {
$scope.currentPage = 0;
$scope.pageSize = 10;
$scope.data = [];
$scope.numberOfPages=function(){
return Math.ceil($scope.data.length/$scope.pageSize);
}
for (var i=0; i<45; i++) {
$scope.data.push("Item "+i);
}
}
//We already have a limitTo filter built-in to angular,
//let's make a startFrom filter
app.filter('startFrom', function() {
return function(input, start) {
start = +start; //parse to int
return input.slice(start);
}
});
<html xmlns:ng="http://angularjs.org" ng-app lang="en">
<head>
<meta charset="utf-8">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.no-icons.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" rel="stylesheet">
<script src="http://code.angularjs.org/1.1.0/angular.min.js"></script>
</head>
<body>
<script type="text/javascript">
var sortingOrder = 'name';
</script>
<div ng-controller="ctrlRead">
<div class="input-append">
<input type="text" ng-model="query" ng-change="search()" class="input-large search-query" placeholder="Search">
<span class="add-on"><i class="icon-search"></i></span>
</div>
<table class="table table-striped table-condensed table-hover">
<thead>
<tr>
<th class="id">Id <a ng-click="sort_by('id')"><i class="icon-sort"></i></a></th>
<th class="name">Name <a ng-click="sort_by('name')"><i class="icon-sort"></i></a></th>
<th class="description">Description <a ng-click="sort_by('description')"><i class="icon-sort"></i></a></th>
<th class="field3">Field 3 <a ng-click="sort_by('field3')"><i class="icon-sort"></i></a></th>
<th class="field4">Field 4 <a ng-click="sort_by('field4')"><i class="icon-sort"></i></a></th>
<th class="field5">Field 5 <a ng-click="sort_by('field5')"><i class="icon-sort"></i></a></th>
</tr>
</thead>
<tfoot>
<td colspan="6">
<div class="pagination pull-right">
<ul>
<li ng-class="{disabled: currentPage == 0}">
<a href ng-click="prevPage()">« Prev</a>
</li>
<li ng-repeat="n in range(pagedItems.length)"
ng-class="{active: n == currentPage}"
ng-click="setPage()">
<a href ng-bind="n + 1">1</a>
</li>
<li ng-class="{disabled: currentPage == pagedItems.length - 1}">
<a href ng-click="nextPage()">Next »</a>
</li>
</ul>
</div>
</td>
</tfoot>
<tbody>
<tr ng-repeat="item in pagedItems[currentPage] | orderBy:sortingOrder:reverse">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.description}}</td>
<td>{{item.field3}}</td>
<td>{{item.field4}}</td>
<td>{{item.field5}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
http://jsfiddle.net/SAWsA/11/

I've built a module that makes in-memory pagination incredibly simple.
It allows you to paginate by simply replacing ng-repeat with dir-paginate, specifying the items per page as a piped filter, and then dropping the controls wherever you like in the form of a single directive, <dir-pagination-controls>
To take the original example asked by Tomarto, it would look like this:
<ul class='phones'>
<li class='thumbnail' dir-paginate='phone in phones | filter:searchBar | orderBy:orderProp | limitTo:limit | itemsPerPage: limit'>
<a href='#/phones/{{phone.id}}' class='thumb'><img ng-src='{{phone.imageUrl}}'></a>
<a href='#/phones/{{phone.id}}'>{{phone.name}}</a>
<p>{{phone.snippet}}</p>
</li>
</ul>
<dir-pagination-controls></dir-pagination-controls>
There is no need for any special pagination code in your controller. It's all handled internally by the module.
Demo: http://plnkr.co/edit/Wtkv71LIqUR4OhzhgpqL?p=preview
Source: dirPagination of GitHub

I know this thread is old now but I am answering it to keep things a bit updated.
With Angular 1.4 and above you can directly use limitTo filter which apart from accepting the limit parameter also accepts a begin parameter.
Usage: {{ limitTo_expression | limitTo : limit : begin}}
So now you may not need to use any third party library to achieve something like pagination. I have created a fiddle to illustrate the same.

Check out this directive: https://github.com/samu/angular-table
It automates sorting and pagination a lot and gives you enough freedom to customize your table/list however you want.

Here is a demo code where there is pagination + Filtering with AngularJS :
https://codepen.io/lamjaguar/pen/yOrVym
JS :
var app=angular.module('myApp', []);
// alternate - https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination
// alternate - http://fdietz.github.io/recipes-with-angular-js/common-user-interface-patterns/paginating-through-client-side-data.html
app.controller('MyCtrl', ['$scope', '$filter', function ($scope, $filter) {
$scope.currentPage = 0;
$scope.pageSize = 10;
$scope.data = [];
$scope.q = '';
$scope.getData = function () {
// needed for the pagination calc
// https://docs.angularjs.org/api/ng/filter/filter
return $filter('filter')($scope.data, $scope.q)
/*
// manual filter
// if u used this, remove the filter from html, remove above line and replace data with getData()
var arr = [];
if($scope.q == '') {
arr = $scope.data;
} else {
for(var ea in $scope.data) {
if($scope.data[ea].indexOf($scope.q) > -1) {
arr.push( $scope.data[ea] );
}
}
}
return arr;
*/
}
$scope.numberOfPages=function(){
return Math.ceil($scope.getData().length/$scope.pageSize);
}
for (var i=0; i<65; i++) {
$scope.data.push("Item "+i);
}
// A watch to bring us back to the
// first pagination after each
// filtering
$scope.$watch('q', function(newValue,oldValue){ if(oldValue!=newValue){
$scope.currentPage = 0;
}
},true);
}]);
//We already have a limitTo filter built-in to angular,
//let's make a startFrom filter
app.filter('startFrom', function() {
return function(input, start) {
start = +start; //parse to int
return input.slice(start);
}
});
HTML :
<div ng-app="myApp" ng-controller="MyCtrl">
<input ng-model="q" id="search" class="form-control" placeholder="Filter text">
<select ng-model="pageSize" id="pageSize" class="form-control">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
</select>
<ul>
<li ng-repeat="item in data | filter:q | startFrom:currentPage*pageSize | limitTo:pageSize">
{{item}}
</li>
</ul>
<button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
Previous
</button> {{currentPage+1}}/{{numberOfPages()}}
<button ng-disabled="currentPage >= getData().length/pageSize - 1" ng-click="currentPage=currentPage+1">
Next
</button>
</div>

Related

enable/disable button on a table on selection of dropdown using ng-options not working properly

I have a table with a dropdown selection in each row, I wanted to make an upload button (to work) only when the the drop down status is done. Right now its not working properly
fiddle here
<body ng-app='saapp', ng-controller = "homeCtrl">
<body>
<table>
<tr data-ng-repeat="test in tests ">
<td>{{$index+1}}</td>
<td>{{test}}</td>
<td style="color:red"> pending</td>
<td><font size="2" color="red"></font>
<select ng-model="checkStatus" ng-init="checkStatus='NotDone'", ng-options="status.sta as status.name for status in status" ng-change="changePayStatus(checkStatus)"></select>
</td>
<td class="col-md-2">
<P>
<button type="button" ng-show="!pictureEditor" ng-click="pictureEditor = true" ng-disabled="enableUpload" class="btn-primary btn-u-xs">Upload </button>
<div ng-show="pictureEditor">
<input type="file" name="file" onchange="angular.element(this).scope().selectFile(this.files)"/>
<div ng-show="pictureEditor" class="input-group"><span class="input-group-btn">
<button ng-click="saveDiagnosticReport(test, appointmentDetails); pictureEditor = false " class="btn btn-default">Save <i class="input-save fa fa-check-square"></i></button>
<button ng-click="pictureEditor = false" class="btn btn-default">Back <i class="fa fa-undo"></i></button></span></div>
</div>
</P>
</td>
</tr>
<table>
</body>
angular controller
var app = angular.module('saapp',[ ]);
app.controller('homeCtrl', function($scope){
$scope.tests = ["A", "B", "C"]
$scope.status = [{name :"Done", sta : 1}, {name : "NotDone", sta : 0}];
$scope.enableUpload = 1;
$scope.changePayStatus = function(status) {
console.log(status);
if(status == '1') {
$scope.enableUpload = 0;
}
else if(status == "0") {
$scope.enableUpload = 1;
}
};
})
You need to bind each row's upload button's disablity state to different model inside $scope, one way for doing that is to hold each row disablity state in it self,so you need to change tests array to an object like this:
$scope.tests = [{name:"A",disabled:1}, {name:"B",disabled:1}, {name:"C",disabled:1}]
disabled now holds the state of upload button disability for each row.
by changing tests this way, you'll need to change your code like bellow to achieve what you are looking for:
<table>
<tr data-ng-repeat="test in tests ">
<td>{{$index+1}}</td>
<td>{{test.name}}</td>
<td style="color:red"> pending</td>
<td><font size="2" color="red"></font>
<select ng-model="checkStatus" ng-init="checkStatus='NotDone'"
ng-options="status.sta as status.name for status in status"
ng-change="changePayStatus(checkStatus,test)"></select>
</td>
<td class="col-md-2">
<p>
<button type="button" ng-show="!pictureEditor" ng-click="pictureEditor = true"
ng-disabled="test.disabled" class="btn-primary btn-u-xs">Upload </button>
...
</p>
</td>
</tr>
<table>
Edited: As you can see in the HTML,I'm passing test object that I've got from ng-repeat to changePayStatus method, while test is member of tests and we've got tests from the scope, therefore test it self is from the scope and angular will handle changes on it,in views you can pass models that you've got from scope, to controller again and angular handles the rest.
so you also need to change controller like this:
app.controller('homeCtrl', function($scope){
$scope.tests = [{name:"A",disabled:1}, {name:"B",disabled:1}, {name:"C",disabled:1}]
$scope.status = [{name :"Done", sta : 1}, {name : "NotDone", sta : 0}];
$scope.changePayStatus = function(status,testItem) {
console.log(status);
if(status == 1) {
testItem.disabled= 0;
}
else if(status == 0) {
testItem.disabled= 1;
}
};
});
An edited working sample can be found Here
hope that helps.

How to sort and filter all records in AngularJS that are paginated using UI Bootstrap Pagination

I'm doing client-side pagination using angular ui-bootstrap pagination to add paging to the list and then I'm getting a problem that the sorting and filtering process only sort and filter the data only in the current page.
Here is the code snippets in view to display the data:
<tr ng-repeat="reminderType in reminderTypes | filter: paginate | filter: searchText | orderBy:sortBy:sortDescending">
<td>
<a class="btn btn-sm btn-primary" ng-click="editReminderType(reminderType.ReminderTypeID)"><i class="glyphicon glyphicon-pencil"></i> Edit</a>
<a class="btn btn-sm btn-info" ng-click="detailsReminderType(reminderType.ReminderTypeID)"><i class="glyphicon glyphicon-eye-open"></i> View</a>
</td>
<td>{{reminderType.Name}}</td>
<td>{{reminderType.EmailTemplate}}</td>
</tr>
...
<uib-pagination class="pagination-sm"
total-items="totalItems" max-size="maxSize" items-per-page="numPerPage" num-pages="numPages"
ng-model="currentPage" boundary-links="true" rotate="false"></uib-pagination>
and here is the code snippets in controller to do the pagination:
$scope.maxSize = 3;
$scope.totalItems = 7;
$scope.currentPage = 1;
$scope.numPerPage = 2;
$scope.paginate = function (value) {
var begin, end, index;
begin = ($scope.currentPage - 1) * $scope.numPerPage;
end = begin + $scope.numPerPage;
index = $scope.reminderTypes.indexOf(value);
return (begin <= index && index < end);
};
I also check this link on SO, but it doesn't work.
How to make this work to sort and filter the data across the page?
I've posted the complete code in plnkr
For some reason I'm unable to fork your plunkr, but here is a fix. The JS:
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PagerDemoCtrl', function($scope) {
$scope.reminderTypes = [{"ReminderTypeID":1,"Name":"STAMPING OF SPA","EmailTemplate":null},{"ReminderTypeID":2,"Name":"CONDITION PRECEDENT","EmailTemplate":null},{"ReminderTypeID":3,"Name":"STATE AUTHORITY CONSENT","EmailTemplate":null},{"ReminderTypeID":4,"Name":"PAYMENT OF BALANCE PURCHASE PRICE","EmailTemplate":null},{"ReminderTypeID":5,"Name":"CKHT FILING","EmailTemplate":null},{"ReminderTypeID":6,"Name":"TRANSFER FORM 14A","EmailTemplate":null},{"ReminderTypeID":7,"Name":"TRANSFER NOTICE OF ASSESSMENT","EmailTemplate":null}]
$scope.sortBy = 'Name';
$scope.sortDescending = false;
$scope.filteredRT = angular.copy($scope.reminderTypes);
$scope.searchText = '';
$scope.maxSize = 3;
$scope.totalItems = 7;
$scope.currentPage = 1;
$scope.numPerPage = 2;
$scope.paginate = function (value) {
var begin, end, index;
begin = ($scope.currentPage - 1) * $scope.numPerPage;
end = begin + $scope.numPerPage;
index = $scope.filteredRT.indexOf(value);
return (begin <= index && index < end);
};
$scope.filter = function(){
var results = $scope.filteredRT;
results.length = 0;
var searchText = $scope.searchText;
var reminderTypes = $scope.reminderTypes;
for(var i = 0; i < reminderTypes.length; ++i){
if(searchText.length > 0){
if(reminderTypes[i].Name.includes(searchText)){
results.push(reminderTypes[i]);
}
} else {
results.push(reminderTypes[i]);
}
}
$scope.totalItems = results.length;
}
});
And the HTML
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="PagerDemoCtrl">
<div class="row">
<div class="col-md-offset-9 col-md-3">
<p>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
<input type="text" class="form-control" placeholder="Enter Search Text"
ng-model="searchText" ng-change="filter()" />
</div>
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<table class="table table-striped table-hover table-condensed">
<thead>
<tr class="bg-info">
<th></th>
<th>
<a ng-click="sortBy = 'Name'; sortDescending = !sortDescending">Reminder Type Name</a>
<span ng-show="sortBy == 'Name' && !sortDescending" class="glyphicon glyphicon-chevron-down"></span>
<span ng-show="sortBy == 'Name' && sortDescending" class="glyphicon glyphicon-chevron-up"></span>
</th>
<th>
<a ng-click="sortBy = 'EmailTemplate'; sortDescending = !sortDescending">Email Template</a>
<span ng-show="sortBy == 'EmailTemplate' && !sortDescending" class="glyphicon glyphicon-chevron-down"></span>
<span ng-show="sortBy == 'EmailTemplate' && sortDescending" class="glyphicon glyphicon-chevron-up"></span>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="reminderType in filteredRT | filter: paginate | orderBy:sortBy:sortDescending">
<td>
<a class="btn btn-sm btn-primary" ng-click="editReminderType(reminderType.ReminderTypeID)"><i class="glyphicon glyphicon-pencil"></i> Edit</a>
<a class="btn btn-sm btn-info" ng-click="detailsReminderType(reminderType.ReminderTypeID)"><i class="glyphicon glyphicon-eye-open"></i> View</a>
</td>
<td>{{reminderType.Name}}</td>
<td>{{reminderType.EmailTemplate}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" class="text-right">
Showing page {{currentPage}} of {{numPages}}
</td>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<uib-pagination class="pagination-sm"
total-items="totalItems" max-size="maxSize" items-per-page="numPerPage" num-pages="numPages"
ng-model="currentPage" boundary-links="true" rotate="false"></uib-pagination>
</div>
</div>
</div>
</body>
</html>
In particular, I added a ngChange directive in the input filter, and now a copy of reminderTypes is used. Unfortunately, I think that what you aim to do is a bit too complex to work with angular filters alone. I didn't test the order by but the pagination seems to work just fine in this way.
EDIT : juste adding the correct fork that respond to the question: https://plnkr.co/edit/HMw8U4OUsW5DNDGfQKHY?p=preview

AngularJS- some of my scope variables not displaying

I'm a new developer using Angular JS to create an orders page for an app I created in Ruby on Rails. I would like to get a few Angular variables to display:
order.id (displays)
order.user.email (does not display)
order.total (does not display)
order.product.name (displays)
Only 2 of the 4 variables display. When I put a string or integer into the {{}} Angular notation in place of order.total | currency, the string or integer displays. However, when I try the same with order.product.name, nothing happens.
Here is my relevant code:
View.html:
<div ng-controller="OrdersCtrl">
<h1>Orders</h1>
<div class="container">
<form class="form-inline" ng-submit="addOrder()">
<strong>Add Order: </strong>
<select ng-model="newOrder.product_id" class="form-control">
<option value="" disabled selected>Select a Product</option>
<option ng-repeat="product in products" value="{{product.id}}"> {{product.name}}</option>
</select>
<input type="number" step="1" class="form-control" placeholder="Total" ng-model="newOrder.total">
<input type="number" class="form-control" ng-model="newOrder.product_id">
<input type="submit" value="+" class="btn btn-success">
</form>
<table class="table table-hover">
<thead>
<td>Order ID</td>
<td>Total</td>
<td>Product</td>
<td></td>
</thead>
<tr ng-repeat="order in orders | orderBy:'-id':reverse">
<td>
{{order.id}}<small ng-show="order.user_id"><br>-{{order.user.email}}</small>
</td>
<td>
<strong>{{order.total | currency}}</strong>
</td>
<td>
{{order.product.name}}
</td>
<td>
<button ng-click="deleteOrder(order)" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>
</td>
</tr>
</table>
</div>
Controller (app.js)
var app = angular.module('shop', ['ngResource']);
//Workaround to get Angular running
$(document).on('ready page:load', function() {
angular.bootstrap(document.body, ['shop'])
});
//factory for models
app.factory('models', ['$resource', function($resource){
var orders_model = $resource("/orders/:id.json", {id: "#id"});
var products_model = $resource("/products/:id.json", {id: "#id"});
var x = {
orders: orders_model,
products: products_model
};
return x;
}]);
//connect app to OrdersCtrl controller
app.controller('OrdersCtrl', ['$scope', 'models', function($scope, models){
// Here will be all code belonging to this controller
$scope.orders = models.orders.query();
$scope.products = models.products.query();
//add new orders
$scope.addOrder = function(){
//only orders with product id or zero total gets added
if(!$scope.newOrder.product_id || $scope.newOrder.total === ''){ return; }
//Order can be submitted if product_id and total are filled out
order = models.orders.save($scope.newOrder, function(){ //POST
recent_order = models.orders.get({id: order.id});
$scope.orders.push(recent_order);
$scope.newOrder = '';
});
}
//delete orders
$scope.deleteOrder = function(order){
models.orders.delete(order);
$scope.orders.splice($scope.orders.indexOf(order), 1);
};
}]);

Fetch and show next row in table to the view after delete one row in AngularJS

I am new in angularJS .. when I delete row from table, i want to show next one from next page to keep rows number = 3 (for example)..
html :here are parts of codes :
<tbody id="t"> <!-- fetch data from DB -->
<tr id="tr-{{item.id}}" ng-repeat="item in ItemsByPage[currentPage]">
<td>
<div ng-model="tid"> {{item.id}} </div>
</td>
<td id="tdn-{{item.id}}">
<div ng-model="tname">{{item.name}} </div>
</td>
</tr>
</tbody>
<ul class="pagination">
<li>First</li>
<li ng-repeat="n in range(ItemsByPage.length)">1</li>
<li>Last</li>
</ul>
<div class="col-xs-4"> <!-- delete user -->
<input type="text" ng-model="delId" class="form-control" placeholder="Enter user id to delete the user">
<button ng-click="deleteuser(delId)" type="button" class="btn btn-primary">Delete User</button>
</div>
JS:
$scope.deleteuser = function (delId) {
var data = {delId : $scope.delId};
$http.post('delete.php', data )
.success(function(response) {
$("#tr-"+delId).hide();
console.log($("#tr-"+delId).next());
$("#tr-"+delId).next().show();// It doesnt work
});
$scope.resetAll();
};
$scope.setPage = function () {
$scope.currentPage = this.n;
};
$scope.firstPage = function () {
$scope.currentPage = 0;
};
$scope.lastPage = function () {
$scope.currentPage = $scope.ItemsByPage.length - 1;
};
I read about $routeProvider and routing between pages, but i didnt know how to use it with pagination,, so if the routing is the solution, how to do it in my code?
thanx alot ...
plunker : http://plnkr.co/edit/6GnDdNesbfoy2VbdF2Cr?p=preview

Datatable in angularjs not working

I am using angular datatable to display the response from the http request
I will send the request to web API that will communicate with the SQL Server database and gives the response
It is working fine for the response that are having the data, but for null response the datatable displayed in the UI is displaying the values from the previous response
Can anyone please help me to intimate like "There are no records inserted for the given request" when the response is null ?
Angular JS:
$scope.currentPage = 0; //current page
$scope.entryLimit = 10;
$scope.prevPage = function () {
if ($scope.currentPage > 0) {
$scope.currentPage--;
}
};
$scope.nextPage = function () {
if ($scope.currentPage < ($scope.filteredItems/$scope.entryLimit) - 1) {
$scope.currentPage++;
}
};
$scope.setPage = function () {
$scope.currentPage = this.n;
};
$scope.filter = function() {
$timeout(function() {
$scope.filteredItems = $scope.filtered.length;
}, 10);
};
$scope.sort_by = function(predicate) {
$scope.predicate = predicate;
$scope.reverse = !$scope.reverse;
};
$scope.range = function (size,start, cu,elimit) {
var ret = [];
if( ($scope.filteredItems/$scope.entryLimit) < elimit)
{
if(($scope.filteredItems/$scope.entryLimit) ==0)
{
elimit = 1;
}
else
{
elimit = Math.ceil($scope.filteredItems/$scope.entryLimit);
}
}
var end = parseInt(cu)+parseInt(elimit);
console.log(size,start, end);
if (size < end) {
end = size;
start = 0;
}
for (var i = start; i < end; i++) {
ret.push(i);
}
console.log(ret);
return ret;
};
HTML:
<div ng-show="filteredItems > 0">
<div class="col-md-2">PageSize:
<select ng-model="entryLimit" class="form-control">
<option>10</option>
<option>20</option>
<option>50</option>
<option>100</option>
</select>
</div>
<div class="col-md-3">Filter:
<input type="text" ng-model="search" ng-change="filter()" placeholder="Filter" class="form-control" />
</div>
<div class="col-md-4">
<h5>Filtered {{ filtered.length }} of {{ totalItems}} total </h5>
</div>
</div>
<div>
<div class="col-md-12" ng-show="filteredItems > 0" >
<br/>
<br/>
<table class="table table-bordered table-striped table-hover " style=" outline: 1px solid orange;" >
<thead>
<tr>
<th ng-repeat="(key,value) in items[0]" ng-click="sort_by(key);" >{{key}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="items in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit ">
<td ng-repeat="(key,value) in items" > {{value}} </td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-12" ng-show="filteredItems == 0">
<div class="col-md-12">
<h4>No details found</h4>
</div>
</div>
<div class="col-md-12" ng-show="filteredItems > 0 ">
<div colspan="6">
<div class="pagination pull-right">
<ul>
<li ng-class="{disabled: currentPage == 0}">
<a href ng-click="prevPage()">« Prev</a>
</li>
<li ng-repeat="n in range(filteredItems, currentPage, currentPage , 5) "
ng-class="{active: n == currentPage}"
ng-click="setPage()">
<a href ng-bind="n + 1">1</a>
</li>
<li ng-class="{disabled: (currentPage) == filteredItems - 1}">
<a href ng-click="nextPage()">Next »</a>
</li>
</ul>
</div>
</div>
</div>
</div>
My Http resonse will be resent in $scope.items.
Thanks
Looks like maybe you are keeping the response from the API call in $scope for longer than needed.
Destroy and refresh the model object in $scope prior to API call so that the $scope only has objects from the new response.
eg.
stories.destory()
In your controller, say your model
$scope.items.destroy();
// API call to receive results form server,
// now check if you received items response from server, if not display the message to the user.
Thanks,
Paul
Try to validate the response before populating the table...
Something like
if(response!== null){
$scope.items={};
return;
}
else{
$scope.items=response;
}

Categories