Here is an ItemView template called activatetwoitem
<!-- <tr>-->
<td><%= gatewayJson.serial %></td>
<td>In Inventory</td>
<td><%= gatewayJson.macaddress %></td>
<!-- </tr>-->
Here is the CompositeView template called activatetwo
<table class="table table-hover">
<thead>
<tr>
<th>Gateway ID</th>
<th>In Group</th>
<th>MAC Address</th>
</tr>
</thead>
<tbody></tbody></table>
Here is the ItemView
Step2View = Backbone.Marionette.ItemView.extend
template: activatetwoitem
tagName: 'tr'
Here is the compositeView
Step2Views = Backbone.Marionette.CompositeView.extend
itemView: Step2View
template: activatetwo
itemViewContainer: "tbody"
Now I am getting this...
<table class="table table-hover">
<thead>
<tr>
<th>Gateway ID</th>
<th>In Group</th>
<th>MAC Address</th>
</tr>
</thead>
<tbody>
<tr>
<!-- <tr>-->
<tr>
<td>AX1OD</td>
<td>In Inventory</td>
<td>secret mac address</td>
<!-- </tr>-->
</tr>
</tr>
<tr>
<!-- <tr>-->
<tr>
<td>12RUM</td>
<td>In Inventory</td>
<td>secret mac address</td>
<!-- </tr>-->
</tr>
</tr>
</tbody>
Why am I getting that? If I take out the tagName then the somehow still shows up (with a div of course instead of the 2nd tr) any thoughts?
I didn't look at why, but when I took out the commented html from the template, the extra wrapper went away. Too bad, because I like the commented lines in the template to remind me about what is supposed to go there.
Related
I am trying to render a json as a table in a HTML Template using angularjs ng-repeat element. The script file passes the JSON object, but the ng-repeat wont render the contents of JSON.
I followed the steps from this tutorial link.
https://codepen.io/salva341/pen/aYKmvG
html template section where ng-repeat doesn't render properly
<div ng-controller="WorkflowShowCntrl">
<table class="table striped">
<thead>
<th>Job Name</th>
<th>Job Id</th>
<th>Start Time</th>
<th>Status</th>
</thead>
<tbody>
<tr ng-repeat="ttm in records.response" >
<td>{{ttm.name}} </td>
<td>{{ttm.status}} </td>
<td>{{ttm.name}} </td>
<td>{{ttm.name}} </td>
</tr>
</tbody>
</table>
</div>
app.js
angularjs 1.6.6
$http.get("/api/data-depot/currentjob/list")
.then(function(response) {
$scope.records = {"response":response.data}
$scope.parseItem = function(string)
{
var newString = string.replace(/['\']/g,'');
var jsonFormated = JSON.parse(newString);
return jsonFormated.Message;
}
});
Google chrome inspector : Section inspection screenshot
I have used an angularjs add-on inspector for chrome.
It looks like ttm is the array you want to display for. So I believe your ng-repeat should be more like:
<tr ng-repeat="record in ttm" >
<td>{{record.name}} </td>
<td>{{record.status}} </td>
<td>{{record.name}} </td>
<td>{{record.name}} </td>
ttm being the array, and record being a made-up name for each item in that array.
See: https://www.w3schools.com/angular/ng_ng-repeat.asp
As per your code, your are referencing wrong array name in your HTML binding.
Try this
<div ng-controller="WorkflowShowCntrl">
<table class="table striped">
<thead>
<th>Job Name</th>
<th>Job Id</th>
<th>Start Time</th>
<th>Status</th>
</thead>
<tbody>
<tr ng-repeat="item in records.response.ttm" >
<td>{{item.name}} </td>
<td>{{item.status}} </td>
<td>{{item.name}} </td>
<td>{{item.name}} </td>
</tr>
</tbody>
</table>
</div>
Finally I was was able to achieve what I wanted.
I added ng-bind element to display the data on the html template. That is weird. No of the scope variable gets displayed on the html template without ng-bind element. This investigating that is strange this is happening.
I would like to thank #Thaier Alkhateeb for their valuable comment.
Revised code snippet
<tbody ng-repeat="data in records.response ">
<tr ng-repeat="ttm in data">
<td ng-bind="ttm.name"> </td>
<td ng-bind="ttm.appId"> </td>
<td ng-bind="ttm.created"> </td>
<td ng-bind="ttm.status"> </td>
</tr>
</tbody>
I have, for the first time used a ready made template for my project.
Here's the link https://colorlib.com/polygon/adminator/index.html of that theme.
Whenever I am trying to load the datatable of that theme into the ng-view, it loads everything except this.
Here's the snapshot of that,
But when I am using it normally ( without the using ngView), everything loads fine,
here's the code snippet of that index.html file
<main class="main-content bgc-grey-100">
<!--<h1> ng-view content</h1>-->
<div ng-view id="mainContent" > <!-- whenever I remove the ngview and just paste the code below in this section, it works fine -->
</div>
</main> <!-- main ends --><br><br>
and the partial template which I am loading has the following code.
<div class="container-fluid">
<h4 class="c-grey-900 mT-10 mB-30">Data Tables</h4>
<div class="row">
<div class="col-md-12">
<div class="bgc-white bd bdrs-3 p-20 mB-20">
<h4 class="c-grey-900 mB-20">Bootstrap Data Table</h4>
<table id="dataTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<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>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
I am beginner in AngularJs. I don't how is that happening. This was the best way in which I could have framed out the question. If anything's missing please let ne know. Please help me out in solving this issue.
ng-view is usually used for routing. If you want to include a html template inside another page I would recommend using ng-include.
<div ng-include src="'/path/to/the/file.html'"></div>
NOTE: The file path must be within single quotes as src expects a string.
When to use ng-view and ng-include
I am trying to hide/show columns class datatable-colvis-basic but it is hiding only the table header not data. I think because my dynamic table data from angular js. what is solution for that.
<table id="table_id" class="table datatable-colvis-basic" id="DataTables_Table_0 " role="grid" aria-describedby="DataTables_Table_0_info" ng-show="numberLoad">
<thead>
<tr>
<th>#</th>
<th>Order Id</th>
<th>SKU</th>
<th>Vendor Name</th>
<th>Recived MP</th>
<th>Placed On MP</th>
<th>Placed On Date</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="mplist in getMpList | itemsPerPage:mpreportinfo.itemsPerPage" current-page="mpreportinfo.currentPage" total-items="total_count">
<td>{{$index + 1}}</td>
<td>{{mplist.order_id}}</td>
<td>{{mplist.sku}}</td>
<td>{{mplist.vendor_name}}</td>
<td>{{mplist.order_source_name}}</td>
<td>Amazon</td>
<td>{{mplist.placed_date}}</td>
</tr>
</tbody>
</table>
please check attached image
Put the ng-show in the element inside the table.
<table id="table_id" class="table datatable-colvis-basic" id="DataTables_Table_0 " role="grid" aria-describedby="DataTables_Table_0_info">
<thead>
<tr>
<th>#</th>
<th>Order Id</th>
<th>SKU</th>
<th>Vendor Name</th>
<th>Recived MP</th>
<th ng-show="numberLoad">Placed On MP</th>
<th>Placed On Date</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="mplist in getMpList | itemsPerPage:mpreportinfo.itemsPerPage" current-page="mpreportinfo.currentPage" total-items="total_count">
<td>{{$index + 1}}</td>
<td>{{mplist.order_id}}</td>
<td>{{mplist.sku}}</td>
<td>{{mplist.vendor_name}}</td>
<td>{{mplist.order_source_name}}</td>
<td ng-show="numberLoad">Amazon</td>
<td>{{mplist.placed_date}}</td>
</tr>
</tbody>
</table>
Here you have an example of show or hide columns with angularJS and ng-show.
I hope it helps you.
https://codepen.io/salva341/pen/oqyxKW
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>
I have a static html table on a page and i would like to transform it to a grid; so i applied this function after loading the table:
function createTable() {
// create the grid
var grid = new Ext.ux.grid.TableGrid("tabella-colocazioni", {
stripeRows: true // stripe alternate rows
});
grid.render();
}
I got this piece of code from here: http://www.java2s.com/Code/JavaScript/Ext-JS/CreateagridwithfromanexistingunformattedHTMLtable.htm . The result is the error "this.mainBody is undefined on ext-all-debug.js" on FireBug and the grid is empty. The html code of the table is this:
<table cellspacing="0" id="tabella-colocazioni">
<thead>
<tr style="background:#eeeeee;">
<th>Colocazione</th>
<th>Frequenza</th>
</tr>
</thead>
<tbody>
<tr>
<td>plusquam patria</td>
<td>1</td>
</tr>
<tr>
<td>patria pietate</td>
<td>1</td>
</tr>
<tr>
<td>Et patria</td>
<td>1</td>
</tr>
<tr>
<td>patria prohibet</td>
<td>1</td>
</tr>
<tr>
<td>Multos patria</td>
<td>1</td>
</tr>
<tr>
<td>patria reddidit</td>
<td>1</td>
</tr>
<tr>
<td>patronum patria</td>
<td>1</td>
</tr>
<tr>
<td>patria moesta</td>
<td>1</td>
</tr>
</tbody>
</table>
What is the problem? Thank you very much.
Code looks fine. Are you sure that all includes are correct (check the Firebug Net tab)? Are you sure that the Ext version you are using is supported by the ux?