I am getting the data from database via http post call and rendering the table. Well the implementation code looks fine however, the pagination doesn't seem to work.
I implemented it according to my requirement and I get the response which I can see in chrome console. What could be wrong with the pagination as I am not able to see any pagination buttons.
Here's the code:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<base href="/">
<title>The Single Page Blogger</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular-resource.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script data-require="ui-bootstrap#*" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
<script src="<%=request.getContextPath()%>/js/module.js"></script>
<link rel="stylesheet" href="<%=request.getContextPath()%>/style2.css" />
<script>
//Get table from Server and do pagination
app.controller("tableController", function ($scope, $http) {
$scope.filteredTodos = []
, $scope.currentPage = 1
, $scope.numPerPage = 10
, $scope.maxSize = 5;
$scope.getTable = function () {
$scope.customerTable = [];
$http.get('<%=request.getContextPath()%>/GetTable.do').success(function (data)
{
$scope.customerTable = data;
});
};
$scope.getTable();
$scope.$watch("currentPage + numPerPage", function () {
var begin = (($scope.currentPage - 1) * $scope.numPerPage)
, end = begin + $scope.numPerPage;
$scope.filteredTodos = $scope.customerTable.slice(begin, end);
});
});
</script>
</head>
<body>
<div class="container" id="main"><br/><br/>
Search: <input type="text" ng-model="search" placeholder="Search">
<div ng-controller="tableController">
<table class="table table-striped table-hover table-bordered">
<tr>
<th style="font-size: 13.3px">Card number</th>
<th style="font-size: 13.3px">First name</th>
<th style="font-size: 13.3px">Opening balance</th>
<th style="font-size: 13.3px">Withdrawal</th>
<th style="font-size: 13.3px">Deposit</th>
<th style="font-size: 13.3px">Closing balance</th>
<th style="font-size: 13.3px">Tx date</th>
<th style="font-size: 13.3px">Usage type</th>
</tr>
<tr ng-repeat="data in customerTable| filter: search">
<td>{{data.CARD_NUMBER}}</td>
<td>{{data.FIRST_NAME}}</td>
<td>{{data.OPENING_BALANCE}}</td>
<td>{{data.WITHDRAWAL}}</td>
<td>{{data.DEPOSIT}}</td>
<td>{{data.CLOSING_BAL}}</td>
<td>{{data.TXDATE}}</td>
<td>{{data.USAGE_TYPE}}</td>
</tr>
</table>
<pagination
ng-model="currentPage"
total-items="customerTable.length"
max-size="maxSize"
boundary-links="true">
</pagination>
<br/><br/><br>
</form>
</div>
</div>
</body>
</html>
Here's the plunker: http://plnkr.co/edit/eNgT4bVroGIla4EOdkNZ?p=preview
Module:
var app = angular.module('myApp', ['ui.bootstrap']);
Try this,
<tr ng-repeat="data in filteredTodos| filter: search">
<td>{{data.CARD_NUMBER}}</td>
<td>{{data.FIRST_NAME}}</td>
<td>{{data.OPENING_BALANCE}}</td>
<td>{{data.WITHDRAWAL}}</td>
<td>{{data.DEPOSIT}}</td>
<td>{{data.CLOSING_BAL}}</td>
<td>{{data.TXDATE}}</td>
<td>{{data.USAGE_TYPE}}</td>
</tr>
You should be iterating filteredTodos instead of customerTable
Related
Here I want to show Name, Country values through $http, The data is showing in the table this is fine, but when I check any check box in that table I want to display Name, Country values of that selected checkbox. How can I do that?
var app = angular.module("myApp", []);
app.controller("homeCtrl", function($scope, $http) {
$http.get("https://www.w3schools.com/angular/customers.php").then(function(response) {
$scope.myData = response.data.records;
});
$scope.showDetails = function(indexVal, values) {
var getDataValue = {};
if (values) {
alert($scope.myData.records.Name[indexVal]);
}
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<div style="width:100%;" ng-app="myApp" ng-controller="homeCtrl">
<div style="width:50%; float:left;">
<table style="width:100%" class="table-responsive table-bordered ">
<tr>
<th class="text-center">Index</th>
<th class="text-center">Name</th>
<th class="text-center">Country</th>
<th class="text-center">Select</th>
</tr>
<tr ng-repeat="x in myData">
<td class="text-center">{{$index+1}}</td>
<td class="text-center">{{x.Name}}</td>
<td class="text-center">{{x.Country}}</td>
<td class="text-center"><input type="checkbox" ng-checked="chkVal1" ng-model="chkVal" ng-change="showDetails($index, chkVal)" /></td>
</tr>
</table>
</div>
<div style="width:50%; float:left; padding-left:1%;">
i want to show Name and Contry for selected Checkbox only
</div>
</div>
Check this out, it works:
(Code explained below).
var app = angular.module("myApp", []);
app.controller("homeCtrl", function($scope, $http) {
$scope.getDataValue = [];
$http.get("https://www.w3schools.com/angular/customers.php").then(function(response) {
$scope.myData = response.data.records;
});
$scope.showDetails = function(data) {
if ($.inArray(data, $scope.getDataValue) === -1) {
$scope.getDataValue.push(data);
} else {
var index = $scope.getDataValue.indexOf(data)
$scope.getDataValue.splice(index, 1);
}
console.log($scope.getDataValue);
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<div style="width:100%;" ng-app="myApp" ng-controller="homeCtrl">
<div style="width:50%; float:left;">
<table style="width:100%" class="table-responsive table-bordered ">
<tr>
<th class="text-center">Index</th>
<th class="text-center">Name</th>
<th class="text-center">Country</th>
<th class="text-center">Select</th>
</tr>
<tr ng-repeat="x in myData">
<td class="text-center">{{$index+1}}</td>
<td class="text-center">{{x.Name}}</td>
<td class="text-center">{{x.Country}}</td>
<td class="text-center"><input type="checkbox" ng-checked="chkVal1" ng-model="chkVal" ng-change="showDetails(x)" /></td>
</tr>
</table>
</div>
<div style="width:50%; float:left; padding-left:1%;">
<b>Selected Name and Country</b>
<div ng-repeat="x in getDataValue">
{{x.Name}} - {{x.Country}}
</div>
</div>
Explanation
Function showDetails(x) gets triggered on check/uncheck of the check box.
Parameter x is an object in the array you pressed at that instance.
Then, it checks whether the object (i.e, data) is present in the array (i.e, $scope.getDataValue) or not. if ($.inArray(data, $scope.getDataValue) === -1)
If it is absent, it just pushes the object in the array and shows the array.
Else, it deletes the object which is unchecked and shows the remaining array.
here is my index.html and safeCtrl.js controller. I am trying to using angularJS to implement the angular smart table :[http://lorenzofox3.github.io/smart-table-website/][1] .
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular.js"></script>
<link data-require="bootstrap-css#3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="smart-table.debug.js"></script>
<script src="lrInfiniteScrollPlugin.js"></script>
<div ng-controller="safecCtrl">
<button type="button" ng-click="addRandomItem(row)" class="btn btn-sm btn-success">
<i class="glyphicon glyphicon-plus">
</i> Add random item
</button>
<table st-table="displayedCollection" st-safe-src="rowCollection" class="table table-striped">
<thead>
<tr>
<th st-sort="firstName">first name</th>
<th st-sort="lastName">last name</th>
<th st-sort="birthDate">birth date</th>
<th st-sort="balance">balance</th>
</tr>
<tr>
<th colspan="5"><input st-search="" class="form-control" placeholder="global search ..." type="text" /></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in displayedCollection">
<td>{{row.firstName}}</td>
<td>{{row.lastName}}</td>
<td>{{row.birthDate}}</td>
<td>{{row.balance}}</td>
<td>
<button type="button" ng-click="removeItem(row)" class="btn btn-sm btn-danger">
<i class="glyphicon glyphicon-remove-circle">
</i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
app.controller('safeCtrl', ['$scope', function ($scope) {
var firstnames = ['Laurent', 'Blandine', 'Olivier', 'Max'];
var lastnames = ['Renard', 'Faivre', 'Frere', 'Eponge'];
var dates = ['1987-05-21', '1987-04-25', '1955-08-27', '1966-06-06'];
var id = 1;
function generateRandomItem(id) {
var firstname = firstnames[Math.floor(Math.random() * 3)];
var lastname = lastnames[Math.floor(Math.random() * 3)];
var birthdate = dates[Math.floor(Math.random() * 3)];
var balance = Math.floor(Math.random() * 2000);
return {
id: id,
firstName: firstname,
lastName: lastname,
birthDate: new Date(birthdate),
balance: balance
}
}
$scope.rowCollection = [];
for (id; id < 5; id++) {
$scope.rowCollection.push(generateRandomItem(id));
}
//add to the real data holder
$scope.addRandomItem = function addRandomItem() {
$scope.rowCollection.push(generateRandomItem(id));
id++;
};
//remove to the real data holder
$scope.removeItem = function removeItem(row) {
var index = $scope.rowCollection.indexOf(row);
if (index !== -1) {
$scope.rowCollection.splice(index, 1);
}
}
}]);
I was using visual studio 2017. Right now the page is weird because the data is not binding. Can anyone help me with this? I am really confusing...Thanks.
You're repeating over the wrong collection. It should be rowCollection and not displayedCollection.
Recently my page was showing data but from yesterday suddenly its now showing. I am confused what I have done wrong. I checked properly and everything is working fine.
Here is code on UI-
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">
<head runat="server">
<title></title>
<script src="Scripts/angular.js"></script>
<script src="Scripts/jquery-1.8.3.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="script.js"></script>
<script src="EmployeeServices.js"></script>
</head>
<body>
<form id="form1" ng-controller="EmpCtrl" ng-submit="save()">
<table border="1" style="text-align: center; margin-left: 410px;">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
<th>Gender</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td>{{employee.Name}}</td>
<td ng-bind="employee.Age"></td>
<td ng-bind="employee.City"></td>
<td>{{employee.Gender && "Male" || "Female"}}</td>
<td>Edit </td>
<td>Delete </td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
Code of Controller-
var app = angular.module('myApp', ['ngRoute']);
app.controller('EmpCtrl', function ($scope, $http, fetchEmpService) {
$http.get("EmpWebService.asmx/GetEmp")
.then(function (response) {
$scope.employees = response.data;
});
}
I also checked and realized that controller is receiving the data in object form but its not displaying on UI
I think you missed the "/" at the beginning of 'get' URL.
var app = angular.module('myApp', ['ngRoute']);
app.controller('EmpCtrl', function ($scope, $http, fetchEmpService) {
$http.get("/EmpWebService.asmx/GetEmp")
.then(function (response) {
$scope.employees = response.data;
});
}
Please verify.
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.
At first i get the data in the begining but after posting some new students i want the array to update and it updates but table doesn't and i dont know why .It suppose to be like this or what?
This is the html
<!DOCTYPE html>
<html lang="en" ng-app="ang">
<head>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="bootstrap.min.css" />
<title>Angular Practice </title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<style>
div{
overflow:auto;
margin:5px;
}
</style>
</head>
<body ng-controller="TableController as bc">
<div style="margin:5px auto;width:810px">
<div style="width:250px;float:left;">
<form name="forma" novalidate ng-submit="forma.$valid&&bc.sendmes()">
<table class="table table-responsive table-hover">
<tr>
<th colspan="2">Add a new Student</th>
</tr>
<tr>
<td>Name</td>
<td><input type="text" ng-model="bc.telebe.name" class="input-sm" required /></td>
</tr>
<tr>
<td>Surname</td>
<td><input type="text" ng-model="bc.telebe.surname" class="input-sm" required /></td>
</tr>
<tr>
<td>Age</td>
<td><input type="number" ng-model="bc.telebe.age" class="input-sm" required /></td>
</tr>
<tr>
<th colspan="2"><input type="submit" value="Submit" class="btn-sm" /></th>
</tr>
</table>
</form>
</div>
<div style="width:550px;">
<table ng-controller="TableController as bc" class="table table-responsive table-striped table-bordered table-hover">
<tr>
<th>Name</th>
<th>Surname</th>
<th>Age</th>
</tr>
<tr ng-repeat="telebe in bc.telebeler">
<td>{{telebe.name}}</td>
<td>{{telebe.surname}}</td>
<td>{{telebe.age}}</td>
</tr>
</table>
</div>
</div>
</body>
</html>
This is app.js
app=angular.module("ang",[ ]);
app.controller("TableController",function($http){
var bu = this;
this.telebe = {}
bu.telebeler = [ ];
$http.get("getjson.php").success(function(data){
bu.telebeler = data;
});
this.sendmes=function(){
$http.post("getjson.php",this.telebe).success(function(data){
bu.telebeler = data;
console.log(bu.telebeler);
bu.telebe = {};
});
};
});
This is the getjson.php and this file is clear no problem with php
<?php
require("config.php");
header("Content-type:text/json");
if($s = file_get_contents("php://input")){
$ar=json_decode($s,true);
$name = htmlspecialchars($ar['name']);
$surname = htmlspecialchars($ar['surname']);
$age = htmlspecialchars($ar['age']);
mysql_query("INSERT INTO telebe(name,surname,age) VALUES('$name','$surname','$age')");
};
$tema = mysql_query("SELECT * FROM telebe");
$array = array();
while($sira = mysql_fetch_assoc($tema))$array[]=$sira;
echo json_encode($array);
?>
Remove ng-controller="TableController as bc" directive from the table tag. The controller is already defined in body.
Currently, you have two controllers with different scopes, each of them sending its own HTTP request to get the initial data. When you are changing the data, only the outer controller is updated but you are reading them from the inner controller. Removing the inner controller will fix the problem.
You should insert $scope to your controller and define objects for view on the scope rather then on the controller:
app.controller("TableController",function($scope, $http){
$scope.telebe = {};
$scope.telebeler = [];
...
}
and then in html you should point to the scope like this:
<tr ng-repeat="t in telebeler">
That should make it work.