Is there a way to make the HTML table as data source for highstock chart type of highchart lib ?
You need to define dates instead of categories.
Example:
- http://jsfiddle.net/ysxo739h/
<table id="datatable">
<thead>
<tr>
<th></th>
<th>Jane</th>
<th>John</th>
</tr>
</thead>
<tbody>
<tr>
<th>2006-01-01</th>
<td>3</td>
<td>4</td>
</tr>
<tr>
<th>2006-01-02</th>
<td>5</td>
<td>6</td>
</tr>
</tbody>
Related
There's an example in the Thymeleaf docs that I'm curious about.
Is commenting out a block using Thymeleaf-style commenting faster than using th:remove="all-but-first"?
Example:
<table>
<tr th:each="user : ${users}">
<td th:text="${user.name}">Jamie Dimon</td>
</tr>
<!--/* Hidden from evaluation -->
<tr>
<td>Jeff Bezos</td>
</tr>
<tr>
<td>Warren Buffett</td>
</tr>
<!--*/-->
</table>
vs.
<table th:remove="all-but-first">
<tr th:each="user : ${users}">
<td th:text="${user.name}">Jamie Dimon</td>
</tr>
<tr>
<td>Jeff Bezos</td>
</tr>
<tr>
<td>Warren Buffett</td>
</tr>
</table>
In both cases, prototyping would show the same HTML, but I am wondering whether the low precedence of th:remove would make it less desirable since it would be removing the tags after evaluating the th:each.
I am new to thymeleaf, I have a little problem. I am successfully getting data from database and displaying to table formate, here i am getting true/false from database. Same thing displaying in table formate.
But i want to show true as yes and fasle as no in front end.
<tbody>
<tr th:each="trn,iterStat : ${trans}">
<td th:text="${trn.txn}">Yes</td>
</tr>
</tbody>
How to change my code?
Different ways to go about this depending on what you want your html to look like:
<tbody>
<tr th:each="trn,iterStat : ${trans}">
<td th:text="${trn.txn ? 'Yes' : 'No'}" />
</tr>
</tbody>
or
<tbody>
<tr th:each="trn,iterStat : ${trans}">
<td>
<span th:if="${trn.txn}">Yes</span>
<span th:unless="${trn.txn}">No</span>
</td>
</tr>
</tbody>
I have an array of arrays #iterated_orders like this:
[[1, "Don", 3], [nil, nil, 4], [2, "Vri", nil]]
And code in my view like this:
%table
- #iterated_orders.each do |day, day_name, order_id|
- unless day.blank?
%tr
%td.day= day
%td= order_id
I would expect it to output this html:
<tr>
<td class="day">1 Don</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td class="day">2 Vri</td>
<td></td>
<td></td>
</tr>
But it outputs this HTML:
<tr>
<td class="day">1 Don</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td class="day">2 Vri</td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
Why is there an extra <tr> and is the <td> with the order_id not added to the existing <tr>?
Your Haml actually renders:
<table>
<tr>
<td class='day'>1</td>
</tr>
<td>3</td>
<td>4</td>
<tr>
<td class='day'>2</td>
</tr>
<td></td>
</table>
When you view it in a browser, the browser will correct this to be valid HTML, including adding extra tr elements, which I suspect is where you are seeing your result (although I get something different in Chrome).
The td with the order_ids are not added to the previous tr because that tr has been closed at that point. Your Haml reads as “unless day is blank, insert a new row containing a cell with the day (and close it), and then insert some table cells with the order_ids”.
The best way to achieve what you are trying to do with Haml is to first get your data into a form that matches your intended output. Being familiar with the Enumerable methods can help here. In particular in this case chunk_while is probably what we want:
#sorted_orders = #iterated_orders.chunk_while {|before, after| after[0].blank? }
Now you can iterate over this structure to produce the HTML:
%table
- #sorted_orders.each do |day|
%tr
-# the first sub-array contains the day:
%td.day #{day[0][0]} #{day[0][1]}
-# then add a td for each order_id (including the first):
- day.each do |d|
%td= d[2]
This produces (with your example data):
<table>
<tr>
<td class='day'>1 Don</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td class='day'>2 Vri</td>
<td></td>
</tr>
</table>
which isn’t exactly what your goal is (you have an extra td in the second row). You may have to fix the data a bit more to get equal numbers of elements for each day.
I'm using datatable plugin but having an issue with the sorting. default sorting order is asc and i want data in descending order when the page is loaded.
following is the script i'm using for initialization:
jQuery(document).ready(function(){
App.init();
});
also tried to use this
$('#sample_1').dataTable();
but it effects the menus. Menu sliders stops working and datatable also not working properly with this.
and there is no error in console.
Thanks
Without seeing your init code and HTML, we can't really point out what is going wrong.
If your table is visible before the DataTable is initialized, then you'll need to make sure it is sorted correctly in the original HTML.
When initializing the DataTable you'll want to set up the initial sorting - e.g. for descending sort on the first column:
$table = $("#sample_1").dataTable({
"aaSorting": [[0, 'desc']]
});
Here is the HTML:
<table class="table table-striped table-bordered adjust_table" style="table-layout:fixed;" id="sample_1"><thead>
<tr>
<th class="">Order ID</th>
<th class="">Name</th>
</tr>
</thead>
<tbody>
<tr>
<th class="">2001</th>
<th class="">John</th>
</tr>
<tr>
<th class="">2002</th>
<th class="">Marry</th>
</tr>
</tbody>
</table>
And following is the init code:
App.init();
In a Rails app, I'm using dataTables and a columnFilter.js.
I want the column search to be at the top of the dataTable and not the bottom.
So, I added this in the js:
.columnFilter(
sPlaceHolder: "head:before"
And I added a 2nd row to the header, like this:
<table class="display dataTable table table-striped table-bordered" id="dataTable1">
<thead>
<tr>
<th>Search</th>
<th>Search</th>
<th>Search</th>
<th>Search</th>
<th>Search</th>
</tr>
<tr>
<th>Date</th>
<th>Desc</th>
<th>Client</th>
<th>Project</th>
<th>Employee</th>
</tr>
</thead>
It looks fine on my Mac:
But, on Heroku the table rows are switched: