I am defining a bootstrap table in HTML:
<table data-toggle="table" data-url="/api/myapi" data-data-field="objects" data-total-field="num_results" data-side-pagination="server">
<thead>
<tr>
<th>name</th>
<th>email</th>
</tr>
</thead>
</table>
The API call is being made and JSON is getting returned:
{
"num_results": 1,
"objects": [
{
"company": "My Company",
"create_date": "2018-07-04T06:29:06.290000",
"email": "test#gmail.com",
"id": 1,
"name": "Joe Bloggs"
}
],
"page": 1,
"total_pages": 1
}
I would expect that specifying data-data-field="objects" would instruct Bootstrap-Table to iterate the objects array. Alas, it doesn't seem to work..
Any ideas?
Appears to be a bug in Bootstrap-Table where it ignores dataField unless pagination is enabled. Bug report.
Fixed like this:
<table data-toggle="table" data-url="/api/myapi" data-data-field="objects" data-total-field="num_results" data-pagination=true data-side-pagination="server" data-id-field="id">
Related
I try to create simple bootstrap table in Angular 7.2 project however it does not use any styles. I just see raw text. Any ideas why it does not work?
component.ts:
elements: any = [
{id: 1, first: 'Mark', last: 'Otto', handle: '#mdo'},
{id: 2, first: 'Jacob', last: 'Thornton', handle: '#fat'},
{id: 3, first: 'Larry', last: 'the Bird', handle: '#twitter'},
];
headElements = ['ID', 'First', 'Last', 'Handle'];
component.html:
<table mdbTable striped="true">
<thead>
<tr>
<th *ngFor="let head of headElements" scope="col">{{head}} </th>
</tr>
</thead>
<tbody>
<tr mdbTableCol *ngFor="let el of elements">
<th scope="row">{{el.id}}</th>
<td>{{el.first}}</td>
<td>{{el.last}}</td>
<td>{{el.handle}}</td>
</tr>
</tbody>
</table>
angular.json:
"styles": [
"src/styles.scss",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/assets/sass/paper-kit.scss",
"src/assets/css/demo.css",
"src/assets/css/nucleo-icons.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.slim.min.js",
"node_modules/popper.js/dist/umd/popper.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
],
styles.scss:
#import "~bootstrap/dist/css/bootstrap.css";
app.modules.ts:
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
...
imports: [
...,
NgbModule.forRoot(),
...
],
...
bootstrap: [AppComponent]
To use Bootstrap table, just add the class table, for striped, add table-striped
<table class="table table-striped">
</table
But your HTML shows you have used mdbootstrap. You need to install angular-bootstrap-md
npm i angular-bootstrap-md
I have got the following data (sample):
"data": {
"eventsHeading": "Upcoming events",
"eventsToBeDisplayed": 3,
"allEventLinkText": "See all events",
"eventsList": [
{
"eventDate": "22/12/2015",
"eventTitle": "EVENT INFO 1"
},
{
"eventDate": "22/12/2015",
"eventTitle": "EVENT INFO 2"
},
{
"eventDate": "14/01/2016",
"eventTitle": "EVENT INFO 3"
},
{
"eventDate": "14/01/2016",
"eventTitle": "EVENT INFO 4"
}
]
}
And I have something like this:
{{#eventsList}}
<tr>
<td class="date-column">{{eventDate}}</td>
<td class="text-link truncate-text"><span decorator="tooltip:{{eventTitle}}" tabindex="0">{{eventTitle}}</span>
</tr>
{{/}}
And now it will just print all the data for eventList. What I want to do is add a for loop like
i=0;i<={{eventsToBeDisplayed}};i++
so only 3 of the data will show.
What do you think is the best approach for this?
You can add an indexer to the loop and then conditionally filter inside the loop:
{{#eventsList:i}}
{{# i < eventsToDisplay}}
<tr>
<td class="date-column">{{eventDate}}</td>
<td class="text-link truncate-text"><span decorator="tooltip:{{eventTitle}}" tabindex="0">{{eventTitle}}</span>
</tr>
{{/}}
{{/}}
You could also use computed properties - I like to do this because it seems a little more explicit than a loop where the entire body is wrapped in an if, you can reuse it more easily, you can do calculations or checks against that subset of data in other areas, etc...
template
{{#topEvents}}
<tr>...</tr>
{{/}}
script (computed goes on same level as data)
computed: {
topEvents: function(){
return this.get('eventsToDisplay').slice(0, this.get('eventsToBeDisplayed'));
}
}
Is it possible to auto-print the fields of a Meteor collection using helpers without specifying them?
Let's say I start having a helper that returns the collection of objects stored in a table, as follows:
{{ #each CollectionData }}
<thead>
<tr>
<th>Code</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<Tr class="object-row">
<Td> {{code}} </ td>
<Td> {{description}} </ td>
</tr>
</tbody>
...
{{/each}}
Now i specify an "object schema" for each collection to set which field i want to auto-print, pseudo example:
// Items is the name of the possible collection
Schema.items var = {
fields {
code: {
columnName: "code",
show: false,
},
description: {
columnName: "description",
show: false,
},
otherField {
columnName: "foo",
show: false,
}
}
}
Now, I would make the helper to auto-generate the table columns and values of a collection field where the show check is true, without having to manually specify {{code}}, {{description}} and so on, pseudo example:
{{ #each CollectionData }}
<thead>
<tr>
{{print each column where show check is == true, without manually specifing any name}}
</tr>
</thead>
<tbody>
<Tr class="object-row">
{{print the value of the column, for this record, where show check is == true, without specifing its name}}
</tr>
</tbody>
...
{{/each}}
Is there any way to do that?
The simpliest way would be to create a template for each TD, something like
<thead>
<tr>
{{#each fetchColumnHeaders}}
{{> columnHeader }}
{{/each}}
</tr>
</thead>
{{ #each CollectionData }}
<tbody>
<Tr class="object-row">
{{#each fetchColumnItems}}
{{> columnItem}}
{{/each}}
</tr>
</tbody>
{{/each}}
<template name="columnHeader">
<th>{{label}}</th>
</template>
<template name="columnItem">
<td>{{label}}</td>
</template>
And then you can write template helpers to return the column headers, and the various items based on your schema
I have a table which I have applied sorting to but to complete this task I would like the classes to change to show carets going up or down based on the sorting.
As you can see I have used the standard SortableMixin within Ember to get the sorting functionality but I'm having trouble changing the class of the individual element which has been clicked.
App.CampaignsController = Ember.ArrayController.extend({
sortProperties: ["id"],
sortAscending: true,
actions: {
sortBy: function(property){
if (this.get("sortProperties")[0] === property){
this.toggleProperty("sortAscending");
} else {
this.set("sortProperties", [property]);
this.set("sortAscending", true)
}
}
}
});
The table I'm I've applied the actions to is below:
<table class="table table-striped table-hover">
<thead>
<tr>
<th {{action "sortBy" "name"}}><i {{bind-attr class=":fa sortAscending:fa-caret-up:fa-caret-down"}}></i>Campaign Name</th>
<th {{action "sortBy" "campaign_code"}}><i {{bind-attr class=":fa sortAscending:fa-caret-up:fa-caret-down"}}></i>Campaign Code</th>
</tr>
</thead>
<tbody>
<td>{{name}}</td>
<td>{{campaign_code}}</td>
</tbody>
</table>
I'm using the sortAscending boolean to dictate what CSS class will appear. My problem is if I click the first heading, the classes on the second heading also change.
How do I get the CSS to change only on the heading that I have clicked?
Your <th> now has state (whether it's sorted, and whether it's ascending or descending), so you should wrap it up in a component. Something like this
<table>
<thead>
<tr>
{{#sortable-th property='name' action='sortBy'}}
Campaign Name
{{/#sortable-th}}
</tr>
</thead>
</table>
The component's template
// templates/components/sortable-th.js
<th>
<i {{bind-attr class=":fa sortAscending:fa-caret-up:fa-caret-down"}}></i>
{{yield}}
</th>
and code
// components/sortable-th.js
export default Ember.Component.extend({
sortAscending: true,
click: function() {
this.toggleProperty('sortAscending');
this.sendAction('action', this.get('property'), this.get('sortAscending'));
}
}
That's just a rough outline, try the implementation yourself. But that's how I would start thinking about it.
I have a handlebars template
<tbody id="userInfoDetails">
<script id="some-template" type="text/x-handlebars-template">
{{#each usersInfo}}
<tr>
<td class="username">{{screenname}}</td>
<td class="realName">{{realname}}</td>
<td class="email">{{email}}</td>
</tr>
{{/each}}
</script>
</tbody>
My JSON context :
var response = [{
"usersInfo": [{
"id": 0,
"email": "user0#live.com",
"realname": "user0",
"screenname": "mash0",
"mention": "false"
},
{
"id": 1,
"email": "user1#live.com",
"realname": "user1",
"screenname": "mash1",
"mention": "false"
},
{
"id": 2,
"email": "user2#live.com",
"realname": "user2",
"screenname": "mash2",
"mention": "false"
} ]
}]
and the render function:
var source = $("#some-template").html();
var template = Handlebars.compile(source);
$("#userInfoDetails").html(template(response));
But I dont get the expected html for rendering. In fact with this code, template(response) returns empty.
Any suggestions.?
Answered in https://stackoverflow.com/a/7344483/1342296.
In your case. Either change the JSON response server side, or template only the first object.
$("#userInfoDetails").html(template(response[0]));