I have an ng-table in my project. My problem is that no pager displays. The table loads multiple rows and I paged from 10 to 10, I assign value 10 to count, but nothing happens.
This is my code:
$scope.tableParams = new ngTableParams({
page: 1,
count: 10,
filter: {
message: ''
},
sorting: {
asset: 'asc'
}
},
{
total: $scope.data.length,
counts: [],
getData: function ($defer, params) {
var orderedData = params.sorting() ?
$filter('orderBy')($scope.data, params.orderBy()) :
$scope.data;
params.total(orderedData.length);
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
<table ng-table="tableParams" class="table table-striped table-hover table-bordered">
<tr ng-repeat="ws in data | filter:search" style="text-align:center;">
<td data-title="'Tag Name'" sortable="'tagname'">{{ws.tagname}}</td>
<td data-title="'Description'" sortable="'tagname'">{{ws.tagdescription}}</td>
<td data-title="'Data Type'" sortable="'datatype'">{{ws.datatype}}</td>
<td data-title="'Tag Unit'" sortable="'tagdescription'">{{ws.tagunit}}</td>
<td data-title="'Birth Date'" sortable="'birthdate'">{{ws.birthdate | date:'yyyy-MM-dd h:mm:ss'}}</td>
<td data-title="'Last Date'" sortable="'lastdate'">{{ws.lastdate | date:'yyyy-MM-dd h:mm:ss'}}</td>
<td data-title="'Last Value'" sortable="'lastvalue'">{{ws.lastvalue}}</td>
</tr>
</table>
Try repeating over $data instead of data in your table:
<table ng-table="tableParams" class="table table-striped table-hover table-bordered">
<tr ng-repeat="ws in $data | filter:search" style="text-align:center;">
<td data-title="'Tag Name'" sortable="'tagname'">{{ws.tagname}}</td>
<td data-title="'Description'" sortable="'tagname'">{{ws.tagdescription}}</td>
<td data-title="'Data Type'" sortable="'datatype'">{{ws.datatype}}</td>
<td data-title="'Tag Unit'" sortable="'tagdescription'">{{ws.tagunit}}</td>
<td data-title="'Birth Date'" sortable="'birthdate'">{{ws.birthdate | date:'yyyy-MM-dd h:mm:ss'}}</td>
<td data-title="'Last Date'" sortable="'lastdate'">{{ws.lastdate | date:'yyyy-MM-dd h:mm:ss'}}</td>
<td data-title="'Last Value'" sortable="'lastvalue'">{{ws.lastvalue}}</td>
</tr>
</table>
$data is used internally by ngTable to handle pagination among other things.
Related
Aim - Display a dynamic table for both rows and columns as below -
Dynamic Header - The fund codes are values for "name" from the json object array.
Dynamic rows with values for Application, Redemption and Net
JSON object :
[
{
name: 'VBIF',
application: 1000,
redemption: -200,
netAppRed: 800
},
{
name: 'VCIF',
application: 1500,
redemption: -200,
netAppRed: 800
},
{
name: 'VMPF',
application: 2000,
redemption: 0,
netAppRed: 2000
},
{
name: 'VBIF-A',
application: 800,
redemption: 100,
netAppRed: 700
},
{
name: 'VMPF-A',
application: 43540,
redemption: 12550,
netAppRed: 30990
}
]
HTML :
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Fund Code</th>
<th>Application</th>
<th>Redemption</th>
<th>Net Application Redemption</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="cashflow in cashflows">
<td>{{cashflow.name}}</td>
<td>{{cashflow.application | currency}}</td>
<td>{{cashflow.redemption | currency}}</td>
<td>{{cashflow.netAppRed | currency}}</td>
</tr>
</tbody>
</table>
</div>
Current view displays :
Another option without need to change model:
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Fund Code</th>
<th data-ng-repeat="cashflow in cashflows">{{cashflow.name}} </th>
</tr>
</thead>
<tbody>
<tr >
<td>Application</td>
<td data-ng-repeat="cashflow in cashflows">{{cashflow.application | currency}}</td>
</tr>
<tr >
<td>Redemption</td>
<td data-ng-repeat="cashflow in cashflows">{{cashflow.redemption | currency}}</td>
</tr>
<tr >
<td>NetAppRed</td>
<td data-ng-repeat="cashflow in cashflows">{{cashflow.netAppRed | currency}}</td>
</tr>
</tbody>
</table>
</div>
Resovled it by changing the model in the controller as below -
$scope.getHeaders = function (){
var keys = [];
angular.forEach(object, function (val, key) {
if(key !== '$$hashKey') { keys.push(key); }
});
return keys;
};
$scope.getValue = function () {
var values = [];
angular.forEach(object, function (val, key) {
if(key !== '$$hashKey') { values.push(val); }
});
return values;
};
The HTML updated as below -
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th></th>
<th ng-repeat="(header, value) in cashflows">
{{value.name}}
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Application</td>
<td ng-repeat="row in cashflows">
{{row.application}}
</td>
</tr>
<tr>
<td>Redemption</td>
<td ng-repeat="row in cashflows">
{{row.redemption}}
</td>
</tr>
<tr>
<td>Net App & Red</td>
<td ng-repeat="row in cashflows">
{{row.netAppRed}}
</td>
</tr>
</tbody>
</table>
</div>
Final Output :
you can use ng-tables to show your dynamic data
here is example
[https://www.tutlane.com/tutorial/angularjs/angularjs-tables-with-ng-table][1]
if any query ask me on comment
<table ng-table="demo.tableParams" class="table table-condensed table-bordered table-striped">
<tr ng-repeat="row in $data">
<td data-title="'Name'" filter="{name: 'text'}">{{$index}}</td>
<td data-title="'Age'" filter="{age: 'number'}">{{row.age}}</td>
<td data-title="'Money'">{{row.money}}</td>
<td data-title="'Country'" filter="{ country: 'select'}" filter-data="demo.countries">{{row.country}}</td>
</tr>
</table>
</div>
I have {{$index}} to print out the index number. I understand that i can filter easily using filter={age: 'number'} however i cannot do the same for $index as it is not part of the dataset from the JS.
I want to be able to filter $index via a input box instead of automatically filtering upon loading the page.
I don't think you can filter on $index. But you can simply extend you dataset before rendering the table.
Controller
$scope.data = [{
name: 'greg',
age:29,
money: 100.10
}, {
name: 'bob',
age:30,
money: 250.00
}];
for(var i = 0; i < $scope.data.length; i++) {
$scope.data[i].index = i;
}
$scope.table = new NgTableParams({ }, {
dataset: $scope.data
});
View:
<table ng-table="table" class="table table-condensed table-bordered table-striped">
<tr ng-repeat="row in $data">
<td data-title="'Index'" filter="{index: 'number'}">{{row.index}}</td>
<td data-title="'Name'" filter="{name: 'text'}">{{row.name}}</td>
<td data-title="'Age'" filter="{age: 'number'}">{{row.age}}</td>
<td data-title="'Money'" filter="{money: 'number'}">{{row.money}}</td>
</tr> </table>
I have a problem with filter in ng-table AngularJS
when I use it, it's work for
{{p.quantite}},
{{p.montant}}, {{p.date | date:'dd/MM/yyyy'}}
but not working for others
{{p.produitEspece.produitFamille.libelle}},
{{p.produitEspece.libelle}},{{p.clientClient.libelle }}
this my code:
show_vente.html
<div class="panel-body">
<h5 class="over-title margin-bottom-15" data-ng-init="displayData()">Liste <span class="text-bold">des ventes</span></h5>
<div>
<table ng-table="tableParams" show-filter="true" class="table table-striped">
<tr ng-repeat="p in $data">
<td title="'Famille'" filter="{ 'famille': 'text' }" > {{p.produitEspece.produitFamille.libelle}} </td>
<td title="'Produit'" filter="{ 'produit': 'text' }" > {{p.produitEspece.libelle}} </td>
<td title="'Quantité'" filter="{ 'quantite': 'text' }" >{{p.quantite}}</td>
<td title="'Montant'" filter="{ 'montant': 'text' }" >{{p.montant}}</td>
<td title="'Client'" filter="{ 'client': 'text' }" >{{p.clientClient.libelle }}</td>
<td title="'Date'" filter="{ 'date': 'text' }">{{p.date | date:'dd/MM/yyyy'}}</td>
</tr>
</table>
</div>
</div>
venteController.js
var tableData = [];
$scope.filter = {
key: undefined,
failed: undefined
};
$scope.tableParams = new ngTableParams({
page: 1,
count: 25,
},{
dataset: tableData,
total:tableData.length,
getData : function($defer,params){
$http.get(prod.url+'/vente/all').then(function(response) {
tableData = response.data;
tableData = params.filter() ? $filter('filter')(tableData, params.filter()) : tableData;
$defer.resolve(tableData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
params.total(tableData.length);
});
}
})
also sorting work just for "montant" and "quantite" and not working for others
help please
thanks in advance
Update
I found the solution of my problem, I did create my own filter:
filter="{ 'client': 'clienttext' }"
...
<script type="text/ng-template" id="ng-table/filters/clienttext.html">
<input type="text" name="filter-clienttext" ng-model="params.filter().clientClient.libelle" class="input-filter form-control"/>
</script>
thanks :)
I have created an application in angularJS using ng-Table, In the application I am using grouping feature of ng-Table, The application is working fine for single table which is shown in a sample as given below
Single Table with grouping in a single Controller
Demo
But the problem is that in my application I am using two tables within a single controller, when i tried to put two tables with grouping feature
I am not getting the table displayed
Can anyone please tell me some solution for this
Two Tables with grouping in a single Controller
Demo
<body ng-app="main" ng-controller="DemoCtrl">
<table ng-table="firstTableParams" class="table">
<tbody ng-repeat="group in myData.$groups">
<tr class="ng-table-group">
<td colspan="{{$columns.length}}">
<strong>{{ group.value }}</strong>
</td>
</tr>
<tr ng-repeat="user in group.data">
<td sortable="name" data-title="'Name'">
{{user.name}}
</td>
<td sortable="age" data-title="'Age'">
{{user.age}}
</td>
</tr>
</tbody>
</table>
<table ng-table="secondTableParams" class="table">
<tbody ng-repeat="group in myAnotherData.$groups">
<tr class="ng-table-group">
<td colspan="{{$columns.length}}">
<strong>{{ group.value }}</strong>
</td>
</tr>
<tr ng-repeat="user in group.data">
<td sortable="name" data-title="'Name'">
{{user.name}}
</td>
<td sortable="age" data-title="'Age'">
{{user.age}}
</td>
</tr>
</tbody>
</table>
</body>
for first table controller use $data in ng-repeat for both table it will work
$scope.firstTableParams= [];
$scope.data= data;
$scope.firstTableParams= new ngTableParams({
page: 1,
count: 10,
}, {
total: $scope.data.length,
getData: function($defer, params) {
var filters = params.filter();
if (params.settings().$scope == null) {
params.settings().$scope = $scope;
}
var tempDateFilter;
var orderedData = params.sorting() ?
$filter('orderBy')($scope.data, params.orderBy()) :
$scope.data;
if(filters) {
orderedData = $filter('filter')(orderedData, filters);
filters.Date = tempDateFilter;
}
$scope.users = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
params.total(orderedData.length); // set total for recalc pagination
$defer.resolve($scope.users);
}
})`
for second table controller
$scope.secondTableParams= [];
$scope.data1= data;
$scope.secondTableParams= new ngTableParams({
page: 1,
count: 10,
}, {
total: $scope.data1.length,
getData: function($defer, params) {
var filters = params.filter();
if (params.settings().$scope == null) {
params.settings().$scope = $scope;
}
var tempDateFilter;
var orderedData = params.sorting() ?
$filter('orderBy')($scope.data1, params.orderBy()) :
$scope.data1;
if(filters) {
orderedData = $filter('filter')(orderedData, filters);
filters.Date = tempDateFilter;
}
$scope.users = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
params.total(orderedData.length); // set total for recalc pagination
$defer.resolve($scope.users);
}
})
iterate over $groups
<tbody ng-repeat="group in $groups">
in second plunk ,it must be like,since you resolving data by defer ,each table process its own data
<body ng-app="main" ng-controller="DemoCtrl">
<table ng-table="firstTableParams" class="table">
<tbody ng-repeat="group in $groups"> //changed here
<tr class="ng-table-group">
<td colspan="{{$columns.length}}">
<strong>{{ group.value }}</strong>
</td>
</tr>
<tr ng-repeat="user in group.data">
<td sortable="name" data-title="'Name'">
{{user.name}}
</td>
<td sortable="age" data-title="'Age'">
{{user.age}}
</td>
</tr>
</tbody>
</table>
<table ng-table="secondTableParams" class="table">
<tbody ng-repeat="group in $groups"> //changed here
<tr class="ng-table-group">
<td colspan="{{$columns.length}}">
<strong>{{ group.value }}</strong>
</td>
</tr>
<tr ng-repeat="user in group.data">
<td sortable="name" data-title="'Name'">
{{user.name}}
</td>
<td sortable="age" data-title="'Age'">
{{user.age}}
</td>
</tr>
</tbody>
</table>
</body>
I am trying to create a nested grid in my ngtable like this:
<table ng-table="tableParams" class="table">
<tr ng-repeat="user in $data">
<td data-title="'Name'">{{user.name}}</td>
<td data-title="'Age'">{{user.age}}</td>
<td data-title="'kids'">
<table ng-table="nestedtableParams" class="table">
<tr ng-repeat="nesteduser in $nesteddata">
<td data-title="'Name'">{{nesteduser.name}}</td>
<td data-title="'Age'">{{nesteduser.age}}</td>
</tr>
</table>
</td>
</tr>
</table>
question is: why is the nested data not displaying? here is a plunkr:
http://plnkr.co/edit/dKTtU89f7z6nQptgEZxN?p=preview
Got this working by adding the data to the $scope: (partial example code)
$scope.nesteddata = [{
name: "Kid Moroni",
age: 50
}, {
name: "Kid Tiancum",
age: 43
}, {
name: "Kid Jacob",
age: 27
}, {
name: "Kid Nephi",
age: 29
}, {
name: "Kid Enos",
age: 34
}];
And then, in the controller functions, refer to these $scope variables:
$scope.nestedtableParams = new ngTableParams({
page: 1, // show first page
count: 10 // count per page
}, {
total: $scope.nesteddata.length, // length of data
getData: function($defer, params) {
$defer.resolve($scope.nesteddata.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
Finally in the markup I left out the $ prefix, since this data is now in the scope:
<table ng-table="tableParams" class="table">
<tr ng-repeat="user in data">
<td data-title="'Name'">{{user.name}}</td>
<td data-title="'Age'">{{user.age}}</td>
<td>
<table ng-table="nestedtableParams" class="table">
<tr ng-repeat="user in nesteddata">
<td data-title="'Name'">{{user.name}}</td>
<td data-title="'Age'">{{user.age}}</td>
</tr>
</table>
</td>
</tr>
</table>
Working Plunker (Although I doubt that it makes sense to nest grids like this)