Angular Data Table export to Excel using .withButtons:. Not able to see the buttons - angularjs

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?

Related

Not able to save file using filesaver.js

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

How to update the number of columns in an angular table

I want to change the number of columns on modifying a boolean variable.
Check my example (in plnkr):
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('myCtrl', function($scope, $log) {
$scope.debug = {};
$scope.fields = [{
header: "first",
hideField: !$scope.debug.flag
},
{
header: "second"
},
{
header: "third"
},
{
header: "fourth"
},
];
$scope.entries = [{
first: "hello1",
second: "hello2",
third: "hello3",
fourth: "hello4"
}, ]
$scope.myBool = true;
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="myCtrl">
<button id="testButton" class='btn btn-danger' ng-click='debug.flag = !debug.flag'><i class="glyphicon glyphicon-hand-right"></i> refreshFields! debug.flag = {{!!debug.flag}}</button>
<hr>
<h2 class="label label-info">table 1 with property.hideField = true</h2>
<table class="table table-hover">
<tr>
<!-- Headers of list-->
<th ng-repeat="property in fields" ng-if="!property.hideField">{{property.header}}
</th>
</tr>
<tbody>
<tr ng-repeat="entry in entries">
<td ng-repeat="property in fields" ng-if="!property.hideField">
{{entry[property.header]}} {{!!debug.flag}}
</td>
</tr>
</tbody>
</table>
<h4 class="label label-info">table 2 with ng-if => property.hideField = false</h4>
<table class="table table-hover">
<tr>
<!-- Headers of list-->
<th ng-repeat="property in fields" ng-if="property.hideField">{{property.header}}
</th>
</tr>
<tbody>
<tr ng-repeat="entry in entries">
<td ng-repeat="property in fields" ng-if="property.hideField">
{{entry[property.header]}} {{!!debug.flag}}
</td>
</tr>
</tbody>
</table>
<h2 class="label label-info">table 3 without ng-if</h2>
<table class="table table-hover">
<tr>
<!-- Headers of list-->
<th ng-repeat="property in fields">{{property.header}}
</th>
</tr>
<tbody>
<tr ng-repeat="entry in entries">
<td ng-repeat="property in fields">
{{entry[property.header]}} {{!!debug.flag}}
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
How to reproduce it:
Click on the red button and the flag will toggle from false to true.
Expected behavior:
Table 1 starts with 3 columns. It should show four after clicking.
Table 2 starts with 1 column. It should show 0 columns after clicking.
Table 3 is just a control table with all the data.
Your heading would become visible if you modified the value of its hideField property. But you're not doing that. You're modifying the value of $scope.debug.flag.
The fact that hideField was initialized with the value of $scope.debug.flag won't magically change hideField every time you change $scope.debug.flag.
Just like if you do
var a = 1;
var b = a;
a = 42;
The value of b will still be 1. Not 42.
Changing the value of $scope.debug.flag won't change the value of hideField. Because, it has already been initialized at the time of controller load. The workaround you can apply here is bind that hideField to a method and evaluate that in your ng-if. Sample below.
JS:
$scope.fields = [{
header: "first",
hideField: function() {
return !$scope.debug.flag;
}
}, {
header: "second"
}, {
header: "third"
}, {
header: "fourth"
}, ];
HTML:
<h2 class="label label-info">table 1 with property.hideField = true</h2>
<table class="table table-hover">
<tr>
<!-- Headers of list-->
<th ng-repeat="property in fields" ng-if="!property.hideField()">{{property.header}}
</th>
</tr>
<tbody>
<tr ng-repeat="entry in entries">
<td ng-repeat="property in fields" ng-if="!property.hideField()">
{{entry[property.header]}} {{!!debug.flag}}
</td>
</tr>
</tbody>
</table>
This is not a clean solution though. But, still will solve your problem.

Not able to sort using Smart Table in angularJS

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

Add data into rows on click

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>

Clear css class on table row pagination

I got a smart-table with pagination. I have a controller that apply a css class to the selected row. So the issue is that it keeps the selection on the index on other pages, so I'm searching for a way to clear the class when I use or click pagination.
This is the table:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="TestCtrl">
<div class="smart-table-container">
<table id="mytable" st-safe-src="dataSet" st-table="displayed" class="smart-table table">
<thead>
<tr >
<th >A COLUMN</th>
<th >A COLUMN</th>
<th >A COLUMN</th>
<th >A COLUMN</th>
<th >A COLUMN</th>
</tr>
</thead>
<tbody data-ng-dblclick="scrollTo()">
<tr data-ng-repeat="row in displayed" st-select-row="row" st-select-mode="single" data-ng-click="$parent.setClickedRow($index)" and data-ng-class="{'selected':$index == $parent.selectedRow}">
<td data-ng-click="$parent.selData(row);">{{$index}}</td>
<td data-ng-click="$parent.selData(row);">{{row.asd}}</td>
<td data-ng-click="$parent.selData(row);">{{row.dsa}}</td>
<td data-ng-click="$parent.selData(row);">{{row.qwe}}</td>
<td data-ng-click="$parent.selData(row);">{{row.ewq}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="text-center" st-pagination="" st-items-by-page="5" colspan="8">
</td>
</tr>
</tfoot>
</table>
</div>
</div>
And this is the code related to the selection:
angular.module('myApp', []);
function TestCtrl($scope) {
$scope.selectedRow = null;
$scope.displayed = [{asd:3},{asd:3},{asd:3},{asd:3},{asd:3},{asd:3}]
$scope.setClickedRow = function(index){
$scope.selectedRow = index;
}
}
And the css class:
.selected {
background-color: #67BBED;
}
Including this in your controller may work
$scope.$watch('displayed', function() {
$scope.selectedRow = null;
});
http://plnkr.co/edit/hX093vHZkoZSPvfRnqJE?p=preview

Resources