I am trying pagination using ng-table. It's showing all the data in single page rather than paginating it. Its not giving any error and also showing page numbers but content is not getting paginated.
<body ng-app="AngularApp">
<table class="table table-bordered table-striped table-hover" id="log_table" ng-controller="ControllerCtrl" ng-table="tableParams">
<tr ng-repeat="logDetail in data">
<td>{{logDetail._source.log_datetime[0]}}</td>
<td>{{logDetail._source.event_src_correlation[0]}}</td>
<td>{{logDetail._source.content_subType[0]}}</td>
</tr>
</table>
</body>
angular.module('AngularApp',['ngTable'])
.controller('ControllerCtrl', function ($scope,$q, ngTableParams) {
$scope.data=[{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-22T17:17:56.689"],"event_src_correlation":[1]},"sort":[1]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-22T19:48:20.459"],"event_src_correlation":[1]},"sort":[2]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-22T19:49:00.981"],"event_src_correlation":[1]},"sort":[3]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-24T20:33:51.762"],"event_src_correlation":[1]},"sort":[4]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-24T20:33:51.763"],"event_src_correlation":[1]},"sort":[5]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-24T20:33:51.768"],"event_src_correlation":[1]},"sort":[6]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-24T20:33:51.770"],"event_src_correlation":[1]},"sort":[7]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-24T20:33:51.784"],"event_src_correlation":[1]},"sort":[8]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-24T20:33:59.943"],"event_src_correlation":[1]},"sort":[9]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-24T20:34:00.360"],"event_src_correlation":[1]},"sort":[10]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-26T13:18:08.149"],"event_src_correlation":[1]},"sort":[11]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-26T13:18:08.150"],"event_src_correlation":[1]},"sort":[12]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-26T13:18:08.151"],"event_src_correlation":[1]},"sort":[13]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-26T13:18:08.152"],"event_src_correlation":[1]},"sort":[14]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-26T13:18:08.165"],"event_src_correlation":[1]},"sort":[15]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-26T13:18:36.586"],"event_src_correlation":[1]},"sort":[16]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-26T13:18:36.965"],"event_src_correlation":[1]},"sort":[17]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-26T13:19:05.467"],"event_src_correlation":[1]},"sort":[18]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-26T13:19:05.468"],"event_src_correlation":[1]},"sort":[19]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-26T13:19:05.468"],"event_src_correlation":[1]},"sort":[20]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-26T13:19:05.469"],"event_src_correlation":[1]},"sort":[21]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-26T13:19:05.476"],"event_src_correlation":[1]},"sort":[22]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-26T13:19:35.917"],"event_src_correlation":[1]},"sort":[23]}];
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10 // count per page
}, {
total: $scope.data.length, // length of data
getData: function($defer, params) {
$defer.resolve($scope.data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
});
Attached plunker link contains code for it : http://plnkr.co/edit/kWVNDXG0RlPAqX5lkwhS?p=preview
You just miss $ in ng-repeater should be logdetail in $data instad of logdetail in data
http://plnkr.co/edit/5etPezh3iCHRpYnzllw1?p=preview
<table class="table table-bordered table-striped table-hover" id="log_table" ng-table="tableParams">
<tr ng-repeat="logDetail in $data">
<td>{{logDetail._source.log_datetime[0]}}</td>
<td>{{logDetail._source.event_src_correlation[0]}}</td>
<td>{{logDetail._source.content_subType[0]}}</td>
</tr>
</table>
Related
I'm struggling with export functionality in angularJS. I have a table consisting of dynamic data. As it contains a lot of data, I'm using dir-paginate. Pagination has worked for me fine. But when it comes to export, current page data is only exporting and not others.
Below is my table:
<table class="table table-striped" ng-if="worklist.finalarr.length>0">
<thead>
<th>S.No</th>
<th>User</th>
<th>Contact Name</th>
<th>Company Name</th>
<th>Phone</th>
<th>City</th>
</thead>
<tbody>
<tr dir-paginate="data in worklist.finalarr| filter:search|itemsPerPage:10" id="export">
<td>{{$index+1}}</td>
<td>{{data.empid}}</td>
<td>{{data.name}}</td>
<td>{{data.firmname}}</td>
<td>{{data.contact}}</td>
<td>{{data.city}}</td>
</tr>
</tbody>
</table>
<dir-pagination-controls max-size="10" direction-links="true" boundary-links="true" style="float:right" ng-if="worklist.finalarr.length>0">
</dir-pagination-controls>
Below is one of my attempts for exporting data using html2canvas (controller.js):
$scope.export = function(){
html2canvas(document.getElementById('export'), {
onrendered: function (canvas) {
var data = canvas.toDataURL();
var docDefinition = {
content: [{
image: data,
width: 500,
}]
};
pdfMake.createPdf(docDefinition).download("demo"+".pdf");
}
});
}
I know that html2canvas helps in capturing the webpage data that is only present on the view. So please help me out with an alternative.
Thanks in Advance
How to ng-repeat the values of the below array as the column headings for my ng-table?
I am trying to display the value from $scope.cols array as the column headings of my table, in other words as the fields, and display all the rows.
here is my try:
<div ng-controller="mycontroller as projects">
<table ng-table-dynamic="projects.tableParams with projects.cols"
show-filter="true" class="table table-bordered table-striped">
<tr ng-repeat="row in $data">
<td ng-repeat="col in $columns">{{::row[col.field]}}</td>
</tr>
</table>
</div>
and here is my controller:
app.controller('mycontroller', ["$scope", "$filter", "ngTableParams", "DatabaseRef", "$firebaseArray",
function ($scope, $filter, ngTableParams, DatabaseRef, $firebaseArray) {
//show all projects
var showallprojects = DatabaseRef.ref("projects").orderByKey();
$scope.allprojectslist = $firebaseArray(showallprojects);
var data = $scope.allprojectslist;
data.$loaded().then(function(data) {
console.log(data.length); // data is loaded here
$scope.cols = Object.keys(data[0]);
console.log($scope.cols);
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 7, // count per page
sorting: { country: "asc" },
filter : {
}
}, {
filterSwitch: true,
total: 0, //data.length, // length of data
getData: function ($defer, params) {
// use build-in angular filter
var filteredData = params.filter() ?
$filter('filter')($scope.allprojectslist, params.filter()) :
$scope.allprojectslist;
var orderedData = params.sorting() ?
$filter('orderBy')(filteredData, params.orderBy()) :
$scope.allprojectslist;
params.total($scope.allprojectslist.length);
// set total for recalc pagination
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
});
}]);
note:
the ngtable dynamic model is taken from here and the doc is here.
EDIT
I've probably misunderstood your question, I thought the code above wasn't a copy of st-table examples.
In your scenario, if you want to display each $scope.cols value as a heading you need to ng-repeat="col in cols" and print out your current col value {{col}}.
I'm assuming your data inside the body of the table to be an array of objects, and each object to be in the form of [col] => value.
I'm updating the code sample below.
You simply need to structure better your table.
<div ng-controller="mycontroller as projects">
<table ng-table-dynamic="projects.tableParams with projects.cols"
show-filter="true" class="table table-bordered table-striped">
<thead>
<tr>
<th ng-repeat="col in cols">{{col}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in data">
<td ng-repeat="col in col">{{ row[col] || "empty"}}</td>
</tr>
</tbody>
</table>
</div>
So basically we're cycling the $columns array once for building the heading of the table; then we cycle the $data array to get an array of objects (I suppose), and each iteration is a new row; then inside of each row we cycle the $columns array again to get the col.field we're looking for, and each iteration will be a new <td> inside our row.
Hope this helps.
I got a json of table which has columns and rows as below
$scope.table = {
Columns: [{Header:"22-Jul-15",SubHeaders: ["10:33 AM"]}
, {Header:"21-Jul-15",SubHeaders: ["03:40 AM"]}
, {Header:"17-Jul-15",SubHeaders: ["01:05 PM", "12:06 PM"]}]
, Rows:[{Items:[{Value:1},{Value:5},{Value:8},{Value:""}]}
,{Items:[{Value:2},{Value:6},{Value:9},{Value:""}]}
,{Items:[{Value:3},{Value:7},{Value:10},{Value:15}]}]
} //end of table
I want to display Columns.SubHeaders as Sub header row of a table.
Here what I tried, but did not work
<table class="table table-stripped table-bordered">
<thead>
<tr>
<th ng-repeat="col in table.Columns" colspan="{{col.SubHeaders.length}}">{{col.Header}}</th>
</tr>
<tr>
<td class="center text-black" ng-repeat="head in table.Columns[0].SubHeaders">{{head}}</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in table.Rows">
<td ng-repeat="item in row.Items">
{{item.Value}}
</td>
</tr>
</tbody>
</table>
I used head in table.Columns[0].SubHeaders just to show it is working for hard-coded index value.
How can I achieve this using single ng-repeat? I can use two ng-repeats but it will lead to unnecessary html markup.
Here is the complete fiddle
I created this fiddler (forked from yours):
https://jsfiddle.net/b50hvzef/1/
The idea is to join the subheaders as they are they actual columns:
<td class="center text-black" ng-repeat="head in subHeaders">{{head}}</td>
and the code looks like this:
var app = angular.module("app",[]);
app.controller("MyController", function ($scope, $http) {
$scope.table = {
Columns: [{Header:"22-Jul-15",SubHeaders: ["10:33 AM"]}
, {Header:"21-Jul-15",SubHeaders: ["03:40 AM"]}
, {Header:"17-Jul-15",SubHeaders: ["01:05 PM", "12:06 PM"]}]
,Rows:[{Items:[{Value:1},{Value:5},{Value:8}]}
,{Items:[{Value:2},{Value:6},{Value:9}]}
,{Items:[{Value:3},{Value:7},{Value:10}]}]
};
var subHeaders = [];
$scope.table.Columns.forEach(function(col) {
col.SubHeaders.forEach(function(subHeader) {
subHeaders.push(subHeader);
});
});
$scope.subHeaders = subHeaders;
});
Note that there is still a mismatch between columns and data. But it's up to you how to solve it.
Hope this helps.
I want to implement the pagination in angular js.
I am new to angular js.
I get this error in browser:
Error: [$injector:unpr] http://errors.angularjs.org/1.3.15/$injector/unpr?p0=ngTableParamsProvider%20%3C-%20ngTableParams%20%3C-%20allUsersCtrl
I have included these files at the HEAD section of layout view:
<!-- angular js--->
<script src="<?php echo base_url();?>angular/js/angular.min.js"></script>
<script src="<?php echo base_url();?>angular/js/angular-route.min.js"></script>
<!-- flash msg -->
<script src="<?php echo base_url();?>angular/js/angular-flash.js"></script>
<!-- flash msg -->
<!--loading bar-->
<script src="<?php echo base_url();?>angular/js/loading-bar.min.js"></script>
<script src="<?php echo base_url();?>angular/js/angular-animate.min.js"></script>
<script src="<?php echo base_url();?>angular/js/ng-table.min.js"></script>
<!--loading bar-->
<script src="<?php echo base_url();?>angular/js/demo_angular.js"></script>
<script src="<?php echo base_url();?>angular/js/app.js"></script>
This is my table in partial html:
<table ng-table="tableParams" class="table table-striped table-bordered table-hover" id="table_all_users">
<thead>
<tr>
<th width="20%"><input type="checkbox" name="chk_all" id="chk_all" onchange="checkAll(this)" /> Select</th>
<th width="15%">Sr. No.</th>
<th width="35%">User Name</th>
<th width="25%">First Name</th>
<th width="25%">Last Name</th>
<th width="15%">Mobile</th>
<th width="15%">Email</th>
<th width="15%">Action</th>
</tr>
</thead>
<tbody ng-init="get_users()">
<tr class="gradeX" ng-repeat="user in allUsers | filter:query">
<td width="20%"><input type="checkbox" name="list[]" class="chk_all" value="" id="" onclick="uncheck_select_all(this);" /></td>
<td width="15%">{{ $index + 1 }}</td>
<td width="35%">{{ user.username }}</td>
<td width="25%">{{ user.fname }}</td>
<td width="25%">{{ user.lname }}</td>
<td width="15%">{{ user.mobile }}</td>
<td width="15%">{{ user.email }}</td>
<td width="15%"><a title="Edit User" href="#/edit_user/{{user.user_id}}" ><span class="fa fa-pencil"></span></a> | <a title="Delete User" id="" style="cursor:pointer;" ng-click="delete_user(user.user_id)" ><span class="fa fa-trash-o"></span></a></td>
</tr>
</tbody>
</table>
This is the script.
var angularControllers = angular.module('angularControllers', ['flash']);
angularControllers.controller('allUsersCtrl', ['$scope','$http','$filter','Flash','ngTableParams', function($scope,$http,$filter,Flash,ngTableParams){
$scope.get_users = function()
{
$http.get("../admin/users/angular_all_users").success(function(data)
{
$scope.allUsers = data;
});
}
//for sorting by table column
var orderBy = $filter('orderBy');
$scope.order = function(predicate, reverse)
{
$scope.allUsers = orderBy($scope.allUsers, predicate, reverse);
}
//table pagination
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10 // count per page
}, {
total: data.length, // length of data
getData: function ($defer, params) {
$defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
})
}]);
When I am adding here as: ['flash','ngTable']
still it gives error : data is not defined
Also after trying to implement pagination my data is not going to display, only header row is display.
Please suggest me any solution or any link that will guid step by step for pagination
My advice to you is always to initialize the ng-table in $http.get. It must be like:
$http.get('../admin/users/angular_all_users').success(function (data) {
$scope.tableParams = new ngTableParams({
page: 1,
count: 10
},
{
total: data.length,
getData: function ($defer, params) {
// use build-in angular filter for ordering
var orderedData = params.sorting() ?
$filter('orderBy')(data, params.orderBy()) : data;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
});
With this "best practice" you will always avoid the problem that data with it's properties is undefined.
Don't forget to include ngTable in your module.
Hope this will push you forward.
Best regards!
You are getting the error because you are trying to include a dependency called ngTableParams which I think is in the module called ngTable which you have not included.
When you include the module as well, you are getting data is undefined. This is because you are using data variable in line
total: data.length, // length of data
but you have not declared the variabled before usage. I think you missed that.
You can just check the line number in the error to determine what is the problem. Try putting breakpoints, so you can easily trace the issues.
I also meet this error
/**
* #ngdoc service
* #name ngTableParams
* #description Backwards compatible shim for lowercase 'n' in NgTableParams
*/
angular.module('ngTable').factory('ngTableParams', ['NgTableParams', function(NgTableParams) {
return NgTableParams;
}]);
the above code can find in angular-ngtable.js, but I don't use this version, I success when I replace this, or change ngtableParams to uppercase (recommand).
I created a Plunker here to illustrate the problem. Here is the main code:
<body ng-controller="MainCtrl">
<table class="table table-bordered table-striped table-condensed table-hover">
<caption class="text-left" style="background-color: lightgray">
Search: <input ng-model="searchString" style="width: 80px" />
Filted count: {{filteredList.length}}
</caption>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Sex</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="emp in filteredList = (data.employees | filter:searchString)">
<td>{{emp.firstName}}</td>
<td>{{emp.lastName}}</td>
<td>{{emp.sex}}</td>
</tr>
</tbody>
</table>
</body>
App.js:
$scope.searchString = '';
$scope.$watch('searchString', function(str) {
console.log($scope.filteredList.length);
});
The problem is that the console.log of filteredList.length is always one loop behind (compared to html which is correct), that is, from previous filter. How can I fix it?
You are logging filteredList.length as soon as searchString changes. But, at at moment, filteredList has not yet been modified by the filter in ngRepeat.
One way to fix this would be to $watch filteredList.length instead:
$scope.$watch(function() {
return ($scope.filteredList || []).length;
...
Update
I really like shaunhusain's comment. His suggestion is probably closer to what you really want to do.
$scope.searchString = '';
// Initialize filteredItems as a copy of data.employees
$scope.filteredItems = angular.copy($scope.data.employees);
// Watch your search string instead and apply filtering using $filter
$scope.$watch(function() {
return $scope.searchString;
},
function(str) {
$scope.filteredItems = $filter('filter')($scope.data.employees, {$: $scope.searchString}, false);
console.log($scope.filteredItems.length);
});
Then, your ngRepeat is simply:
<tr ng-repeat="emp in filteredItems">
<td>{{emp.firstName}}</td>
<td>{{emp.lastName}}</td>
<td>{{emp.sex}}</td>
</tr>