I have made the code the display the data into the data-table with the help of HTTP GET Service.
I need to make custom pagination showing only 4 buttons previous, 1, 2, next page.
Note: When user is on page 1 of pagination it should show previous, 1, 2, next page and if the user is on page 2 it should show previous, 2, 3, next page and simultaneously like that if any number of data available. If the data is less than 10 only it should display previous, 1, next page and if it exceeds more than 10 it has to follow the above said steps.
Angular JS Code:
<script>
(function(angular) {
'use strict';
angular.module('datatablesSampleApp', ['datatables']).
controller('simpleCtrl', function($scope, $http) {
$http.get("https://jsonplaceholder.typicode.com/users")
.then(function(response) {
$scope.persons = response.data;
});
});
})(angular);
</script>
HTML Code to display the Data-table:
<table datatable="ng" class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Username</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr dt-rows ng-repeat="person in persons">
<td>{{ $index+1 }}</td>
<td>{{ person.name }}</td>
<td>{{ person.username }}</td>
<td>{{ person.email }}</td>
<td>{{ person.phone }}</td>
</tr>
</tbody>
</table>
just use
ng-if
or
ng-show
and a flag for conditional display of second numbered button, also bind numbered button's inside to variables.
updated it with client side paging
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="app" style="padding: 10px">
<div ng-controller="myctrl">
<h1>test pager</h1>
<table datatable="ng" class="table table-bordered table-striped">
<thead>
<tr>
<th>Id</th>
<th>UserId</th>
<th>Title</th>
<th>Completed</th>
</tr>
</thead>
<tbody>
<tr dt-rows ng-repeat="todo in pagedTodos">
<td>{{ todo.id }}</td>
<td>{{ todo.userId }}</td>
<td>{{ todo.title }}</td>
<td>{{ todo.completed }}</td>
</tr>
</tbody>
</table>
<div>
<button class="btn btn-default" ng-click="goPage(lower-1)"><span>previous</span></button>
<button class="btn btn-info" ng-click="goPage(lower)"><span>{{lower}}</span></button>
<button ng-if="showUpper" class="btn btn-default" ng-click="goPage(upper)"><span>{{upper}}</span><span></span></button>
<button class="btn btn-default" ng-click="goPage(upper)"><span>next page</span></button>
</div>
<script>
var app = angular.module("app",[]);
app.controller("myctrl",["$scope", "$http", function($scope, $http){
var pageCount = 1;
var currentPage = 1;
var pageSize = 10;
$scope.lower = 1;
$scope.upper = 2;
$scope.showUpper = false;
$scope.pagedTodos = [];
var allTodos = [];
$http.get("https://jsonplaceholder.typicode.com/todos")
.then(function(response) {
allTodos = response.data;
pageCount = Math.ceil(allTodos.length / pageSize);
$scope.goPage(1);
});
$scope.goPage = function(page){
$scope.pagedTodos = allTodos.slice((page -1) * pageSize , page * pageSize);
updatePagerStatus(page);
}
var updatePagerStatus = function(pNewPage){
currentPage = pNewPage;
$scope.showUpper = pageCount > 1;
$scope.lower = currentPage;
$scope.upper = currentPage + 1;
}
}]);
</script>
</body>
</html>
Related
I would like to expand on a WC3 angular tutorial that goes to the database and gets format a resultset to display into a table on the screen. The tutorial is here: https://www.w3schools.com/angular/tryit.asp?filename=try_ng_customers_sql
What I want to add is an input box that allows me to enter starting letters to be used in the sql lookup query in the asp page. So I will pass what's in the textbox to the sql to then refresh the table results with only the words beginning with those characters entered:
Here is my code and I can't figure out how to wire up the input field to refresh the table. $Scope.myWord doesn't work. Can anyone help?
<!-- Angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
</head>
<body ng-app="myApp" style="margin: 20px;">
<h4>Add Hangman Word</h4>
<form method='post' action='modify.asp' name='theForm' id='theForm' onsubmit="return vForm();">
<div ng-controller="wordsCtrl">
<input type='hidden' name='addhangmanword' value='1' />
<b>Add word:</b><br />
<input class="form-control" style='width:250px;' ng-model="myWord" name="word" id="word" type="text" /><br />
<input class="btn" style="border: 1px solid black; display: inline;" type='submit' value='Submit' />
<br /><br />
<table class="table table-bordered table-striped" style="width: 80%;">
<thead>
<tr>
<th style="text-align: left;">Word</th>
<th style="text-align: left;">Hint</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in names">
<td>{{ x.Word }}</td>
<td>{{ x.Hint }}</td>
</tr>
</tbody>
</table>
</div>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('wordsCtrl', function ($scope, $http) {
var ajaxURL = "ajax/hangman_word_list.asp";
var strBegin = $scope.myWord;
if (strBegin != "") {
ajaxURL = ajaxURL + "?w=" + strBegin;
}
$http.get(ajaxURL)
.then(function (response) { $scope.names = response.data.records; });
});
</script>
</body>
</html>
Update portion of the code that fixed the issue:
<table class="table table-bordered table-striped" style="width: 80%;">
<thead>
<tr>
<th style="text-align: left;">Word</th>
<th style="text-align: left;">Hint</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in names | filter: myWord">
<td>{{ x.Word }}</td>
<td>{{ x.Hint }}</td>
</tr>
</tbody>
</table>
<script>
var app = angular.module('myApp', []);
app.controller('wordsCtrl', function ($scope, $http) {
var ajaxURL = "ajax/hangman_word_list.asp";
$http.get(ajaxURL)
.then(function (response) { $scope.names = response.data.records; });
});
</script>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr>
<th></th>
<th>Name</th>
<th>Country</th>
</tr>
<tr ng-repeat="x in names">
<td>{{$index+1}}</td>
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://www.w3schools.com/angular/customers.php")
.then(function (response) {$scope.names = response.data.records;});
});
</script>
</body>
</html>
Hai Guys,
I am using ng-repeat to display the table records and $index+1 to display the serial number.
I want to display the Header Name and Country to repeat for every 2 records(if $index %2 == 0).
How will i do it?
Any idea please.
Well i found my own answer.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<div ng-repeat-start="x in names">
</div>
<div ng-if="$index % 2==0">
<table ng-repeat="x in names | limitTo:1">
<tr>
<th>S No</th>
<th>Name</th>
<th>Country</th>
</tr>
</table>
</div>
<table ng-repeat-end="x in names">
<tr>
<td>{{$index + 1}}</td>
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("customers.php")
.then(function (response) {$scope.names = response.data.records;});
});
</script>
</body>
</html>
I'm new to angularjs. How to get the total amount in the table Total Amount column and display in input textbox? I think this plunker can solve my problem but I can't access it now. http://plnkr.co/edit/CHBm8RCqW5RNZWrzAe5r?p=preview
Here is my table sample
<table>
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Total Amount</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="payment_queue in data | filter:searchFilter">
<td>{{payment_queue.product_name}}</td>
<td>{{payment_queue.sold_quantity}}</td>
<td>{{payment_queue.amount}}</td>
</tr>
</tbody>
</table>
Total Amount: <input type="text value=""> <--- the total amount value goes here...
js
var myApp = angular.module('myApp', ['ngRoute']);
myApp.controller('productsalesController', ['$scope', '$http', function ($scope, $http) {
$scope.data=[];
$http.get("../php/paymentQueuedata.php")
.success(function(data){
$scope.data = data;
})
.error(function() {
$scope.data = "error in fetching data";
});
}]);
php json
<?php
//database settings
$connect = mysqli_connect("localhost", "root", "", "rmsdb");
$result = mysqli_query($connect, "select * from payment_queue");
$data = array();
while ($row = mysqli_fetch_array($result)) {
$data[] = $row;
}
print json_encode($data);
?>
There a way to get the totals without using a function.
Just use ng-init. If you need to allow the list to change or be filtered, use ng-repeat with it to force recalculation of the totals.
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
<th>Ext</th>
</tr>
</thead>
<tbody ng-repeat="_ in [ [ search, products ] ]" ng-init="total = 0">
<tr ng-repeat="product in products | filter: search">
<td>{{ product.name }}</td>
<td>{{ product.quantity }}</td>
<td>{{ product.price }}</td>
<td ng-init="$parent.total = $parent.total + (product.price * product.quantity)">${{ product.price * product.quantity }}</td>
</tr>
<tr>
<td><b>Total</b></td>
<td></td>
<td></td>
<td><b>${{ total }}</b></td>
</tr>
</tbody>
</table>
See http://plnkr.co/edit/dLSntiy8EyahZ0upDpgy?p=preview for a workinig example.
My solution to my problem..
in my controller
$scope.totalAmount = function(){
var total = 0;
for(count=0;count<$scope.data.length;count++){
total += parseInt($scope.data[count].total_amount,10);
}
return total;
};
in html
<table>
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Total Amount</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="payment_queue in data | filter:searchFilter">
<td>{{payment_queue.product_name}}</td>
<td>{{payment_queue.sold_quantity}}</td>
<td>{{payment_queue.amount}}</td>
</tr>
</tbody>
</table>
Total Amount: <input type="text value="{{ totalAmount() }}"> <--- the total amount value goes here...
You can do like this. This is good solution for your problem.
index.html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap-css#*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.2.x" src="https://code.angularjs.org/1.2.22/angular.js" data-semver="1.2.22"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<table class="table table-striped">
<tbody>
<tr ng-repeat="item in items">
<td>{{item.name}}</td>
<td>{{item.years}}</td>
<td>{{item.amount}}</td>
<td>{{item.interest}}%</td>
</tr>
<tr>
<td>Total:</td>
<td>{{getTotal('years')}}</td>
<td>{{getTotal('amount')}}</td>
<td>{{getTotal('interest')}}</td>
</tr>
</tbody>
</table>
</body>
</html>
app.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.items = [
{name: 'xxx', amount: 13, years: 3, interest: 2},
{name: 'yyy', amount: 23, years: 4, interest: 3},
{name: 'zzz', amount: 123, years: 4, interest: 4}
];
$scope.getTotal = function(int) {
var total = 0;
angular.forEach($scope.items, function(el) {
total += el[int];
});
return total;
};
});
you can use this url also. Thank you !!!
http://plnkr.co/edit/CHBm8RCqW5RNZWrzAe5r?p=preview
I want to use filter function and input search at the same time by using AngularJS. I can able to do with multiple functions. But I'm getting some errors while I add an textbox for search. Is there any way to do this? I tried some ways but no one did not work.
Thanks in advance.
Example code is below
var app = angular.module("app", []),
url = "http://www.filltext.com/?rows=50&pretty=true&fName={firstName}&age=[18,19,20,21]";
app.controller("controller", function($scope, $http) {
$http.get(url)
.success(function(resp) {
$scope.list = resp;
});
$scope.filterAge = function(item) {
return item.age > 19;
};
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<meta charset="utf-8">
<title>AngularJS Filter</title>
</head>
<body ng-controller="controller">
<div class="container">
<br>
<input type="text" ng-model="search" placeholder="Search..." />
<table class="table table-striped">
<thead>
<th>Name</th>
<th>Age</th>
</thead>
<tbody>
<tr ng-repeat="item in list | filter: filterAge">
<td>{{ item.fName }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
You should add custom filter to angular module instead adding filter function to your controller. This is the example:
CustomFilter:
.filter('filterByAge', function filterByAge() {
return function(array, age) {
var filteredArray = [];
angular.forEach(array, function(item) {
if (item.age > age) {
filteredArray.push(item);
}
});
return filteredArray;
}
});
HTML
<input type="text" ng-model="search" placeholder="Search..." />
<table class="table table-striped">
<thead>
<th>Name</th>
<th>Age</th>
</thead>
<tbody>
<tr ng-repeat="item in list | filter: search | filterByAge:19">
<td>{{ item.fName }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
$scope.$watch('search', function (data) {
//sorting logic
})
Watcher is waiting for any action taken on search filed then the function is executed.
Here I have created a record using some radio button. And what I need is when I select the selectAll radio button the selected records should appear in the same page.
When I unselect any radio button in a record the black mark in selectAll checkbox should not appear in the checkbox the same example which we use in our g-mail where gmail use the check box and I'm trying to do it with radio button.
-----here is my index.html-------
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.0-beta.6" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<span>Table One</span>
<div ng-controller="peopleCtrl">
<label>
<input type="radio"
ng-model="allChecked"
ng-click="checkAll()" /> Select All
</label>
<table width="400" border="1">
<tr>
<th>check</th>
<th>Id</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr ng-repeat="person in people">
<td>
<input type="radio" ng-model="person.check" ng-click="changeCheckAll()" />
</td>
<td>{{ person.id }}</td>
<td>{{ person.name }}</td>
<td>{{ person.age }}</td>
</tr>
</table>
<br>
<span>Table Two</span>
<table width="400" border="1">
<tr>
<th>Id</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr ng-repeat="person in people | filter: {check:true}">
<td>{{person.id}}</td>
<td>{{person.name}}</td>
<td>{{person.age}}</td>
</tr>
</table>
</div>
</body>
</html>
And my script page
// Code goes here
var myApp = angular.module('myApp', []);
myApp.controller('peopleCtrl', function($scope) {
$scope.people = ([{
id: 1,
name: "Anil",
age: 21
}, {
id: 2,
name: "Niladri",
age: 20
}, {
id: 3,
name: "Venkat",
age: 22
}]);
$scope.checkAll = function() {
for(var i=0; i < $scope.people.length; i++) {
$scope.people[i].check = $scope.allChecked;
}
};
$scope.changeCheckAll = function() {
for(var i = 0; i < $scope.people.length; i++) {
if (!$scope.people[i].check) {
$scope.allChecked = false;
return false;
}
}
$scope.allChecked = true;
};
});
And my plnkr:http://plnkr.co/edit/RKAdEZYvsJu5wbhIs41A?p=preview
<div ng-controller="peopleCtrl">
<label>
<input type="checkbox"
ng-model="allChecked"
ng-click="checkAll()" /> Select All
</label>
<table width="400" border="1">
<tr>
<th>check</th>
<th>Id</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr ng-repeat="person in people">
<td>
<input type="checkbox" ng-model="person.check" ng-click="changeCheckAll()" />
</td>
<td>{{ person.id }}</td>
<td>{{ person.name }}</td>
<td>{{ person.age }}</td>
</tr>
</table>
radio button is intended to be used when you want to give the user an option to select just one option in a set of options. You are using the radio button wrongly. Checkbox works perfectly here! http://plnkr.co/edit/udgGcsMTubxf4yZapm10?p=preview