I have a paginated table using a smart table. I want to sort using first the status and then the code. I can't use orderBy from AngularJS because it will order the elements of each page, not all. And st-sort-default of smart table orders only for one column.
<table st-table="lista.displayedPublications" st-safe-src="lista.publications">
<thead>
<tr>
<th st-sort="publication.status" >STATO</th>
<th st-sort="publication.communicationCode">TREAT CD</th>
<th> ... </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="publication in lista.displayedPublications">
<td>{{publication.status}}</td>
<td>{{publication.communicationCode}}</td>
<td>...</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<div st-template="ListaTreatement/pagination.html" st-pagination="" st-items-by-page="10"></div>
</td>
</tr>
</tfoot>
</table>
In the controller:
public publications: PublicationExtended[];
public displayedPublications = [].concat(this.publications);
constructor(...){
new Api($http).getList(me.comunicationType, me.comunicationStatus).then(
function(response : angular.IHttpPromiseCallbackArg<PublicationExtended[]>) {
me.publications = response.data;
}
}
use $filter("orderBy")($scope.lista.displayedPublications, ["+status", "+code"]); in your controller to sort your data before providing it to your table. + and - can be used to set descending or ascending sort order.
Related
I am populating a table like the following using angularjs:
<table>
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
<th>col5</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows">
<td>{{row.col1}}</td>
<td>{{row.col2}}</td>
<td>{{row.col3}}</td>
<td>{{row.col4}}</td>
<td>{{row.col5}}</td>
</tr>
</tbody>
</table>
because the table has a lot of columns which often contain no values (NULL), I would like to hide those columns.
note: all rows would have that column value NULL.
Example (row.col1=NULL, row.col3=NULL):
<table>
<thead>
<tr>
<th>col2</th>
<th>col4</th>
<th>col5</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows">
<td>{{row.col2}}</td>
<td>{{row.col4}}</td>
<td>{{row.col5}}</td>
</tr>
</tbody>
</table>
so far I was not able to find/figure out a solution for this.
I'm starting to believe that this is not possible to do...
You could a global array that has a boolean variable for each column you want, and set that boolean accordingly.
$scope.showColumn = [false, false, false, false];
Use a function to display your column value that way you get to set your booleans in case you encounter a non-null value.
$scope.setVisible = function(colNum, colVal){
if(colVal)
$scope.showColumn[ colNum ] =true;
return colVal;
};
You'll then have to check the boolean for display and use the function for your column value:
<tr ng-repeat="friend in friends">
<td ng-show="showColumn[0]">{{ setVisible(0, friend.name ) }}</td>
...
See Working plunk (try giving a 'none' property to any friend)
This is very easy to do in an ng-repeat. Just use ng-if.
<table>
<thead>
<tr>
<th>col2</th>
<th>col4</th>
<th>col5</th>
</tr>
</thead>
<tbody>
// ADD NG-IF TO YOUR REPEATER
<tr ng-repeat="row in rows" ng-if="row.col1 != null">
<td>{{row.col2}}</td>
<td>{{row.col4}}</td>
<td>{{row.col5}}</td>
</tr>
</tbody>
</table>
I'm receiving a JSON list from server that could contain any number of properties of any name. I need to show that list on my page. Populating a table when you know the names of properties is easy, but for this one I'm totally lost. Any help would be appreciated.
You can do this,
HTML:
<table>
<thead>
<tr>
<th ng-repeat="(header, value) in resultData[0]">
{{header}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in resultData">
<td ng-repeat="cell in row">
{{cell}}
</td>
</tr>
</tbody>
</table>
Here is a sample
I'm trying to generate a table using angularjs. The code is as follows
Code:
<table>
<thead>
<tr>
<th>Column Name1</th>
<th>Column Name2</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in Items">
<th>{{Items[$index].Age}}</th>
<th>{{Items[$index].School}}</th>
</tr>
</tbody>
</table>
Here what I want to do is that, when age and school data is generated in the table, they should go under a person's name and that name should appear in the column. How can I do this?
If I have an $scope array as follows;
$scope.Items = [{Name:Jhon,Age:23, School: 'some school'}....];
I want the colum name to be Jhon and Below that I want the other 2 data
You are repeating through the array of Items where each object (in your case 'item') have a Age and School property for example:
var Items = [{Age:23, School: 'some school'}....];
this part is wrong:
<tbody>
<tr ng-repeat="item in Items">
<th>
{{Items[$index].Age}}
</th>
<th>
{{Items[$index].School}}
</th>
</tbody>
it should be:
<tbody>
<tr ng-repeat="item in Items">
<th>
{{item.Age}}
</th>
<th>
{{item.School}}
</th>
</tbody>
Look at the snippet below, that illustrates how to achieve the Age and School under the Name:
<tr ng-repeat="item in Items">
<td>
<table>
<thead>
<tr>
<th colspan="2">{{item.Name}}</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center"><i>Age:</i> {{item.Age}}</td>
<td align="center"><i>School:</i> {{item.School}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
Watch the demo here.
Below is my table's html code -
<table id="srchTable" style="width:100%; font-size:0.85em;"">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tr ng-repeat="jsonSearchData in searchData">
<td><a id="link1" href="" ng-click="openPopUp()">{{jsonSearchData.Name}}</a></td>
<td>{{jsonSearchData.Age}}</td>
<td>{{jsonSearchData.Salary}}</td>
</tr>
</table>
This is js code for table -
$('#srchTable').dataTable();
I am populating table from json result. Below is the json -
[{
"Name":"Sam",
"Age":"25",
"Salary":"$25000"
},
{
"Name":"Phillip",
"Age":"25",
"Salary":"$30000"
}]
Now when I am clicking on sort icons table is showing No data available in table message. And same thing is happeing when I am trying to search in data table.I tried below code but it didn't worked.
$('#srchTable').dataTable({
"ordering":true,
"searching": true
});
Please help.
In this case jquery is executed before angular render the data .
You don't need to use jquery here. Angular provides filters
and sorting options .
example :
<input type="search" ng-model="query">
<table id="srchTable" style="width:100%; font-size:0.85em;"">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tr ng-repeat="jsonSearchData in searchData | filter : query | orderBy : 'name'">
<td><a id="link1" href="" ng-click="openPopUp()">{{jsonSearchData.Name}} </a></td>
<td>{{jsonSearchData.Age}}</td>
<td>{{jsonSearchData.Salary}}</td>
</tr>
</table>
Be sure to wrap your data rows in <tbody></tbody>.
<table id="srchTable" style="width:100%; font-size:0.85em;"">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tbody><!-- start after </thead> Be sure not to include in loop -->
<tr ng-repeat="jsonSearchData in searchData">
<td><a id="link1" href="" ng-click="openPopUp()">{{jsonSearchData.Name}}</a></td>
<td>{{jsonSearchData.Age}}</td>
<td>{{jsonSearchData.Salary}}</td>
</tr>
</tbody><!-- end after loop -->
</table>
By using angular smart table, how do i get the result set by using offset value.
For example, I have 100 records in the database
First i need to get 20 records from database and to display only 10 items per page.
After clicking the 3rd page, need to query the database(service call) and get the another 20 records..etc(but no server call for 2nd page)
I am using smart table pipe/ajax plugin to display the records.
How to achieve using this.
<div class="table-container" ng-controller="pipeCtrl as mc">
<table class="table" st-pipe="mc.callServer" st-table="mc.displayed">
<thead>
<tr>
<th st-sort="id">id</th>
<th st-sort-default="reverse" st-sort="name">name</th>
<th st-sort="age">age</th>
<th st-sort="saved">saved people</th>
</tr>
<tr>
<th><input st-search="id"/></th>
<th><input st-search="name"/></th>
<th><input st-search="age"/></th>
<th><input st-search="saved"/></th>
</tr>
</thead>
<tbody ng-show="!mc.isLoading">
<tr ng-repeat="row in mc.displayed">
<td>{{row.id}}</td>
<td>{{row.name}}</td>
<td>{{row.age}}</td>
<td>{{row.saved}}</td>
</tr>
</tbody>
<tbody ng-show="mc.isLoading">
<tr>
<td colspan="4" class="text-center"><div class="loading-indicator"></div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="text-center" st-pagination="" st-items-by-page="5" colspan="4">
</td>
</tr>
</tfoot>
</table>
</div>
http://lorenzofox3.github.io/smart-table-website/
code in the Plunker
http://plnkr.co/edit/wzUHcc9PBF6tzH8iAEsn?p=preview
You need to add st-safe-src="tablecollection" as well as st-table=tablerow
Then,
<tr ng-repeat="row in tablerow">
FMI,
source: Client side pagination not working in smart table
Set the page size to 10.
Maintain a service level array object (var fetchedData) for the fetched rows from the server.
Only call the server if the required amount of data not available in the client side.
Always filter the data for the pagination from fetchedData.
Something like this in your service.
var fetchedData = [];
function getPage(start, number, params) {
if (fetchedData.length < (start + number)) {
//get the next 20 rows from the server and add to fetchedData;
}
var filtered = params.search.predicateObject ?
$filter('filter')(fetchedData, params.search.predicateObject) :
fetchedData;
//rest of the logic