Using AJAX data, so I declare thusly:
<table st-table="displayedCollection" st-safe-src="eventStationsAnalyticData"
class="table table-striped">
<thead>
<tr>
<th st-sort="getters.station_id">Station #</th>
<th st-sort="station_name">Station name</th>
</tr>
<tr>
<th colspan="5"><input st-search="" class="form-control" placeholder="Global search ..." type="text"/></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in displayedCollection">
<td>{{row.station_id}}</td>
<td>{{row.station_name}}</td>
</tr>
</tbody>
There are no sort arrows visible (the CSS is included), and a breakpoint on the sort function is not being hit.
I believe that I have copied from the example & edited, but ...
Who can help?
[Update] Search is also not working. And, even if I remove the search, the sort still doesn't work.
Note to self, it seems to work in this Plunk, which you forked at the office. Try to figure out the difference to your actual code when you get home.
It is could possibly be something not visible here, such as a missing file; but, don't rule anyhing out.
Related
I have a generic DataTable with Responsive successfully configured. What I am after is to force DataTable to have a hidden column no matter what viewport it is displayed.
I tried searching for anything that might help me here but no luck.
Found what I am trying to achieve. You gotta add class="none" to the header of column you intend to always hide.
<table id="example" class="display" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th class="none">Age</th>
<th class="none">Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
</tbody>
</table>
Then simply initialize datatable with the Responsive plugin
$(document).ready(function() {
$('#example').DataTable();
});
I am trying to display the table header list with multiple select, something like this. In this I am seeing that collection is undefined and predicator is passing, and the distinct itmes data are not displaying.
I getting following error:
angular.js:13236 TypeError: displaySetter is not a function
at StTableController.pipe (smart-table.js:163)
at StTableController.sortBy (smart-table.js:124)
at sort (smart-table.js:354)
at m.$eval (angular.js:16820)
at m.$apply (angular.js:16920)
at HTMLTableCellElement.sortClick (smart-table.js:360)
at Rf (angular.js:3398)
at HTMLTableCellElement.Qf.d (angular.js:3386)`
This might be because the st-table attribute is not configured properly. Make sure you have configured the list (that is available in ng-repeat) in st-table. In the below example, customerList is added to the st-table attribute.
<table st-table="customerList" class="table table-striped">
<thead>
<tr>
<th>Account Number</th>
<th>Customer Name</th>
<th>Address</th>
<th>City</th>
<th>state</th>
</tr>
<tr>
<th colspan="3"><input st-search placeholder="global search" class="input-sm form-control" type="search"/></th>
</tr>
</thead>
<tbody>
<tr
ng-repeat="customer in customerList">
<td>{{customer.accountNumber}}</td>
<td>{{customer.name}}</td>
<td>{{customer.address}}</td>
<td>{{customer.city}}</td>
<td>{{customer.state}}</td>
</tr>
</tbody>
</table>
i have am iterating smart table with angular like this:
<tr>
<th></th>
<th ng-repeat="title in productColumnsTitle" class="text-center" st-sort="{{title.name}}">{{title.title}}</th>
<th></th>
</tr>
then i have other table below called without the ng-repeat attribute, but i see that all the columns are not well rendered it seems that width of this and tags are different from that below, anyone know why?
You shouldn't call ng-repeat in your table headers, the header is where you'll put you objects property names in the order you will want them to show
<thead>
<tr>
<th st-sort="firstName">first name</th>
<th>last name</th>
<th>birth date</th>
<th>balance</th>
<th>email</th>
</tr>
</thead>
you can technically iterate the object properties using something like ng-repeat="(key, value) in data[0]", but you will have no control over the order of the properties.
just iterate over plain table rows.
also, make sure you use the appropriate amount of cell width in your colspan <td> attribute
I have a problem of performance and i don't find the solution.
Context: I need to display a lot of data ( 500 lines, 8 columns ) in a table. To displayed this data i chosed to use Smart-table because it offers good functionality but the problem is that i have a lot of data and the time of displaying data is very long ( 5 - 9 second, this depend of device performance ).
Important thing: I need to display all data so i don't want pagination method, limit filter.
So this code is working :
<ion-scroll class="scrollVertical" direction="xy" overflow-scroll="true" >
<table st-table="tableaux" class="table table-striped">
<thead>
<tr>
<th ng-repeat="column in ColumnTable">{{column.Label}}</th>
</tr>
<tr>
<th ng-repeat="column in ColumnTable">
<input st-search="{{column.Id}}" placeholder="" class="input-sm form-control" type="search" ng-model="inputRempli"/>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in tableaux">
<td ng-repeat="column in ColumnTable" ng-init="colonne = column.Id">{{row[colonne]}}</td>
</tr>
</tbody>
</table>
</ion-scroll>
I read that Ionic made a directive (collection-repeat) wich allows an app to show huge lists of items much more performantly than ng-repeat. So i tried to remake my solution with collection-repeat but that doesn't work...
Code collection-repeat solution:
<ion-scroll class="scrollVertical">
<table st-table="tableaux" class="table table-striped">
<thead>
<tr>
<th ng-repeat="column in ColumnTable">{{column.Label}}</th>
</tr>
<tr>
<th ng-repeat="column in ColumnTable">
<input st-search="{{column.Id}}" placeholder="" class="input-sm form-control" type="search" ng-model="inputRempli"/>
</th>
</tr>
</thead>
<tbody>
<tr collection-repeat="row in tableaux" item-width="200px" item-height="100px">
<td collection-repeat="column in ColumnTable" ng-init="colonne = column.Id" item-width="100px" item-height="100px">{{row[colonne]}}</td>
</tr>
</tbody>
</table>
</ion-scroll>
Error: Maximum call stack size exceeded
Questions: Is there any angularjs or ionic solution to increase performance of smart-table with a lot of data ?
What's wrong with my collection-repeat ?
What version of Ionic are u using? If you are using version 1.0 beta 14 or higher use bind once (native in Angular 1.3)
It would like like this.
<ion-scroll class="scrollVertical" direction="xy" overflow-scroll="true" >
<table st-table="tableaux" class="table table-striped">
<thead>
<tr>
<th ng-repeat="column in ::ColumnTable">{{::column.Label}}</th>
</tr>
<tr>
<th ng-repeat="column in ::ColumnTable">
<input st-search="{{::column.Id}}" placeholder="" class="input-sm form-control" type="search" ng-model="inputRempli"/>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in ::tableaux">
<td ng-repeat="column in ::ColumnTable" ng-init="colonne = column.Id">{{::row[colonne]}}</td>
</tr>
</tbody>
</table>
</ion-scroll>
How are you loading your datas ?
If you are doing a $scope.ColumnTable.push(newData); then this is not a proper way to do it.
What I do is :
create a service that load a Temporary Table : let's call it myService.setTable().
Inform your controller with an event : This service sends an event $rootScope.$broadCast("myService.setTable-refresh")
Catch the event into your controller & update table : $scope.$on('myService.setTable-refresh,function(){ $scope.myWorkingTable =myService.getTable();});
Update your HTML to work with myWorkingTable
Moreover, you shall define an unique key into your ng-repeat for performance optimisation used by track by to prevent rebuilding already created content.
See explanation here : http://www.bennadel.com/blog/2556-using-track-by-with-ngrepeat-in-angularjs-1-2.htm
I am using smart-table to display generic lists of data built up as an array of objects in code.
I wish to be able to apply sorting on any of the columns, how do I pass the column name to sort on to the getter? At the moment I can only sort on a hard coded column.
{{item.displayName}}
{{item.displayName}}
All you need yo do is match the st-sort with the corresponding name in the tables body, see example below. Clicking "Age" will then only sort the "Age" column.
<table st-table="example" class="table table-striped">
<thead>
<tr>
<th></th>
<th st-sort="name">Name</th>
<th st-sort="age">Age</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="example in examples">
<td cs-select="row"></td>
<td>{{example.name}}</td>
<td>{{example.age}}</td>
</tr>
</tbody>
</table>