Controller
app.controller('myController', ['$scope', 'dashboardService', 'DTOptionsBuilder', function ($scope, dashboardService, DTOptionsBuilder) {
$scope.dtMasterOptions =
DTOptionsBuilder.newOptions()
.withDisplayLength(10)
.withOption('bLengthChange', true)
.withPaginationType('full_numbers')
.withBootstrap();
$scope.ViewData = function () {
var getData = dashboardService.getAllSubmitted();
getData.then(function (job) {
$scope.submitedjob = job.data;
},
function (response) { document.write(response.status + "<br/>" + response.data); });
}
}]);
html code
<table style="width:100%;" ng-controller='myController'>
<tr>
<td align="center" style="padding:25px;" ng-init=" ViewData();">
<table datatable="ng" dt-options="dtMasterOptions" class="table table-striped table-bordered" ng-cloak>
<thead>
<tr>
<th class="text-danger" style="width:5%;">S. No.</th>
<th style="width:10%;">Applicant ID</th>
<th style="width:15%;">Email</th>
<th style="width:15%;">Full Name</th>
<th style="width:10%;">Contact No</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in submitedjob" ng-if="x.SubmittedStatus==='Submitted'">
<td>{{$index + 1}}</td>
<td>{{x.ApplicantID}}</td>
<td>{{x.Username}}</td>
<td>{{x.Salutation}} {{x.Firstname}} {{x.Middlename}} {{x.Lastname}}</td>
<td>{{x.Mobile}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
Here before data loads completely message show 'No data table avaliable'
So I want to show Loading message instead of 'No data avaliable' Message before my data load in datatable completely
add withOption('processing', true) to your DTOptionsBuilder.newOptions() and it should show Loading message.
Related
I'm new to Angularjs. I'm able to display the data in the front end. But when I try to capture the radio button of each row to delete the record, it gets error.
Here is my html code
<button ng-click="deleteEmployee({{usr.empId}})">Remove Employee</button>
</div>
<table border="1">
<thead>
<tr>
<th></th>
<th>Emp ID</th>
<th>Name</th>
<th>Location</th>
</tr>
</thead>
<tbody ng-repeat="usr in users">
<tr >
<td><input type="radio" name="empId" value="{{usr.empId}}"></td>
<td>{{usr.empId}}</td>
<td>{{usr.name}}</td>
<td>{{usr.location}}</td>
</tr>
</tbody>
</table>
My angular code is
$scope.deleteEmployee = function (id) {
// Exception here
EmployeeService.deleteUser(id)
.then (function success(response){
$scope.message = 'User deleted!';
$scope.user = null;
$scope.errorMessage='';
},
function error(response){
$scope.errorMessage = 'Error deleting user!';
$scope.message='';
})
}
How can I get the id of each row. Any ideas would be very helpful for me.
You can use ng-model
<button ng-click="deleteEmployee(selectedEmployee)">Remove Employee</button>
</div>
<table border="1">
<thead>
<tr>
<th></th>
<th>Emp ID</th>
<th>Name</th>
<th>Location</th>
</tr>
</thead>
<tbody ng-repeat="usr in users">
<tr >
<td><input type="radio" ng-model="$parent.selectedEmployee" name="empId" value="{{usr.empId}}"></td>
<td>{{usr.empId}}</td>
<td>{{usr.name}}</td>
<td>{{usr.location}}</td>
</tr>
</tbody>
</table>
I am new for both Angular and datatable.
I am creating ASP.NET MVC Application using this two js and want to display records in the table.
Table displays the records but searching and sorting facility is not available I mean not running. I don't know how to integrate both to use in one page.
Can anyone help me to come out from this problem?
Code:
I have $scope.Customers which has fields Name, Phone , Email and more...
$scope.getCustomers = function () {
customerService.GetCustomers()
.then(
function (response) {
console.log("Get Customer call");
$scope.Customers = response.data.Result;
}
);
}
Here I got the list of customers and binded successfully and my HTML code is:
<table id="tblcustomers" class="table table-striped table-condensed table-bordered no-margin">
<thead>
<tr>
<th>Customer Name</th>
<th>Address</th>
<th>Phone</th>
<th>Email</th>
<th>Active</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="cust in Customers track by $index">
<td>{{cust.CustomerName}}</td>
<td>{{cust.Adddress_Line_1}}</td>
<td>{{cust.Phone}}</td>
<td>{{cust.Email}}</td>
<td ng-if="cust.IsActive == true"><span class="icon-check2"></span></td>
<td ng-if="cust.IsActive == false"><span class="icon-close"></span></td>
<td><span class="icon-trash"></span></td>
</tr>
</tbody>
</table>
output:
angular module:
var app;
(function () {
app = angular.module("ANG", []);
})();
The DataTable.js filter data after the document is rendered completely.
Use DataTables settings after the document is rendered completely.
see demo here:
var app = angular.module('app', []);
app.directive('testTable', function($timeout) {
return {
restrict: 'A',
link: function() {
$timeout(function() {
$('#tblcustomers').DataTable();
});
}
}
});
var testCtrl = app.controller('testCtrl', function($scope) {
$scope.Customers = [];
var i = 20;
while (i > 0) {
$scope.Customers.push({
CustomerName: 'test' + i,
Adddress_Line_1: 'testAddr' + i,
Phone: '000-000-00' + i,
Email: 'sample' + i + '#xxx.com',
IsActive: true
});
i--;
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DataTable test for Angular</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
</head>
<body ng-app="app">
<div ng-controller="testCtrl">
<table id="tblcustomers" test-table class="table table-striped table-condensed table-bordered no-margin">
<thead>
<tr>
<th>Customer Name</th>
<th>Address</th>
<th>Phone</th>
<th>Email</th>
<th>Active</th>
<th>Delete</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Customer Name</th>
<th>Address</th>
<th>Phone</th>
<th>Email</th>
<th>Active</th>
<th>Delete</th>
</tr>
</tfoot>
<tbody>
<tr ng-repeat="cust in Customers track by $index">
<td>{{cust.CustomerName}}</td>
<td>{{cust.Adddress_Line_1}}</td>
<td>{{cust.Phone}}</td>
<td>{{cust.Email}}</td>
<td ng-if="cust.IsActive == true"><span class="icon-check2"></span></td>
<td ng-if="cust.IsActive == false"><span class="icon-close"></span></td>
<td><span class="icon-trash"></span></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
have you troed something like to put in a directive the datatables initialization?
something like:
"use strict";
angular.module("ANG")
.directive("grid", ["$timeout", function ($timeout) {
return {
restrict: "EA",
link: function (scope, element, attrs) {
$timeout(function () {
$(element).DataTable();
}, 200);
}
}
}]);
and then use it like:
<table id="tblcustomers" grid class="table table-striped table-condensed table-bordered no-margin">
<thead>
<tr>
<th>Customer Name</th>
<th>Address</th>
<th>Phone</th>
<th>Email</th>
<th>Active</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="cust in Customers track by $index">
<td>{{cust.CustomerName}}</td>
<td>{{cust.Adddress_Line_1}}</td>
<td>{{cust.Phone}}</td>
<td>{{cust.Email}}</td>
<td ng-if="cust.IsActive == true"><span class="icon-check2"></span></td>
<td ng-if="cust.IsActive == false"><span class="icon-close"></span></td>
<td><span class="icon-trash"></span></td>
</tr>
</tbody>
</table>
I created a table using angular. Some rows in the table have child rows with the same properties as parent. I want to create the child rows whenever the user clicks on the parent row (parent rows would have a carrot sign that specifies there are some child rows). I am really new to angular and I need to see an example so that I can understand how it happens in angular. can anybody help?
here is my html:
<div data-ng-app="myModule">
<div data-ng-controller="myController">
<table>
<thead>
<tr>
<th></th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="student in students">
<th>
<span data-ng-show="{{student.hasChildren}}">
<image data-ng-click="getChildren(student)" data-ng-src="image"></image>
</span>
</th>
<th>{{student.firstName}}</th>
<th>{{student.lastName}}</th>
</tr>
<tr data-ng-repeat="child in children">
<th></th>
<th>{{child.firstName}}</th>
<th>{{child.lastName}}</th>
</tr>
</tbody>
</table>
</div>
</div>
the "hasChildren" cell would have a carrot sign which will collapse and expand the children rows.
here is the js file:
var app = angular
.module("myModule", [])
.controller("myController", function ($scope, $http) {
$http({
method: 'GET',
url: contextPath + '/students'
})
.then(function (response) {
var students = response.data;
$scope.students = students;
});
$scope.getChildren = function(student){
var parentStudentId = student.id;
$http({
method: 'GET',
url: contextPath + '/students/children?studentId=' + parentStudentId
})
.then(function (response) {
var children = response.data;
$scope.children = children;
});
}
})
Take a look on that approach
<table>
<tbody ng-repeat="parent in parents">
<tr>
<td>
Parent ...
</td>
</tr>
<tr ng-show="SomeCarrotCondition(parent)" ng-repeat="child in parent.children">
<td>
Child...
</td>
</tr>
</tbody>
</table>
Code sample:
$scope.getChildren = function(student) {
studen.expanded = !student.expanded; // expand/collapse items
if (student.children) { // request a server only once to get the children
return;
}
var parentStudentId = student.id;
$http({
method: 'GET',
url: contextPath + '/students/children?studentId=' + parentStudentId
})
.then(function (response) {
student.children = response.data; // fill student children collection
});
}
HTML sample:
<div data-ng-app="myModule">
<div data-ng-controller="myController">
<table>
<thead>
<tr>
<th></th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody data-ng-repeat="student in students">
<tr>
<th>
<span data-ng-show="{{student.hasChildren}}">
<image data-ng-click="getChildren(student)" data-ng-src="image"></image>
</span>
</th>
<th>{{student.firstName}}</th>
<th>{{student.lastName}}</th>
</tr>
<tr data-ng-repeat="child in student.children"
ng-show="student.expanded">
<th></th>
<th>{{child.firstName}}</th>
<th>{{child.lastName}}</th>
</tr>
</tbody>
</table>
</div>
</div>
I have a table which prints data from a JSON. Every row have an delete option.
I want to print the deleted data into a new table. I have managed to print data in console but unable to add it into view.
Below is the code:
Controller
$scope.deletedItems = [];
var counter = 0
$scope.removeRow = function (idx) {
console.log(idx);
$scope.TTNdata.splice(idx, 1);
var deletedArray = $scope.TTNdata.slice(idx, 1);
//console.log(deletedArray);
$scope.deletedItems.push(deletedArray);
console.log($scope.deletedItems);
counter++;
$('#counter').html(counter);
};
View:
<table id="deleted-rows" class="">
<thead>
<th>Sr. No</th>
<th>ID</th>
<th>First Name</th>
<th>Second Name</th>
<th>Gender</th>
<th>Email</th>
<th>Image</th>
<th>Remove</th>
</thead>
<tbody>
<tr ng-repeat="item in deletedItems | orderBy:'id'">
<td>{{$index+1}}</td>
<td>{{item.id}} </td>
<td>{{item.first_name}}</td>
<td>{{item.last_name}}</td>
<td>{{item.gender}}</td>
<td>{{item.email}}</td>
<td><img src="{{item.photo}}" alt="{{item.first_name}} {{item.last_name}} photo"></td>
<td class=""> <span style="cursor:pointer" ng-click="removeRow($index)" title="Remove Record" class="glyphicon glyphicon-remove"></span></td>
</tr>
</tbody>
</table>
<table class="table bordered">
<thead>
<tr>
<th>Sr. No</th>
<th>ID</th>
<th>First Name</th>
<th>Second Name</th>
<th>Gender</th>
<th>Email</th>
<th>Image</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in TTNdata | filter:bindtext | orderBy:'id'">
<td>{{$index+1}}</td>
<td>{{data.id}} </td>
<td>{{data.first_name}}</td>
<td>{{data.last_name}}</td>
<td>{{data.gender}}</td>
<td>{{data.email}}</td>
<td><img src="{{data.photo}}" alt="{{data.first_name}} {{data.last_name}} photo"></td>
<td class=""> <span style="cursor:pointer" ng-click="removeRow($index)" title="Remove Record" class="glyphicon glyphicon-remove"></span></td>
</tr>
</tbody>
</table>
Data is printing in console but not in table, every time i click remove it will generate a blank row in deleted table
What I am doing wrong?
Code on github https://github.com/sahilpopli/learningAngular.git
slice returns array, so try $scope.deletedItems.push(deletedArray[0]);
Or try to concatenate the arrays by doing so: $scope.deletedItems = $scope.deletedItems.concat(deletedArray);
A possible thing that you may need to think is that if you going to have paged tables, removing the object from a list with that index could not be a good thing.
My solution to your problem would be this(using the id instead of index). This is just scratch demonstrating a possible way to achieve what is your desire.
Code
angular.module('App', [])
.controller('MyCtrl', ['$scope', function($scope) {
$scope.List = [{
Id: 1,
Name: 'Name1'
}, {
Id: 2,
Name: 'Name2'
}, {
Id: 3,
Name: 'Name3'
}];
$scope.newList = [];
var remove = function(itemId) {
var indexS = $scope.List.filter(function(item, index) {
return item.Id == itemId;
});
if (indexS.length == 1)
$scope.newList.push($scope.List.splice($scope.List.indexOf(indexS[0]), 1)[0])
};
$scope.removeMe = remove;
}]);
Markup
<body ng-app="App" ng-controller="MyCtrl">
<table>
<thead>
<th> Id </th>
<th> Name </th>
</thead>
<tbody>
<tr ng-repeat="item in List">
<td >{{item.Id}}</td>
<td >{{item.Name}}</td>
<td ng-click="removeMe(item.Id)">removeme</td>
</tr>
</tbody>
</table>
<table>
<thead>
<th> Id </th>
<th> Name </th>
</thead>
<tbody>
<tr ng-repeat="item in newList">
<td >{{item.Id}}</td>
<td >{{item.Name}}</td>
</tr>
</tbody>
</table>
Plunker
My aim is to get the table to display data like the one below. I manage to display the years on top and first vertical column(company) down but how do I get yield data for each company and display it in each row? ps. I am very new to angular.
<table>
<thead>
<tr><th></th><th>2015</th><th>2016</th><th>2017</th><th>2018</th><th>2019</th></tr>
</thead>
<tbody>
<tr><td>ABC</td><td>2.03</td><td>2.22</td><td>2.44</td><td>2.57</td><td>2.69</td></tr>
<tr><td>DEF</td><td>1.08</td><td>1.14</td><td>1.19</td><td>1.25</td><td>1.32</td></tr>
</tbody>
</table>
JSON
{
"years":[
2015,
2016,
2017,
2018,
2019
],
"yields":[
{
"company":"ABC",
"yield":{
"2015":2.03000,
"2016":2.22000,
"2017":2.44000,
"2018":2.57000,
"2019":2.69000
}
},
{
"company":"DEF",
"yield":{
"2015":1.08000,
"2016":1.14000,
"2017":1.19000,
"2018":1.25000,
"2019":1.32000
}
}
]
}
HTML
<table data-ng-controller="dividendController as divd">
<thead>
<tr>
<th></th>
<th data-ng-repeat="y in year">{{y}}</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="c in yields">
<td>{{c.company}}</td>
<td data-ng-repeat="n in divYield">{{n}}</td>
</tr>
</tbody>
</table>
CONTROLLER
(function (angular) {
'use strict';
angular.module('example', [])
.controller('dividendController', function ($scope, $http) {
$http.get("api/myapi/myexample")
.success(function (response) {
$scope.year = response.years;
$scope.yields = response.yields;
$scope.divYieldList = [];
$scope.company = [];
angular.forEach(response.yields, function (obj, index) {
$scope.company.push(obj.company);
$scope.divYield = [];
angular.forEach(obj.yield, function (yld, index) {
$scope.divYield.push(yld);
});
$scope.divYieldList.push($scope.divYield);
});
});
});
})(window.angular);
<div ng-init='TesData={"years":[2015,2016,2017,2018,2019],"yields": [{"company":"abc","yield":{"2015":2.03000,"2016":2.22000,"2017":2.44000,"2018":2.57000,"2019":2.69000} },{"company":"def","yield":{"2015":1.08000,"2016":1.14000,"2017":1.19000,"2018":1.25000,"2019":1.32000}}]};'>
<table>
<thead>
<tr>
<th></th>
<th data-ng-repeat="y in TesData.years">{{y}}</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="c in TesData.yields">
<td>{{c.company}}</td>
<td data-ng-repeat="n in c.yield">{{n}}</td>
</tr>
</tbody>
</table>
</div>