I am new to handlebar.js and I am trying to solve a problem. The problem is that when I am using handlebars to render the response coming from the server, it's not updating the table. There are three important points to consider:
I have used jQuery Datables
I have used two modals (the second modal opens on click of a button that is on the first modal)
It's updating the tables only if I put the script tags above the table tags but that is causing a problem when the second modal is opened as it falls underneath the first modal
Handlebar template code is below:
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>name</th>
<th>Location</th>
<th>Number</th>
<th>WorkMode</th>
<th>Edit</th>
</tr>
</thead>
<script id="some-template" type="text/x-handlebars-template">
<tbody>
{{#RESPONSE_CODE }}
<tr>
<td>{{this.exec_city}}</td>
<td>{{this.exec_first_name}}</td>
<td>{{this.exec_mobileno }}</td>
<td>{{this.exec_id}}</td>
</tr>
{{/RESPONSE_CODE}}
</tbody>
</script>
</table>
$('#example').DataTable();
var source = $("#some-template").html();
var template = Handlebars.compile(source);
$('body').append(template(result.RESPONSE));
What am I doing wrong?
Related
I have a Bootstrap 4 data table, and sorting the rows by clicking the column headings is working fine, but the little up and down facing triangle icons are not appearing. I've tried both thead-dark and thead-light classes so I don't think the problem is the color.
Here is a sample of the HTML with which I create the table (this is using the Rails ERB templating system that substitutes my text for the table_id and col_sort_tooltip variables).
<div class="table-responsive data-table-div" >
<table id="<%= table_id %>" class="data-table table thead-dark table-striped">
<thead class="thead-dark" title="<%= col_sort_tooltip %>" alt="<%= col_sort_tooltip %>" data-toggle="tooltip" data-placement="bottom">
<tr>
<th scope="col">Title</th>
<th scope="col">Performer</th>
<th scope="col">Rights Admin</th>
<th scope="col" class="text-center">Listen</th>
</tr>
</thead>
Where do you suggest I look to fix this?
I know this is not how the code should be structured but I am limited. I am trying to include a datatable inside angular ng-if section. When I take off the ng-if statement the js runs fine. I am looking for ways around this where it works. I have tried to move the js outside of the ng-if, but then the datatable doesn't work. Any hint in the right direction would be helpful. Thanks.
<div ng-if="test">
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<!-- Results table -->
<table id="example2" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Account</th>
<th>Created On</th>
<th>Table ID</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr ng-click="displayStatementToggle()">
<th>123</th>
<th>2011-04-28 13:32:07</th>
<th>Mortgage</th>
<th>Edit</th>
</tr>
<tr ng-click="displayStatementToggle()">
<th>123</th>
<th>2016-04-18 14:36:07</th>
<th>Monthly</th>
<th>Edit</th>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$('#example2').DataTable();
});
</script>
</div>
ng-if will create a child scope which is different from your controller scope. Try to use ng-show instead
<div ng-show="test">
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<!-- Results table -->
<table id="example2" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Account</th>
<th>Created On</th>
<th>Table ID</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr ng-click="displayStatementToggle()">
<th>123</th>
<th>2011-04-28 13:32:07</th>
<th>Mortgage</th>
<th>Edit</th>
</tr>
<tr ng-click="displayStatementToggle()">
<th>123</th>
<th>2016-04-18 14:36:07</th>
<th>Monthly</th>
<th>Edit</th>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$('#example2').DataTable();
});
</script>
</div>
ng-if has its own scope, so the functions you are calling are undefined inside of it.
ng-show is a possible solution, but has it's own caveats.
Plase, take a look at this answer, which explains the importance of using the dot in your directives. Even if you choose to use ng-show, I would recommend that you refactor your controller and view to avoid further complications down the road.
If you are new to angular, don't hesitate to read John Papa's styleguide, which covers that situation and many others.
I am new to angularjs and I am creating an table rows using ng-repeat.
Below is the code snippet
<div class="table-responsive">
<table class="table table-condensed">
<thead>
<tr>
<th>heading1</th>
<th>heading2</th>
<th>heading3</th>
<th>heading4</th>
<th>heading5</th>
<th>heading6</th>
<th>heading7</th>
<th>heading8</th>
<th>heading9</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="task in taskList">
<td>{{task.item1}}</td>
<td>{{task.item2}}</td>
<td>{{task.item3}}</td>
<td>{{task.item4}}</td>
<td>{{task.item5}}</td>
<td>{{task.item6}}</td>
<td>{{task.item7}}</td>
<td>{{task.item8}}</td>
<td>{{task.item9}}</td>
</tr>
</tbody>
</table>
</div>
and i am loading same in ng-view div
<div ng-view class="container-fluid"></div>
But when I see the above table in mobile mode of chrome browser, table is growing horizontally(out of device width).
Same code works fine if I create a test page with same classes.
Let me know if anything I need to change to use in angular?
In jQuery mobile v 1.4.5 i used table rows append dynamically with column toggle but it does not work for the rows which are dynamically generated.
<table id="tab" data-role="table" data-mode="columntoggle" class="ui-responsive">
<tbody id="tb" >
<thead id="th">
<tr id="tr1">
<th>First</th>
<th data-priority="1">Second</th>
<th data-priority="2">third</th>
</tr>
</thead>
</tbody>
</table>
Here is the Fiddle what I tried.
I referred this jQuery mobile document.
Note: I want to insert the table rows at the top of the previous rows (dynamically added rows that why I used "after" property).
Edited:
New link is the below to locate created new row on the top of the table
http://jsfiddle.net/txej8qhj/6/
The below link works fine;
http://jsfiddle.net/txej8qhj/3/
Probably you too know. Sometimes we may overlook somethings. You should separate the thead and tbody element. Actually thead element first comes in a table like the below;
<table>
<thead>
</thead>
<tbody>
</tbody>
</table>
Check the below link out to use as guide;
http://demos.jquerymobile.com/1.4.5/table-column-toggle/#&ui-state=dialog
You need to call refresh and trigger create functions on the table element.
Please, try the below:
$("#tr1").after(newrow);
$('#tab').table("refresh").trigger("create");
How can we use Bootstrap to create <thead> with 2 levels (eg: Summer Period has hildren data1, data2, data3) and also table cells that merged 2 vertical cells (eg:State)?
Here's how it looks like in Excel:
I'm not sure how exactly to do it with Bootstrap, but I know how to do it in HTML:
You can use a combination of the colspan and rowspan attributes, where rowspan is used for table headers spanning multiple rows, and the same applies to colspan and columns.
Break up your table headers into rows, according to their levels.
So the first table row will consist of your "parent" headers, i.e. the headers that every other header and piece of data is going to fall under.
Your first row should have 3 columns: State, Utilities Company and Summer Period.
Add subsequent header rows for each level you drill down. Here, your next row will simply be the table headers for each data set.
Let's apply the attributes:
Your 1st th for State spans 2 rows, so we add rowspan="2".
The same applies to the next table header, Utilities Company.
Summer Period spans 1 row and 3 columns, so we add colspan="3"
Add another tr in the header, containing the 3 cells for data1, data2 and data3.
The resulting HTML looks like this:
<thead>
<tr>
<th rowspan="2">State</th>
<th rowspan="2">Utilities Company</th>
<th colspan="3">Summer Period</th>
</tr>
<tr>
<th>data1</th>
<th>data2</th>
<th>data3</th>
</tr>
</thead>
Here is a demo fiddle.
Here's an updated demo (actually reset as base) including bootstrap.css even though it literally does nothing demo fiddle updated.
Creating a complex header with multiple lines in Bootstrap is exactly as it is in HTML. Here is your table in HTML for Bootstrap:
<table class="table table-bordered">
<thread>
<tr>
<th>State</th>
<th>Utilities Company</th>
<th colspan="3">Summer Period</th>
</tr>
<tr>
<th></th>
<th></th>
<th>data1</th>
<th>data2</th>
<th>data3</th>
</tr>
</thread>
<tbody>
... data here ...
</tbody>
</table>
You may have to add some CSS between your first and second header row to display your data correctly
<table class="table table-bordered">
<thread>
<tr>
<th rowspan="2">State</th>
<th rowspan="2">Utilities Company</th>
<th colspan="3">Summer Period</th>
</tr>
<tr>
<th>data1</th>
<th>data2</th>
<th>data3</th>
</tr>
</thread>
<tbody>
... data here ...
</tbody>
</table>