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.
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'm trying to get better at JavaScript/jQuery, so I guess some basic table manipulation would nice to try out. However I can't seem to find a way to get started doing what I want to achieve.
Lets say e.g. I have two tables, and I want to compare data and generate a third table based on the data in the two first ones. Lets say it's about movies, and I have this list of users, and list of movies with a column of whom likes the movie. In the third on the fly generated table I want to collect these data and write out the movie with whom likes it.
users
<table id="table_1">
<tr>
<th>user ID</th>
<th>name</th>
<th>country</th>
</tr>
<tr><td>1</td>
<td>martin</td>a
<td>usa</td>
</tr>
<tr><td>2</td>
<td>james</td>
<td>france</td>
</tr>
</table>
movies
<table id="table_2">
<tr>
<th>movie id</th>
<th>name</th>
<th>users favorite (id)</th>
</tr>
<tr><td>2</td>
<td>the expendables</td>
<td>1</td>
</tr>
<tr><td>2</td>
<td>titanic</td>
<td>2, 1</td>
</tr>
</table>
results
<div id="table">
</div>
I have this fiddle: https://jsfiddle.net/fpeh6fna/
You could use jQuery each commands here, for example (just a section of the code you would want):
$('#table_1').children('tr').each(function() {
var row = [];
$(this).children('td').each(function() {
row.push($(this).text());
});
rows.push(row);
});
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>
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
I am building an editable table in jquery for fun.
Here is my table:
<table id="horiz-min" summary="Indices">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">ID</th>
<th scope="col">Description</th>
<th scope="col"></th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr onclick="show();" id="IDOL-FT">
<td class="editable" id="edit">Edit</td>
<td class="edit-field">454</td>
<td class="edit-field">TEXTTEXTTEXTTEXT</td>
<td class="editable">Details</td>
<td class="editable">Feeds</td>
<td class="editable">Fields</td>
</tr>
</tbody>
</table>
The first thing i would like to do is to make the ID and Descriptions editable by clicking on edit.
So in JQUERY, i am trying to do this to replace, these td's content with the content that is currently inside of them, in an editable text box.
Fixed: but what i have gives a console error of "$ is not defined"
jquery:
$('td.edit-field').replaceWith('<textbox></textbox>');
The "$ is not defined" sounds like you're not properly including jQuery in your HTML file. Make sure the following appears in the head section of your HTML file (adjust the version as appropriate)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
Additionally since you're using jQuery you should avoid the use of assigning handlers directly in your HTML and instead should use jQuery hookup. For example
$(document).ready(function() {
$('#IDOL-FT').click(function() {
show();
});
});
use the contenteditable attribute
<td class="editable" id="edit" contenteditable="true">Edit</td>
$('#edit').click(function() {
$('.editable').attr("contenteditable", "true");
})
Example