I am using ngTable to show data in table with pagination.
But Now I want to add sorting on each column.
Does any on have an idea about it?
have a look at ngTable documentation - here and example here
function demoController(NgTableParams, simpleList) {
this.tableParams = new NgTableParams({
// initial sort order
sorting: { name: "asc" }
}, {
dataset: simpleList
});
}
Prefer this
Example
<table ng-table="vm.tableParams" class="table" show-filter="true">
<tr ng-repeat="user in $data">
<td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
{{user.name}}</td>
<td title="'Age'" filter="{ age: 'number'}" sortable="'age'">
{{user.age}}</td>
</tr>
</table>
you have to create filter like this.
Likewise you can add serch object name into each column
Related
So far I've only found examples that put the objects in the rows (1)(2)(3), but I need to put the objects in the columns and their attributes in the rows.
Example of JSON:
[
{
name: 'peanut butter',
price: 0.99
}
{
name: 'strawberry jelly',
price: 0.99
}
{
name: 'white bread',
price: 2.99
}
]
Example of desired table:
I think you want something like this.
Angular template:
<table>
<tr>
<th>Name</th>
<th ng-repeat="item in yourList">{{ item.name }}</th>
</tr>
<tr>
<td>Price</td>
<td ng-repeat="item in yourList">{{ item.price }}</td>
</tr>
</table>
I want to repeat data in a table row. However, when i click a button in the last td of the row, I want Another row to show underneath it, and ONLY beneath that element.
I can repeat separate data using ng-repeat-show/end, but it repeats the secondary data over all the primary data rows. The code:
<table class="table table-bordered table-striped table-hover table-responsive">
<tr ng-repeat-start="data in product_data | filter:'Flexi Floor/Low Wall':true">
<td style="vertical-align:middle;">{{data.model_no_from}} + {{data.model_no_to}}</td>
<td style="vertical-align:middle;">{{data.cooling}}</td>
<td style="vertical-align:middle;">{{data.heating}}</td>
<td style="vertical-align:middle;"><span class="blue">{{data.nominal_cooling}}</span><span class="red">{{data.nominal_heating}}</span></td>
<td style="vertical-align:middle;">{{data.pipe_length}}</td>
<td style="vertical-align:middle;">{{data.system_listPrice | currency:"£"}}</td>
<td class="td_button"><button class="btn btn-default btn-block td_button_border" ng-click="add()">Select</button></td>
</tr>
<tr ng-repeat-end ng-show="show_row">
<td colspan="6">This will repeat</td>
</tr>
</table>
Here's a plunker example of what I think you're looking for: http://plnkr.co/edit/z7gYsKxNffwm78aiEgQX?p=preview
Basically if you model your table rows as an array of objects, the addRow() button click function should insert a new row object into your model and when Angular applies changes to the view, ng-repeat will take care of appending the new row.
So if this is the ng-repeat row of your table:
<tr ng-repeat="row in rows track by $index">
<td>{{$index}}</td>
<td>{{row.details}}</td>
<td><button ng-click="addRow($index)">Add Row</button></td>
</tr>
Then this addRow() function and model should accomplish what you're after:
$scope.rows = [
{ details: 'Originally row 0' },
{ details: 'Originally row 1' },
{ details: 'Originally row 2' }
];
$scope.addRow = function(index){
$scope.rows.splice( index+1, 0, { details: 'new row after clicking index '+index} );
};
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 am new to angularjs and I am trying to write a directive with nested elements.
<mydir-table>
<mydir-columns>
<mydir-column>
<title>Employee Name</title>
<data-field-name>ename</data-field-name>
<mydir-table>
<mydir-columns>
<mydir-column>
I have a JSON something similar to this:
{
rows: [
{
name: "Emp1"
},
{
name: "Emp2"
}
]
}
and expected output is:
<table>
<th>
Employee Name
</th>
<tr>
<td>
Emp 1
</td>
</tr>
<tr>
<td>
Emp 2
</td>
</tr>
</table>
Can anyone please provide some thoughts on how this can be implemented?
I have used ng-scrollbar like this :
<tbody ng-scrollbar rebuild-on="rebuild:me" class="scrollme" id ="tempID">
and in ng table , included the broadcast
getData: function($defer, params) {
$scope.$broadcast('rebuild:me');
Now the ng-repeat is populating the tr in thead after first th instead of appending/loading it correctly in tbody
how to correctly display my results?
did you try this
getData: function($defer, params) {
$defer.promise.then(function(){
$scope.$broadcast('rebuild:me');
};
...
right after updating table
Edit 1
tbody is replacing by div and thus how layout became messy,check plunk
Edit 2
Here some workaround about this,need some editing,i will update later
Edit 3(final)
Finally get working example of ngtable and ngscrollbar together,but its not most beautiful solution but still:
1.
you need separate thead from rest of table into new table which locate right above main table
<thead>
<tr >
<th class="sortable" ng-class="{
'nameasc':'sort-asc' ,
'namedesc':'sort-desc'
}[sortTableParam]"
ng-click="SortBy('name')">
<div>name</div>
</th>
<th class="text-center sortable" ng-class="{
'ageasc':'sort-asc' ,
'agedesc':'sort-desc'
}[sortTableParam]"
ng-click="SortBy('age')">
<div>Age</div>
</th>
</tr>
</thead>
</table>
2.
second - hide thead in main table and wrap table into div tag,which will be processing by directive:
<div style="height:300px" ng-scrollbar rebuild-on="rebuild:me" class="scrollme">
<table ng-table="tableParams" show-filter="true" class="table">
<thead><tr><th ></th><th ></th></tr></thead>
<tbody >
<tr ng-repeat="user in $data">
<td data-title="'Name'" filter="{ 'name': 'text' }" sortable="name">
{{user.name}}
</td>
<td data-title="'Age'" sortable="age">
{{user.age}}
</td>
</tr>
</tbody>
</table>
</div>
3.
Clicks from header will trigger reloading data with sorting option,by binding SortBy function
var sorting = $scope.tableParams.$params.sorting;
var dir = sorting != null ? (sorting[param.toString()] == 'asc' ? 'desc' : 'asc') : 'asc';
var sort={};
sort[param.toString()]=dir;
$scope.tableParams.sorting(sort);
//edit classes in header for rows imaging(check plunk)
updatesorting(param);
};