Develop Reference

Rowspan with Bootstrap-table-fixed-columns extension

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>

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>

Adding Column to jQuery Datatables

I want to add a column to a jQuery Datatable. It will be used to contain a delete button for each row, like I have for another table. The button picture and class are specific in the php file that retrieves the table data from a database.
Simply adding a column to the html as the following breaks the javascript on the page:
<th>New Column</th>
I do not see anything in the aoColumnDefs settings that does anything to the added column. What code and where do I need to add or edit to accommodate the new column?
I am not the original developer behind the existing tables.

You can add one or more th from here like Revenue2
<table class="mws-table">
<thead>
<tr>
<th>Date</th>
<th>Transaction ID</th>
<th>Segment</th>
<th>Revenue</th>
</tr>
</thead>
<tbody id="transactions">
<tr>
<td class="trDate"></td>
<td class="transactionId"></td>
<td class="segment"></td>
<td class="revenue"></td>
</tr>
</tbody>
<tfoot>
<tr class="customFooterRow">
<th>Total</th>
<th></th>
<th></th>
<th align ="left" class="revenueTotal"></th>
</tr>
</tfoot>
</table>

You might have forgotten to add the column for the body as well and in cases where you have a "tfoot" you will need to add another column to it as well.

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