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
Related
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 am have a rails app that I am writing cucumber test for. I am trying to get a number out of specific row so I can assert against it. I have a table that looks like this:
<table class="table table-striped" id="kids">
<thead>
<tr>
<th>Name</th>
<th>Balance</th>
<th></th>
</tr>
</thead>
<tbody>
<tr data-link="/kids/2">
<td>Jason</td>
<td>
<span>$</span>
<span class="money">1.00</span>
</td>
</tr>
<tr data-link="/kids/3">
<td>Neely</td>
<td>
<span>$</span>
<span class="money">0.50</span>
</td>
</tr>
</tbody>
</table>
I need to select a td that has a specific name, and then get the balance from the span in the following td. I am sure there is a way to do this with Xpath, but I cannot figure it out. Any help would be great.
You asked for XPath so here it is:
//td[preceding-sibling::td[text()='Neely']]/span[#class='money']
Note that XPathes aren't very readable and it may be better to use Capybara's ruby methods instead:
tr = find('tr', text: 'Neely')
tr.find('.money').text
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.)
This question is related to this question I asked a little while back. The updated code is posted here. This to note is that i am looking to create a HTML table dynamically that looks similar to this:
<table>
<tbody>
<tr>
<td colspan="3" align="right">Header</td>
</tr>
<tr>
<td colspan="3" align="right">Header</td>
</tr>
<tr>
<td colspan="3" align="right">Header</td>
</tr>
<tr>
<td>Col1</td>
<td>Col3</td>
<td>Col4</td>
</tr>
<tr>
<td>Col1</td>
<td>Col3</td>
<td>Col4</td>
</tr>
</tbody>
</table>
I can get this done in markup but when I do it in js the colspan does not seem to work in IE7. Any hep will be greatly appreciated.
http://www.w3schools.com/jsref/prop_tabledata_colspan.asp
The colSpan javascript property has a capital S.