Rowspan with Bootstrap-table-fixed-columns extension - javascript

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>

Related

Multiple table sorting using Tablesorter JQuery

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

HTML cell DOM get attribute value - sort table.js

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

JQuery Table Sort issue - Skipping column disables first mouse click

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>

How do I find a the value of a td in a specific tr

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

Why is the colspan not working properly in this script? js bug or IE?

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.

Categories

Resources