How do I setup an HTML+JS table with data associated to a chart (Flotr or D3); where I can multiselect rows and that will update what is shown in the chart? - I'll likely be using AngularJS, so their two-way data-binding might be of help...
E.g.:
<table>
<thead>
<tr><th>Vowel</th> <th>Amount</th></tr>
<thead>
<tbody>
<tr> <td>A</td> <td>3</td> </tr>
<tr> <td>E</td> <td>6</td> </tr>
<tr> <td>I</td> <td>7</td> </tr>
<tr> <td>O</td> <td>8</td> </tr>
<tr> <td>U</td> <td>9</td> </tr>
</tbody>
</table>
Would also be great to be able to go reverse as well, e.g.: pressing E and A on the pie graph would refresh the pie-graph + the table.
http://plnkr.co/edit/x1jGW0lqKyzV7EKsVAbJ?p=preview
Here is the example of how you could do it.
Once you create an directive to connect your data with the DOM, then
it is simple matter of handling the data model through template.
I reused the flot integration directive that I used for other project.
(This 'reusability' is what I love about AngularJs.)
Related
I have a html file with a table tag. This has a theader, tbody and tfooter.
The data in the table body are realy long. So I want that it splits when it's bigger then A4 size.
It works greate when I try to preview it for printing.
The data continue in a new page with header and footer from table.
Is there a way to show the same in my web browser?
My html file is something like that...
<table border="1">
<thead>
<tr>
<th>Anz Bezeichnung</th><th>Preis</th>
</tr>
</thead>
<tbody>
<tr>
<td>orange</td>
<td>20</td>
</tr>
<tr>
<td>orange</td>
<td>20</td>
</tr>
<tr>
<td>all the datas like this</td>
<td>20</td>
</tr>
</tbody>
For that you can use datatable which has inbuilt fuction for print.Check out DataTable.
for A4 size you can modify paging option
I am using JQuery Tablesorter in different tables and it is working fine. Now I am trying to sort different way where one table contain table thead and another table contain table tbody. My table looks like -
<table id="tbl" class="tablesorter">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
</table>
<table id="tbl1">
<tbody>
<tr>
<td>21</td>
<td>abc</td>
<td>82</td>
</tr>
<tr>
<td>12</td>
<td>ttt</td>
<td>90</td>
</tr>
</tbody>
</table>
Can anyone help me how can I achieve this or this is not possible in Tablesorter.
Thanks
I have a problem with the fixed-columns extension of Bootstrap-Table. I'm trying to use a rowspan attribute to have a "3-rows-high" fixed column on the left, followed by a fixed column of 3 rows, but it seems that it doesn't work :
https://jsfiddle.net/Lx87aetc/4/
The goal is to do something with the following architecture :
<table>
<thead>
<tr>
<th></th>
...
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3"></td>
...
</tr>
<tr>...</tr>
<tr>...</tr>
</tbody>
</table>
Does anyone have an idea to solve my problem ?
Thank you,
Ed
The solution simply didn't exist, it was a bug, split into 2 bugs :
Firstly, Bootstrap-Table didn't handle correctly the rowspan / colspan management (some '-' are appended at the end of the rows). Wenzhixin has corrected this: https://github.com/wenzhixin/bootstrap-table/commit/468169cde5bdbf2178a9299d288622fe93777aaa
Secondly, the fixed-column extension didn't handly correctly this either, which lead to a "double" bug (some '-' + buggy fixed columns): I corrected the extension bug : https://github.com/wenzhixin/bootstrap-table-fixed-columns/pull/12
Now it's working : https://jsfiddle.net/wenyi/3v7h5erL/3/
It's solving simple situations like this one :
<table data-toggle="table" data-fixed-columns="true" data-fixed-number="3">
<thead>
<tr>
<th>Title</th>
<th>1</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Momentum</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
I'm trying to make the sorttable.js to read values from a custom tr attribute, which is "sort_value".
<table>
<thead>
<tr>
<th class="sort_string">Name</th>
<th class="sort_int">Age</th>
<th class="sort_int">Date of Birth</th>
</tr>
</thead>
<tbody>
<tr>
<td>Adam</td>
<td>22</td>
<td sort_value="19930403">April 3 1993</td>
</tr>
<tr>
<td>Matt</td>
<td>20</td>
<td sort_value="19950220">Feb 20 1995</td>
</tr>
<tr>
<td>Josh</td>
<td>25</td>
<td sort_value="19900730">July 30 1990</td>
</tr>
<tr>
<td>Kent</td>
<td>27</td>
<td sort_value="19880322">March 22 1988</td>
</tr>
</tbody>
</table>
Here's the jsfiddle: http://jsfiddle.net/zz4mugen/6/
Everything is perfect except the date of birth column. Please take a look at the .js of the jsfiddle. It's on the external resources column.
You're using custom attributes, but the name is not valid. Own attributes have to start with data-. See the official documentation: http://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
Below an interesting blog with explanation and examples about sorting different types of values in tables, such as numbers, texts, currencies and dates for different locales.
https://yoast.com/articles/sortable-table/#example
I have created a basic table in js fiddle. I am using the datatable sorter function, however if you click along the headers, or click a header, skip one and click another, it seems to ignore the first mouse-click. (To replicate the issue click on Confirmation Period, then ABN, then back to Confirmation Period)
Any thoughts?
<table id="tableSort" class="tableSort" cellspacing="0" style="margin-top:20px;margin-left:10px;">
<thead>
<tr>
<th>Confirmation Period</th>
<th>Legal/Entity Name</th>
<th>ABN</th>
<th>Business/Trading Name</th>
<th>Status</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>a</td>
<td>34</td>
<td>78</td>
<td>b</td>
</tr>
<tr>
<td>2</td>
<td>c</td>
<td>100</td>
<td>90</td>
<td>g</td>
</tr>
and the JS...
$(document).ready(function () {
$('#tableSort').dataTable({
"searching": false,
"paging": false,
"info": false
});
});
jsfiddle: http://jsfiddle.net/wcdg3ddL/
The table is actually sorting as expected. There are two reasons why it looks like the columns aren't sorting:
You have insufficient rows in your table to assess whether or not sorting is working. Add few more rows of data and you should see what I mean.
Because you've removed the arrows from the header row with your custom styling you cannot accurately gauge how the sorting is behaving. If you add in the default CSS styling you can see the direction in which a column is being sorted.
Here is a fiddle where I have added sufficient rows so that the columns appear to be sorting correctly.
I just added more rows to your fiddle:
<tr>
<td>1</td>
<td>a</td>
<td>34</td>
<td>78</td>
<td>b</td>
</tr>