Develop Reference

Display sum of a column(as total) on a datatable and export to excel

I am exporting a datatable as excel file with 4 columns, out of that my column 3 contains product prices, now after the export, I should see an additional row at the end of the table with "Total" and contains the sum of column 3 values.
I thought of showing it on the datatable using footercallback and export the datatable directly, but as I am using multi filter in the footer section and can't create one more footer this idea didn't work.
Expectation: Show the sum of a column-3(filtered) on the html page near to datatable saying that when I export as excel it should contain the summation value at the end of the table rows.

You can do something like this:
var len=$("tr").length;
var sum=0;
for(var i=1;i<len;i++){
sum += parseFloat($("tr td").eq(2).html());
}
$("table").createElement("<tr><td></td><td></td><td>"+sum+"</td></tr>");

As I understood you need total of all prices for each product. You can have total as hidden column in datatable. When you do excel export it will show total. Here is sample html and javascript code. Hope this might help you.
HTML
<table class="table display" id="table2" >
<thead>
<tr>
<th>Product</th>
<th>Price </th>
<th>Tax</th>
<th>Shipping Charges</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<th>Product1</th>
<td>100</td>
<td>20</td>
<td>12</td>
<td>132</td>
</tr>
<tr>
<th>Product2</th>
<td>234</td>
<td>34</td>
<td>32</td>
<td>300</td>
</tr>
<tr>
<th>Product3</th>
<td>543</td>
<td>23</td>
<td>54</td>
<td>620</td>
</tr>
</tbody>
</table>
Javascript
$('#table2').dataTable({
dom: 'Bfrtip',
"columnDefs": [
{
"targets": [ 4 ],
"visible": false
}
],
buttons: [{
extend: 'excel',
filename : 'test',
}]
});

Get table cell value based on the first cell content

I have a page with multiple dynamic tables , one of the table looks like the below structure
Col1 Col2 Col3
1 One Two
2 b 15/12/2017
3 a X
2 W 10/12/2014
HTML
<table id="table1">
<tbody>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
<tr> <td>1</td>
<td>b</td>
<td>15/12/2017</td>
</tr>
<tr> <td>2</td>
<td>b</td>
<td>15/10/2017</td>
</tr>
<tr> <td>3</td>
<td>b</td>
<td>15/09/2017</td>
</tr>
</tbody>
</table>
I would like to know How can I get the cell in col3 with header name based on the value at col1?
EX:
I want to find the table by ID and check its first cell for each row, if it equal 2 then get the cell value of col 3 in the same row !
Any help would be fully appreciated

You can try something with jquery like below snippet.
Update: you can get particular column by table header as well using $('th:contains("col3")').index()
$(document).ready(function() {
$('#myTable').find('tbody td:first-child').each(function() {
if ($(this).text() == '2') {
console.log($(this).closest('tr').find('td').eq($('th:contains("col3")').index()).text());
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
<thead>
<th>col1</th>
<th>col2</th>
<th>col3</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>one</td>
<td>ONE</td>
</tr>
<tr>
<td>2</td>
<td>two</td>
<td>TWO</td>
</tr>
<tr>
<td>3</td>
<td>three</td>
<td>THREE</td>
</tr>
</tbody>
</table>

With jQuery it's quite easy; if you've found the cell, get the row, and the third cell in that row;
$('td') // Select all cells
.filter(function() { // Filter the cells
return $(this).text() == '2';
})
.closest('tr') // get the table row
.find('td') // select all cells in that row
.eq(2) // select the third cell (0-based index)
.text(); // this will output '15/12/2017'
edit I'm in a good mood today, check this little demo; https://jsfiddle.net/a32knb81/. Just input your search key in the input field an you'll get the value of the third column in that same row.

jquery- table column filter and row toggling together not working properly

I have created a table with column filter and a button "test" for toggling rows of that table
HTML
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.tablesorter.combined.js"></script>
<script src="js/widget-columnSelector.js"></script>
<script src="js/widget-sort2Hash.js"></script>
<div>
<input type="button" id="test" className="invalid" value="Hide">
<table id="testtable" class="tablesorter custom-popup">
<thead>
<tr>
<th class="filter-false">S.no</th>
<th class="filter-false">name</th>
<th class="filter-select" data-placeholder="Select All">Department</th>
<th class="filter-false">Age</th>
<th class="filter-false">Section</th>
</tr>
</thead>
<tbody>
<tr class="invalid">
<td>1</td>
<td>yyy</td>
<td>CSE</td>
<td>17</td>
<td>A</td>
<tr>
<tr>
<td>1</td>
<td>zzz</td>
<td>ECE</td>
<td>17</td>
<td>A</td>
<tr>
<tr class="invalid">
..
</tr>
...
</div>
JS
$(document).ready(function () {
$('#test').on('click', function () {
var name = $(this).attr('className');
if ($(this).val() == 'Hide' ) {
$('#testtable tr.' + name).hide();
$(this).val('Show');
} else{
$('#testtable tr.' + name).show();
$(this).val('Hide');
}
});
});
With the above JS code I can able to toggle rows which has class name "invalid".
But when I tried to add column filter in Department column, toggling is not working properly.
1.If I filter the column by selecting any option from dropdown and clicking hide button, The filtered row which has "invalid" is hiding properly..but if again i pressed show it showing all the "invalid" rows not only filtered.
2.If I filter the column by selecting any option and pressed hide,now rows are hided then if i select "select all", it is showing full table.
I dont even have any idea to solve above scenarios.
Please suggest me on this.

find child table selector from parent table - jQuery

I have a table structure like this. Fairly simple one.
<table id="myTable" class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
At runtime I am binding a new row to this table for a particular rowclick. This new row contains a new table.
Now on clicking the row again, I want to be able to remove the newly added row(the new table).
I am using bootstrap table.
Here is what I have tried so far.
$('#myTable').on('click-row.bs.table', function (e, row, $element) {
//if ($element.has('#newlyAddedTable').length) { ....// did not work
if ($('#myTable').has('#newlyAddedTable').length) { // this removes the table on any row click. Not what I intend to do
{
$("#newlyAddedTable").remove();
} else {
// some operation...
}
}
I want to be able to remove the newly added table on the row it was created.
Just more explanation based on the Answers below:
<tr> ----------> if i click this
<td>
<table id="newlyAddedTable"> ---------> this is added
</table>
</td>
</tr>
<tr> ----------> if i again click this or maybe any other row in the table
<td>
<table id="newlyAddedTable"> ---------> this is removed
</table>
</td>
</tr>

Update: from OP's comment below it sounds like the best way to implement the new table is to use a class selector and not an id selector. The code below has been updated accordingly. ***Where previously there was an id for newTable there is a class ---> #newTable ===> .newTable:
Just change:
$('#myTable').has('#newlyAddedTable').length
To:
$('.newlyAddedTable', $element).length //element === clicked row -- see demo
vvvvv DEMO vvvvv
$('#myTable').bootstrapTable().on('click-row.bs.table', function(e, row, $element) {
if( $('.newTable', $element).length ) {
$('.newTable', $element).remove();
} else {
$('td:first', $element)
.append( '<table class="newTable"><tr><td>NEW TABLE</td></tr></table>' );
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.7.0/bootstrap-table.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.7.0/bootstrap-table.min.css" rel="stylesheet"/>
<table id="myTable" class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>

Try replacing your remove code with this:
$(document).on("click", "#newlyAddedTable", function(){
$(this).remove();
});
The code above registers a click listener on the document. The second parameter filters those events for those with the target #newlyAddedTable. This way you don't have to register a new click handler every time you insert a row (as in #VimalanJayaGanesh's solution).
P.S. If you are adding HTML that looks like this:
<tr>
<td>
<table id="newlyAddedTable">
</table>
</td>
</tr>
Then you are probably actually wanting to remove the parent tr (not the table with the id). There are two ways to fix this.
You can change the selector that filters click events and so have the tr handle the click rather than the table element in my example code:
$(document).on("click", "tr:has(#newlyAddedTable)", function(){
You can leave the selector as is but grab the parent tr from the table and remove that changing the remove line above to:
$(this).parents("tr").first().remove()
or
$(this).parent().parent().remove()

As I don't have your complete code / fiddler, here is a possible solution.
Are you looking for something like this?
$('#add').on('click', function()
{
var newRow = '<tr CLASS="newrow"><td colspan="3"><table><tr><td>Test</td><td>User</td><td>test#example.com</td></table></td></tr>'
$('#myTableBody').append(newRow);
Remove()
});
function Remove()
{
$('.newrow').off('click').on('click', function()
{
$(this).remove();
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="myTable" class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody id="myTableBody">
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
<button type='button' id='add'>Add</button>
Note:
The following line indicates that,
$('.newrow').off('click').on('click', function()
the click event will be binded to the new row only once.
The reason for adding 'off('click') is, when you are dynamically adding rows (with common class 'newrow') to the table, the events will be binded several times. To avoid that, remove the previously binded click event and add a new one.

jQuery tablesorter sort by column id instead of column number

I have an HTML table that I'm sorting with jQuery tablesorter. I have an external link that sorts the table by name using JavaScript. Within that JavaScript function though, I have to say sort by column 0 instead of just saying sort by the name column.
How can I modify what I have below so I don't have to remember that name is column 0 in JavaScript?
$('document').ready(function(){
$('table#classes_table').tablesorter();
$("#sort-link").click(function() {
//How can I say something like sort by "Name" instead of having to remember name is column 0
var sorting = [[0,0]
$("table").trigger("sorton",[sorting]);
return false;
});
});
Sort by name<br><br>
<table class="tablesorter" id="classes_table">
<thead>
<tr>
<th>Name</th>
<th>School</th>
<th>Students</th>
</tr>
</thead>
<tbody>
<tr>
<td>Class1</td>
<td>School5 </td>
<td>32</td>
</tr>
<tr>
<td>Class2</td>
<td>School1</td>
<td>7</td>
</tr>
</tbody>
</table>

You could use a hack...
var columnIndex = $('table > thead > tr > th:contains("Name")').index();