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>
Related
Using angular js on click of text, text should be editable. Currently not working. Used this library. Following code is in view page.
JS:
var app = angular.module('virVenturesAPP', ['angularUtils.directives.dirPagination','720kb.datepicker','xeditable']);//'720kb.datepicker'
var site_url = 'http://localhost/vv/';
app.run(function(editableOptions) {
editableOptions.theme = 'bs3';
});
HTML:
<table id="table_id" class="table table-striped table-hover table-bordered" ng-show="numberLoad">
<thead>
<tr>
<th>#</th>
<th>RRD Track No</th>
<th>Order Primary Key</th>
<th>Order Id</th>
<th>Mapped Date</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="rrd in getRrdList | itemsPerPage:rrdinfo.itemsPerPage" current-page="rrdinfo.currentPage" total-items="total_count">
<td>{{rrd.id}}</td>
<td>{{rrd.rrd_track_no}}</td>
<td >{{rrd.ord_primary_key}}</td>
<!-- <td editable-text="rrd.order_id" ng-if="rrd.order_id==='' "> <p contenteditable="true"> enter order</p></td>-->
<td ng-if="rrd.order_id==='' "> <a data-title="Enter username" editable-text="rrd.order_id" data-pk="1" data-type="text" id="usernameaa" href="#" class="editable editable-click edit_text" data-original-title="" title="">enter order id</a></td>
<td ng-if="rrd.order_id!=='' ">{{rrd.order_id}}</td>
<td>{{rrd.mapped_date}}</td>
</tr>
</tbody>
</table>
I removed the following code:
ng-show="numberLoad" line 2
ng-if="rrd.order_id==='' " line 18
['angularUtils.directives.dirPagination','720kb.datepicker'] I think this line of code is the real problem
and it works:
jsfiddle
try to investigate better
<div ng-app="virVenturesAPP" ng-controller="Ctrl">
<table id="table_id" class="table table-striped table-hover table-bordered" >
<thead>
<tr>
<th>#</th>
<th>RRD Track No</th>
<th>Order Primary Key</th>
<th>Order Id</th>
<th>Mapped Date</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="rrd in getRrdList | itemsPerPage:rrdinfo.itemsPerPage" current-page="rrdinfo.currentPage" total-items="total_count">
<td>{{rrd.id}}</td>
<td>{{rrd.rrd_track_no}}</td>
<td >{{rrd.ord_primary_key}}</td>
<!-- <td editable-text="rrd.order_id" ng-if="rrd.order_id==='' "> <p contenteditable="true"> enter order</p></td>-->
<td > <a data-title="Enter username" editable-text="rrd.order_id" data-pk="1" data-type="text" id="usernameaa" href="#" class="editable editable-click edit_text" data-original-title="" title="">enter order id</a></td>
<td ng-if="rrd.order_id!=='' ">{{rrd.order_id}}</td>
<td>{{rrd.mapped_date}}</td>
</tr>
</tbody>
</table>
</div>
//script
var app = angular.module('virVenturesAPP', ['xeditable']);
app.run(function(editableOptions) {
editableOptions.theme = 'bs3';
});
app.controller('Ctrl', function($scope) {
$scope.rrd = {
order_id: 'awesome user'
};
});
I am using smart table but I am not able to sort the table, the following is my code
<div ng-app="app">
<div ng-controller="app-controller">
<table st-table="EmployeeDetails" class="table table-striped table-hover" st-safe-src="EmployeeData">
<thead>
<tr>
<th st-sort="EmployeeName">Employee Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in EmployeeData">
<td class="col-xs-2">
<small>{{employee.EmployeeName}}</small>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
var app = angular.module('app', []);
app.controller('app-controller', ['$scope','$http', function ($scope,$http) {
$http.get('/Data/EmployeeDetails.json').success(function (data) {
$scope.EmployeeData = data;
}).error(function () {
alert('error');
});
}]);
</script>
can anyone let me know what exactly is wrong, i have referenced both angular.js and smart-table.js
<script src="../Scripts/angular.js"></script>
<script src="../Scripts/smart-table.js"></script>
You should use 'EmployeeDetails' at ng-repeat
JSFiddle
OK
<tr ng-repeat="employee in EmployeeDetails">
NG
<tr ng-repeat="employee in EmployeeData">
Thanks
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.
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>