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
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();
});
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.
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 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 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>