My code is as below
<div id="createConfigManagementDivId"
class="panel-portal">
<div >
<button ng-click="exportData()" ng-show="(items|filter:{selected: true}).length">Export</button>
<br />
<table width="100%">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Date</th>
<th>Terms</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td><input type="checkbox" ng-model="item.selected" /></td>
<td>{{item.Name}}</td>
<td>{{item.Date}}</td>
<td><span ng-repeat="term in item.Terms">{{term}}{{!$last?', ':''}}</span></td>
</tr>
</tbody>
</table>
<div id="exportable" style="display:none">
<table width="100%">
<thead>
<tr>
<th>Name</th>
<th>Date</th>
<th>Terms</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items|filter:{selected: true}">
<td>{{item.Name}}</td>
<td>{{item.Date}}</td>
<td><span ng-repeat="term in item.Terms">{{term}}{{!$last?', ':''}}</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript" src="jsp/resources/framework//Blob.js"></script>
<script type="text/javascript" src="jsp/resources/framework//FileSaver.js"></script>
<script type="text/javascript"
src="jsp/resources/framework/ConfigMgmtController.js"></script>
controller.js
threeGppHssApp
.controller(
'configMgmtController',
[
'$scope',
'$http',
'$stateParams',
'$filter',
'$window',
function($scope, $http,$stateParams,$filter,$window) {
console.log("Calling controller");
$scope.items = [{
"Name": "ANC101",
"Date": "10/02/2014",
"Terms": ["samsung", "nokia", "apple"]
}, {
"Name": "ABC102",
"Date": "10/02/2014",
"Terms": ["motrolla", "nokia", "iPhone"]
}]
$scope.exportData = function () {
var blob = new Blob([document.getElementById('exportable').innerHTML], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
});
saveAs(blob, "Report.xls");
};
}]);
Then I downloaded blob.js and FileSaver.js and copied to the path sp/resources/framework/.
but when i run the above code getting error as Syntax error on File:FileSaver.js Line:1,column:1
and Could not complete the operation due to error 80020101. .
Not sure why fileSaver.js throwing an error ? can you please help me to figure out the issue
Related
I am trying to use angular datatables optionbuilder to create button for excel sheet download. But I am getting error withButton is not a function. I have downloaded all this files and have included in my main html page.
In HTML
<script src="/lib/angular-datatables.min.js"></script>
<script src="/lib/js_button/dataTables.buttons.min.js"></script>
<script src="/lib/js_button/buttons.flash.min.js"></script>
<script src="/lib/js_button/jszip.min.js"></script>
<script src="/lib/js_button/pdfmake.min.js"></script>
<script src="/lib/js_button/vfs_fonts.js"></script>
<script src="/lib/js_button/buttons.html5.min.js"></script>
<script src="/lib/js_button/buttons.print.min.js"></script>
<script src="/lib/angular-datatables.min.js"></script>
<link rel="stylesheet" type="text/css" href="/lib/js_button/buttons.dataTables.min.css">
In controller
var app = angular.module('myApp', ['Alertify','ngRoute', 'datatables']);
app.controller('MainCtrl', function($scope, $http, $location,
DTOptionsBuilder, DTColumnBuilder,Alertify) {..
$scope.vm.dtOptions = DTOptionsBuilder.newOptions()
.withOption('order', [])
.withOption('bFilter', false)
.withOption('bSort', false)
.withOption('bAutoWidth',true)
.withOption('sScrollY' , "200")
.withOption('sScrollX' , "100%")
.withOption('bScrollCollapse' , true)
.withPaginationType('full_numbers')
.withOption('lengthMenu', [5, 10, 25, 50, 100, 150, 200])
.withDOM('lrtip')
.withButtons([
{
extend: "excelHtml5",
filename: "MailItemList",
text: "<i class='fa fa-file-excel-o'></i> Excel",
title: "Mail Item List",
exportOptions: {
columns:[2,3,4,5,6,7,8.9,10,11,12,13,14,15,16,17,18,19,20,21,22]
},
exportData: { decodeEntities: true }
}
]);
..}
In Html
<table id="table1" class="table table-bordered table-hover fixed" datatable="ng" dt-columns="vm.dtColumns" dt-options="vm.dtOptions" >
<thead id="theadstyle">
<tr>
<th class="alignstyle"> </th>
<th class="alignstyle">1</th>
<th class="alignstyle">2</th>
<th class="alignstyle">3 </th>
<th class="alignstyle">4 </th>
<th class="alignstyle">5 </th>
<th class="alignstyle">6</th>
<th class="alignstyle">7 </th>
<th class="alignstyle">8</th>
</tr>
</thead>
<tbody >
<tr ng-repeat="build in buildmodel1">
<td> {{build.1}} </td>
<td> {{build.2}} </td>
<td> {{build.3}} </td>
<td> {{build.4}} </td>
<td> {{build.5}} </td>
<td> {{build.6}} </td>
<td> {{build.7}} </td>
<td> {{build.8}} </td>
</tr>
</tbody>
</table>
Can someone explain me what else needs to be added to this piece of code.
Adding B to dom, i.e .withDOM('Blrtip') will show buttons.
Error "withButtons is not a function" is because the js file dataTables.buttons.min.js is missing or , if you are in angular the module datatable.buttons is not defined
angular.module('app.components', [
...,'datatables.buttons']
Any remarks?
On click of a button I get the following Response from Node JS .
[{
"_id": "590998cca8ac14d0c075282c",
"CompID": "0001388D",
"CompName": "ONE"
},
{
"_id": "590998cca8ac14d0c075282qc",
"CompID": "0001388D2",
"CompName": "TWO"
},
{
"_id": "590998cca8ac14d0c07528qq2c",
"CompID": "0001388D23",
"CompName": "Three"
}
]
I am printing this information using Angular JS table ng - repeat
This is my code
My question is , is it possible to skip _id field while printing ??
This is my code
<div ng-app="myapp" ng-controller="FirstCtrl">
<table border="1">
<tr>
<th ng-repeat="(key, val) in collectioninfo[0]">{{ key }}</th>
</tr>
<tr ng-repeat="row in collectioninfo">
<td ng-repeat="column in row">
{{ column }}
</td>
</tr>
</table>
</div>
JSFiddle
you can try with ng-if to avoid showing some elments in ng-repeat.
var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function($scope) {
$scope.collectioninfo = [{
"_id": "590998cca8ac14d0c075282c",
"CompID": "0001388D",
"CompName": "ONE"
},
{
"_id": "590998cca8ac14d0c075282qc",
"CompID": "0001388D2",
"CompName": "TWO"
},
{
"_id": "590998cca8ac14d0c07528qq2c",
"CompID": "0001388D23",
"CompName": "Three"
}
]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myapp" ng-controller="FirstCtrl">
<table border="1">
<tr>
<th ng-repeat="(key, val) in collectioninfo[0]" ng-if="key !== '_id'">{{ key }}</th>
</tr>
<tr ng-repeat="row in collectioninfo">
<td ng-repeat="(key2, val2) in row" ng-if="key2 !== '_id'">
{{ val2 }}
</td>
</tr>
</table>
</div>
Check the jsfiddle here
<table border="1">
<tr>
<th ng-repeat="(key, val) in collectioninfo[0]" ng-show="key != '_id'">{{ key }}</th>
</tr>
<tr ng-repeat="row in collectioninfo">
<td ng-repeat="column in row" ng-hide="column === row._id">
{{ column }}
</td>
</tr>
</table>
I have added a check for the key '_id'.
after you get the response in your angular controller do this :
$scope.datas = [];
//lines of code
.then(function success(response) {
$scope.collectionInfo=response.data.collectionInfo;
for(var i=0;i<$scope.collectionInfo.length;i++){
$scope.index=i;
$scope.datas.push($scope.collectionInfo[i]);
}
//lines of code
});
And on the html page do this :
<div id="DisplayCollection">
<table ng-repeat="x in collectionInfo">
<tr>
<th>
CompID
</th>
<th>
CompName
</th>
</tr>
<tr ng-repeat="y in x track by $index">
<td>{{y.compID[$index]}}</td>
<td>{{y.compName[$index]}}</td>
</tr>
</table>
Given that you have sent the data in form of an array: collectionInfo
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
I want that when I insert some data into a textbox and click a button, the data should be inserted in a particular table column, and when i keep on adding the data the rows should keep on increasing with the entered data. Code:
var parking = angular.module("parking", []);
parking.controller("parkingCtrl", function($scope){
$scope.carnamebind='';
$scope.car=[];
$scope.bindcarName = function(){
var ee=$scope.car;
ee.push($scope.carname);
$scope.carnamebind=ee;
}
})
the html:
<body ng-controller="parkingCtrl">
<h3 ng-model="appTitle"></h3>
<table>
<tr>
<td>Car name</td>
<td>Car model</td>
</tr>
<tr>
<td>{{carnamebind}}</td>
<td></td>
</tr>
<tr>
<td ><input type="text" ng-model="carname"/><input type="button" ng-click="bindcarName()"/></td>
<td></td>
</tr>
</table>
</body>
2 problems are coming:
1) All pushed data into array is inserted in the same column
2) Data is inserted in the form of array, like ["sd","sdasd"]
Thanks
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.carnamebind= [
"Alfreds Futterkiste",
"Berglunds snabbköp",
"Centro comercial Moctezuma",
"Ernst Handel",
];
$scope.bindcarName = function(ee){
$scope.carnamebind.push(ee);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<body ng-app="myApp">
<table ng-controller="myCtrl" border="1">
<tr>
<td>Car name</td>
<td>Car model</td>
</tr>
<tr ng-repeat="x in carnamebind">
<td>{{x}}</td>
<td></td>
</tr>
<tr>
<td ><input type="text" ng-model="carname"/></td>
<td><input type="submit" ng-click="bindcarName(carname)"/></td>
</tr>
</table>
</body>
</html>
I have a problem with my angular datatables .
First, My code work very good, but after i add the code configure notSortable() for some colum , the ng-click of button is not working , and i can't fix it . Could you help me?
Here are my Code :
1> File index.html
<table datatable="ng" dt-options="dtOptions" dt-columns="dtColumns">
<thead>
<tr>
<th>ID</th>
<th>FirstName</th>
<th>LastName</th>
<th>Button</th>
</tr>
</thead>
<tbody>
<tr dt-rows ng-repeat="person in persons">
<td ng-bind="person.id"></td>
<td ng-bind="person.firstName"></td>
<td ng-bind="person.lastName"></td>
<td>
<input type="button" ng-click="doClick()">
</td>
</tr>
</tbody>
</table>
2>File app.js
(function(angular) {
'use strict';
angular.module('datatablesSampleApp', ['datatables']).
controller('simpleCtrl', function($scope, $http, DTOptionsBuilder, DTColumnBuilder) {
$scope.persons = [];
$http.get('data.json').success(function(persons) {
$scope.persons = persons;
});
$scope.doClick=function(){
alert("Clicked button !")
}
$scope.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers').withDisplayLength(40);
$scope.dtColumns = [
DTColumnBuilder.newColumn('id').withTitle('ID').notSortable(),
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
DTColumnBuilder.newColumn('lastName').withTitle('Last name'),
DTColumnBuilder.newColumn('Button').withTitle('Button')
];
});
})(angular);
Don't use
<input type="button" ng-click="doClick()">
In stead of that try to use:
<button type="button" ng-click="doClick()">Send</button>
Be sure to specify the controller in your index.html with ng-controller='simpleCtrl'
I had the same issue, below is the solution that worked for me
**1. Step 1 is same , repeating for the sake of completeness**
<table datatable="ng" dt-options="dtOptions" dt-columns="dtColumns">
<thead>
<tr>
<th>ID</th>
<th>FirstName</th>
<th>LastName</th>
<th>Button</th>
</tr>
</thead>
<tbody>
<tr dt-rows ng-repeat="person in persons">
<td ng-bind="person.id"></td>
<td ng-bind="person.firstName"></td>
<td ng-bind="person.lastName"></td>
<td>
<input type="button" ng-click="doClick()">
</td>
</tr>
</tbody>
</table>
**Step2, In Controller, do the following**
(function(angular) {
'use strict';
angular.module('datatablesSampleApp', ['datatables']).
controller('simpleCtrl', function($scope, $http, DTOptionsBuilder, DTColumnBuilder) {
$scope.persons = []
$scope.init = function() {
$scope.dtOptions = DTOptionsBuilder.newOptions()
.withOption('aLengthMenu', [[-1], ['All']]) // Length of how many to show per pagination.
.withPaginationType('full_numbers')
.withBootstrap();
$http.get("data.json").then( function(result){
$scope.persons = result.data
});
}
$scope.init()
});
})(angular);