Datatable sorting is not working - javascript

Im trying to sorting the asc,desc in datatable. But i dont know where im going wrong ? Can somebody suggest me where was the issue in below code ?
Js Bin
Javascript
$(document).ready( function () {
var table = $('#example').DataTable({
'aoColumnDefs': [{
'bSortable': false,
'aTargets': -1
}]
});
});


Here is a full html doc that works
<!DOCTYPE html>
<html>
<head>
<link href="//datatables.net/download/build/nightly/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<meta charset=utf-8 />
<title>DataTables - JS Bin</title>
<script>
$(document).ready( function () {
/**/
// By index
$('#example').DataTable();
});
</script>
</head>
<body>
<div class="container">
<table id="example" class="display" width="100%">
<thead>
<tr>
<td>Name</td>
<td>Position</td>
<td>Office</td>
<td>Age</td>
<td>Start date</td>
<td class="nosort">Salary</td>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td>Ad</td>
<td>Administrator</td>
<td>07/06/2016 11:41:49</td>
<td class="sorting_1">0</td>
<td>28605</td>
<td>View | Edit | <a onclick="deletequeue('Ad','queue_dashboard_ajx.php?action=delete&bucket=28605')" href="javascript:void(0);">Delete</a> </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr role="row" class="even">
<td>wkfs</td>
<td>karthik</td>
<td>02/11/2016 06:39:39</td>
<td class="sorting_1">0</td>
<td>28402</td>
<td>View | Edit | <a onclick="deletequeue('wkfs','queue_dashboard_ajx.php?action=delete&bucket=28402')" href="javascript:void(0);">Delete</a> </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr role="row" class="odd">
<td>viswas test bucket</td>
<td>Administrator</td>
<td>07/01/2016 12:34:41</td>
<td class="sorting_1">0</td>
<td>28576</td>
<td>View | Edit | <a onclick="deletequeue('viswas test bucket','queue_dashboard_ajx.php?action=delete&bucket=28576')" href="javascript:void(0);">Delete</a> </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr role="row" class="even">
<td>testallticket</td>
<td>Administrator</td>
<td>07/15/2016 08:04:32</td>
<td class="sorting_1">0</td>
<td>28661</td>
<td>View | Edit | <a onclick="deletequeue('testallticket','queue_dashboard_ajx.php?action=delete&bucket=28661')" href="javascript:void(0);">Delete</a> </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr role="row" class="odd">
<td>test_search</td>
<td>Administrator</td>
<td>07/29/2016 06:48:42</td>
<td class="sorting_1">0</td>
<td>28682</td>
<td>View | Edit | <a onclick="deletequeue('test_search','queue_dashboard_ajx.php?action=delete&bucket=28682')" href="javascript:void(0);">Delete</a> </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr role="row" class="even">
<td>test_armed_IR_update</td>
<td>Administrator</td>
<td>08/17/2016 06:44:39</td>
<td class="sorting_1">0</td>
<td>28721</td>
<td>View | Edit | <a onclick="deletequeue('test_armed_IR_update','queue_dashboard_ajx.php?action=delete&bucket=28721')" href="javascript:void(0);">Delete</a> </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr role="row" class="odd">
<td>test_anand_sr_and_cr</td>
<td>Administrator</td>
<td>07/29/2016 06:29:13</td>
<td class="sorting_1">0</td>
<td>28680</td>
<td>View | Edit | <a onclick="deletequeue('test_anand_sr_and_cr','queue_dashboard_ajx.php?action=delete&bucket=28680')" href="javascript:void(0);">Delete</a> </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr role="row" class="even">
<td>test_anand</td>
<td>Administrator</td>
<td>07/14/2016 07:32:24</td>
<td class="sorting_1">0</td>
<td>28660</td>
<td>View | Edit | <a onclick="deletequeue('test_anand','queue_dashboard_ajx.php?action=delete&bucket=28660')" href="javascript:void(0);">Delete</a> </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr role="row" class="odd">
<td>test date filter</td>
<td>Administrator</td>
<td>07/06/2016 11:34:24</td>
<td class="sorting_1">0</td>
<td>28604</td>
<td>View | Edit | <a onclick="deletequeue('test date filter','queue_dashboard_ajx.php?action=delete&bucket=28604')" href="javascript:void(0);">Delete</a> </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr role="row" class="even">
<td>test 1550</td>
<td>Administrator</td>
<td>08/17/2016 08:56:26</td>
<td class="sorting_1">0</td>
<td>28722</td>
<td>View | Edit | <a onclick="deletequeue('test 1550','queue_dashboard_ajx.php?action=delete&bucket=28722')" href="javascript:void(0);">Delete</a> </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr role="row" class="odd">
<td>test 1</td>
<td>Administrator</td>
<td>06/17/2016 03:35:05</td>
<td class="sorting_1">0</td>
<td>28541</td>
<td>View | Edit | <a onclick="deletequeue('test 1','queue_dashboard_ajx.php?action=delete&bucket=28541')" href="javascript:void(0);">Delete</a> </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr role="row" class="even">
<td>test</td>
<td>Administrator</td>
<td>06/13/2016 11:30:45</td>
<td class="sorting_1">0</td>
<td>28521</td>
<td>View | Edit | <a onclick="deletequeue('test','queue_dashboard_ajx.php?action=delete&bucket=28521')" href="javascript:void(0);">Delete</a> </td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>


You need to give index of the column on which you want to add sorting in order option of data table like this
$('#example').DataTable( {
"order": [[ 0, "asc" ]]
} );
Here is working js bin.
http://live.datatables.net/aqoxob/371/

Related

how can i collapse all table rows

i have table rows inside a table, and also another nested table rows inside each row, my problem is i can collapse and expand in the nested table rows, but when i try to expand in the main table, only the first row is expanded the rest ones are expanded by default when i launch the program, how can i fix it.
this is my code
tbody.collapse.in {
display: table-row-group;
}
.tigray {
background-color: darkcyan;
}
.zoba {
background-color: forestgreen;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table class="table table-bordered table-sm ">
<thead class="thead-dark">
<tr>
<th></th>
<th>head1</th>
<th>head2</th>
</tr>
</thead>
<tbody>
<tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-1" aria-expanded="false" aria-controls="group-of-rows-1">
<td class="tigray">title1</td>
<td class="tigray">35</td>
<td class="tigray">35</td>
</tr>
</tbody>
<tbody id="group-of-rows-1" class="collapse">
<tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-2" aria-expanded="false" aria-controls="group-of-rows-2">
<td class="zoba">nested 1</td>
<td class="zoba">29</td>
<td class="zoba">29</td>
<tbody id="group-of-rows-2" class="collapse">
<tr class="table-warning">
<td>nested title1</td>
<td>13</td>
<td>13</td>
</tr>
<tr class="table-warning">
<td>nested title2</td>
<td>18</td>
<td>13</td>
</tr>
<tr class="table-warning">
<td>nested title 3</td>
<td>32</td>
<td>13</td>
</tr>
</tbody>
</tr>
<tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-3" aria-expanded="false" aria-controls="group-of-rows-3">
<td class="zoba">nested 2</td>
<td class="zoba">29</td>
<td class="zoba">29</td>
<tbody id="group-of-rows-3" class="collapse">
<tr class="table-warning">
<td>nested title4</td>
<td>13</td>
<td>13</td>
</tr>
<tr class="table-warning">
<td>nested title5</td>
<td>18</td>
<td>13</td>
</tr>
<tr class="table-warning">
<td>nested title 6</td>
<td>32</td>
<td>13</td>
</tr>
</tbody>
</tr>
</tbody>
</table>

You can not use tbody inside another tbody
it is not legal HTML.
Follow this code ↓↓
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table class="table table-bordered table-sm ">
<thead class="thead-dark">
<tr>
<th></th>
<th>head1</th>
<th>head2</th>
</tr>
</thead>
<tbody>
<tr class="clickable" data-toggle="collapse" data-target=".group-of-rows-1" aria-expanded="false" aria-controls="group-of-rows-1">
<td class="tigray">title1</td>
<td class="tigray">35</td>
<td class="tigray">35</td>
</tr>
</tbody>
<tbody id="" class="collapse group-of-rows-1">
<tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-2" aria-expanded="false" aria-controls="group-of-rows-2">
<td class="zoba">nested 1</td>
<td class="zoba">29</td>
<td class="zoba">29</td>
</tr>
</tbody>
<tbody id="group-of-rows-2" class="collapse">
<tr class="table-warning">
<td>nested title1</td>
<td>13</td>
<td>13</td>
</tr>
<tr class="table-warning">
<td>nested title2</td>
<td>18</td>
<td>13</td>
</tr>
<tr class="table-warning">
<td>nested title 3</td>
<td>32</td>
<td>13</td>
</tr>
</tbody>
<tbody id="" class="collapse group-of-rows-1">
<tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-3" aria-expanded="false" aria-controls="group-of-rows-3">
<td class="zoba">nested 2</td>
<td class="zoba">29</td>
<td class="zoba">29</td>
</tr>
</tbody>
<tbody id="group-of-rows-3" class="collapse">
<tr class="table-warning">
<td>nested title4</td>
<td>13</td>
<td>13</td>
</tr>
<tr class="table-warning">
<td>nested title5</td>
<td>18</td>
<td>13</td>
</tr>
<tr class="table-warning">
<td>nested title 6</td>
<td>32</td>
<td>13</td>
</tr>
</tbody>
</table>
However, you are allowed to have multiple TBODY elements in a single TABLE element, so you could do this:
<table>
<tbody>
<tr>
<td>...</td>
<td>...</td>
</tr>
</tbody>
<tbody >
<tr>
<td>...</td>
<td>...</td>
</tr>
</tbody>
<tbody>
<tr>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>

Javascript function executed before previous function is done

I have a webpage that contains a couple of tables.
At the beginning it checks the language and sets the corresponding translations.
At the end of the html file (after all the elements are loaded) the translations are set using javascript.
After that variables are requested via wifi.
This is what I see when I load the page.
The elements that don't need translation are shown before set_language_for_raw_data_() is executed.
I have checked Chrome's developer tools and saw this.
It shows that set_language_for_raw_data_() is executed before Raw_Data_Requests(), but it does not show until Raw_Data_Requests() is done.
Is there a way to show the translations before Raw_Data_Requests() is executed?
Raw_data.html:
<!DOCTYPE HTML>
<html>
<head>
<script>
checkLanguage(); //load language setting or use system default
</script>
</head>
<body>
<div id="site_unresponsive">
<div id="inhalt">
<h2 class="middle white_font expander" onclick="expander('raw_data')" id="raw_data_title"></h2>
<ul class="hidden" id="raw_data">
<table cellspacing="0" id="actual_meas">
<tr>
<td id="loading" style="display:none">Error: Connection lost</td>
</tr>
<tr class="odd">
<td></td>
<td id="Meas(0)">..</td>
</tr>
<tr>
<td></td>
<td id="Meas(1)">..</td>
</tr>
<tr class="odd">
<td>Ubat</td>
<td id="Meas(2)">..</td>
</tr>
<tr>
<td>Ibat</td>
<td id="Meas(5)">..</td>
</tr>
<tr class="odd">
<td>U PWM</td>
<td id="Meas(9)">..</td>
</tr>
<tr>
<td style="color:darkorange">LED</td>
<td id="Meas(11)">•</td>
</tr>
<tr class="odd">
<td style="color:green">LED</td>
<td id="Meas(12)">•</td>
</tr>
<tr>
<td></td>
<td id="Meas(19)">..</td>
</tr>
<tr class="odd">
<td></td>
<td id="Meas(20)">..</td>
</tr>
<tr>
<td></td>
<td id="Meas(100)">..</td>
</tr>
</table>
</ul>
<h2 class="middle white_font expander" onclick="expander('version')" id="version_title"></h2>
<div class="hidden" id="version">
<table cellspacing="0" class="data_tab" id="version_details">
<tr>
<th></th>
</tr>
<tr class="odd">
<td id="device_version">~DeviceVersion~</td>
</tr>
</table>
</div>
<h2 class="middle white_font expander" onclick="expander('cumulatives')" id="cumulatives_title"></h2>
<ul class="hidden" id="cumulatives">
<li class="w300">
<table cellspacing="0" id="cuml">
<tr class="odd">
<td></td>
<td>~Cumulatives(0)~</td>
</tr>
<tr>
<td></td>
<td>~Cumulatives(1)~</td>
</tr>
<tr class="odd">
<td></td>
<td>~Cumulatives(2)~</td>
</tr>
<tr>
<td></td>
<td>~Cumulatives(3)~</td>
</tr>
<tr class="odd">
<td></td>
<td>~Cumulatives(4)~</td>
</tr>
<tr>
<td></td>
<td>~Cumulatives(5)~</td>
</tr>
<tr class="odd">
<td></td>
<td>~Cumulatives(6)~</td>
</tr>
<tr>
<td></td>
<td>~Cumulatives(7)~</td>
</tr>
<tr class="odd">
<td></td>
<td>~Cumulatives(8)~</td>
</tr>
<tr>
<td></td>
<td style="white-space:nowrap;">~Cumulatives(14)~</td>
</tr>
</table>
</li>
</ul>
<h2 class="middle white_font expander" onclick="expander('error')" id="error_title"></h2>
<div class="hidden" id="error" style="overflow-x:scroll;overflow-y:hidden;white-space:nowrap;">
<table cellspacing="0" class="data_tab" id="error_history">
<tr>
<th>Nr</th>
<th></th>
<th></th>
<th></th>
<th>U</th>
<th>I</th>
<th>PWM</th>
<th>T</th>
</tr>
<tr class="odd">
<td>1</td>
<td>~ErrorHistory(0,2,0)~</td>
<td>~ErrorHistory(0,3,0)~</td>
<td>~ErrorHistory(0,4,0)~</td>
<td>~ErrorHistory(0,5,0)~</td>
<td>~ErrorHistory(0,6,0)~</td>
<td>~ErrorHistory(0,7,0)~</td>
<td>~ErrorHistory(0,8,0)~</td>
</tr>
<tr>
<td>2</td>
<td>~ErrorHistory(1,2,0)~</td>
<td>~ErrorHistory(1,3,0)~</td>
<td>~ErrorHistory(1,4,0)~</td>
<td>~ErrorHistory(1,5,0)~</td>
<td>~ErrorHistory(1,6,0)~</td>
<td>~ErrorHistory(1,7,0)~</td>
<td>~ErrorHistory(1,8,0)~</td>
</tr>
<tr class="odd">
<td>3</td>
<td>~ErrorHistory(2,2,0)~</td>
<td>~ErrorHistory(2,3,0)~</td>
<td>~ErrorHistory(2,4,0)~</td>
<td>~ErrorHistory(2,5,0)~</td>
<td>~ErrorHistory(2,6,0)~</td>
<td>~ErrorHistory(2,7,0)~</td>
<td>~ErrorHistory(2,8,0)~</td>
</tr>
<tr>
<td>4</td>
<td>~ErrorHistory(3,2,0)~</td>
<td>~ErrorHistory(3,3,0)~</td>
<td>~ErrorHistory(3,4,0)~</td>
<td>~ErrorHistory(3,5,0)~</td>
<td>~ErrorHistory(3,6,0)~</td>
<td>~ErrorHistory(3,7,0)~</td>
<td>~ErrorHistory(3,8,0)~</td>
</tr>
<tr class="odd">
<td>5</td>
<td>~ErrorHistory(4,2,0)~</td>
<td>~ErrorHistory(4,3,0)~</td>
<td>~ErrorHistory(4,4,0)~</td>
<td>~ErrorHistory(4,5,0)~</td>
<td>~ErrorHistory(4,6,0)~</td>
<td>~ErrorHistory(4,7,0)~</td>
<td>~ErrorHistory(4,8,0)~</td>
</tr>
<tr>
<td>6</td>
<td>~ErrorHistory(5,2,0)~</td>
<td>~ErrorHistory(5,3,0)~</td>
<td>~ErrorHistory(5,4,0)~</td>
<td>~ErrorHistory(5,5,0)~</td>
<td>~ErrorHistory(5,6,0)~</td>
<td>~ErrorHistory(5,7,0)~</td>
<td>~ErrorHistory(5,8,0)~</td>
</tr>
<tr class="odd">
<td>7</td>
<td>~ErrorHistory(6,2,0)~</td>
<td>~ErrorHistory(6,3,0)~</td>
<td>~ErrorHistory(6,4,0)~</td>
<td>~ErrorHistory(6,5,0)~</td>
<td>~ErrorHistory(6,6,0)~</td>
<td>~ErrorHistory(6,7,0)~</td>
<td>~ErrorHistory(6,8,0)~</td>
</tr>
<tr>
<td>8</td>
<td>~ErrorHistory(7,2,0)~</td>
<td>~ErrorHistory(7,3,0)~</td>
<td>~ErrorHistory(7,4,0)~</td>
<td>~ErrorHistory(7,5,0)~</td>
<td>~ErrorHistory(7,6,0)~</td>
<td>~ErrorHistory(7,7,0)~</td>
<td>~ErrorHistory(7,8,0)~</td>
</tr>
<tr class="odd">
<td>9</td>
<td>~ErrorHistory(8,2,0)~</td>
<td>~ErrorHistory(8,3,0)~</td>
<td>~ErrorHistory(8,4,0)~</td>
<td>~ErrorHistory(8,5,0)~</td>
<td>~ErrorHistory(8,6,0)~</td>
<td>~ErrorHistory(8,7,0)~</td>
<td>~ErrorHistory(8,8,0)~</td>
</tr>
<tr>
<td>10</td>
<td>~ErrorHistory(9,2,0)~</td>
<td>~ErrorHistory(9,3,0)~</td>
<td>~ErrorHistory(9,4,0)~</td>
<td>~ErrorHistory(9,5,0)~</td>
<td>~ErrorHistory(9,6,0)~</td>
<td>~ErrorHistory(9,7,0)~</td>
<td>~ErrorHistory(9,8,0)~</td>
</tr>
</table>
</div>
<h2 class="middle white_font expander" onclick="expander('cycle')" id="cycle_title"></h2>
<div class="hidden" id="cycle" style="overflow-x:scroll;overflow-y:hidden;white-space:nowrap;">
<table cellspacing="0" class="data_tab" id="cycle_history" style="layout:fixed">
<tr>
<th>Nr</th>
<th>Ah</th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tbody id="extended_cycles">
</tbody>
</table>
</div>
<h2 class="middle white_font expander" onclick="expander('error_tab')" id="error_tab_title">EEPROM data</h2>
<div class="hidden" id="error_tab" style="overflow-x:scroll;overflow-y:hidden;white-space:nowrap;">
<table cellspacing="0" class="data_tab" id="eeprom_data">
<tr>
<td>00: ~EEPROM(0)~</td>
</tr>
<tr>
<td>10: ~EEPROM(1)~</td>
</tr>
<tr>
<td>20: ~EEPROM(2)~</td>
</tr>
<tr>
<td>30: ~EEPROM(3)~</td>
</tr>
<tr>
<td>40: ~EEPROM(4)~</td>
</tr>
<tr>
<td>50: ~EEPROM(5)~</td>
</tr>
<tr>
<td>60: ~EEPROM(6)~</td>
</tr>
<tr>
<td>70: ~EEPROM(7)~</td>
</tr>
<tr>
<td>80: ~EEPROM(8)~</td>
</tr>
<tr>
<td>90: ~EEPROM(9)~</td>
</tr>
<tr>
<td>A0: ~EEPROM(10)~</td>
</tr>
<tr>
<td>B0: ~EEPROM(11)~</td>
</tr>
<tr>
<td>C0: ~EEPROM(12)~</td>
</tr>
<tr>
<td>D0: ~EEPROM(13)~</td>
</tr>
<tr>
<td>E0: ~EEPROM(14)~</td>
</tr>
<tr>
<td>F0: ~EEPROM(15)~</td>
</tr>
</table>
</div>
<br>
</div>
<script>
set_language_for_raw_data_();
Raw_Data_Requests();
</script>
</div>
</body>
</html>
set_language_for_raw_data_():
document.getElementById("menu_title").innerHTML = d12;
document.getElementById("raw_data_title").innerHTML = t5;
document.getElementById("version_title").innerHTML = t7;
document.getElementById("cumulatives_title").innerHTML = t8;
document.getElementById("error_title").innerHTML = t9;
document.getElementById("cycle_title").innerHTML = t11;
checkLanguage():
language = getCookie("language");
if (language == "")
applySystemLanguage();
setTranslations(language);
setTranslations(language):
switch (language){
default:
case "en":
d12="Show RAW data";
t5="Real time measurements";
t7="Version";
t8="Cumulatives";
t9="Error history";
t11="Cycle history";
break;
}

With rxjs you can do someting like
set_language_for_raw_data_(){
//Your code
return Observable.of(language );
}
set_language_for_raw_data_().subscribe(() => Raw_Data_Requests());
Here, you wait until the set_language_for_raw_data_ returns an observable. You can then subscribe on it. From the moment the observable is completed, it will call the next function.
The complete explanation you can find on http://reactivex.io/, But take some time and check how Observables are working

What I did to make the translations show was add a timeout:
set_language_for_raw_data_();
setTimeout(function(){
Raw_Data_Requests();
}, 20);
Apparently this was enough time for the html to be shown/updated.

Fixed slideToggle in table row inside another slideToggle (Jquery)

I have a problem when I try to use slideToggle inside another slideToggle in a table row with jQuery.
It works, but when I close the child slideToggle, it starts to appear in a parent slideToggle.
Here's an example to understand.
Open the first slideToggle
Close the 3 slideToggle that just appear
Close the first slideToggle
And look: The 3 closed slideToggles appear here?
I really need your help...!
Code from example here:
$(document).ready(function() {
$('.header1').nextUntil('.header1').slideToggle(100, function(){
});
$('.rowClic1').click(function(){
$(this).parent().nextUntil('tr.header1').slideToggle(100, function(){
});
});
$('.rowClic2').click(function(){
$(this).parent().nextUntil('tr.header2').slideToggle(100, function(){
});
});
});
.tH {
background-color : #fbc112;
}
.tB {
background-color : #976eb3;
}
.tC {
background-color : #c7d6de;
}
.tD {
background-color : #96a4ac;
}
.rowClic1, .rowClic2 {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr class="tH">
<th>HEAD A</th>
<th>HEAD B</th>
</tr>
</thead>
<tbody>
<!-- 1 -->
<tr class="tB header1">
<td class=" rowClic1">Clic here to open first Row </td>
<td></td>
</tr>
<!-- 1.1 -->
<tr class="tD header2">
<td class="rowClic2">Clic here to close/open second Row </td>
<td></td>
</tr>
<tr class="tD">
<td></td>
<td>stay open in header1 when header2 is close :( </td>
</tr>
<!-- 1.2 -->
<tr class="tC header2">
<td class="rowClic2"> Clic here to close/open second Row </td>
<td></td>
</tr>
<tr class="tC">
<td></td>
<td>stay open in header1 when header2 is close :( </td>
</tr>
<!-- 1.3 -->
<tr class="tD header2">
<td class="rowClic2">CClic here to close/open second Row </td>
<td></td>
</tr>
<tr class="tD">
<td></td>
<td>stay open in header1 when header2 is close :( </td>
</tr>
</tbody>
</table>

Just make sure that after you .slideToggle() the parent, .hide() all of the children in the callback of the parent .slideToggle():
$(document).ready(function() {
$('.header1').nextUntil('.header1').slideToggle(100);
$('.rowClic1').click(function(){
//This is what we're going to toggle:
var togglable = $(this).parent().nextUntil('tr.header1');
//Toggle togglable:
togglable.slideToggle(100, function() {
//Close all of the child slideToggles after toggling the parent:
$(".rowClic2").each(function() {
$(this).parent().nextUntil('tr.header2').hide();
});
});
});
$('.rowClic2').click(function(){
$(this).parent().nextUntil('tr.header2').slideToggle(100);
});
});
.tH {
background-color : #fbc112;
}
.tB {
background-color : #976eb3;
}
.tC {
background-color : #c7d6de;
}
.tD {
background-color : #96a4ac;
}
.rowClic1, .rowClic2 {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr class="tH">
<th>HEAD A</th>
<th>HEAD B</th>
</tr>
</thead>
<tbody>
<!-- 1 -->
<tr class="tB header1">
<td class=" rowClic1">Clic here to open first Row </td>
<td></td>
</tr>
<!-- 1.1 -->
<tr class="tD header2">
<td class="rowClic2">Clic here to close/open second Row </td>
<td></td>
</tr>
<tr class="tD">
<td></td>
<td>stay open in header1 when header2 is close :( </td>
</tr>
<!-- 1.2 -->
<tr class="tC header2">
<td class="rowClic2"> Clic here to close/open second Row </td>
<td></td>
</tr>
<tr class="tC">
<td></td>
<td>stay open in header1 when header2 is close :( </td>
</tr>
<!-- 1.3 -->
<tr class="tD header2">
<td class="rowClic2">CClic here to close/open second Row </td>
<td></td>
</tr>
<tr class="tD">
<td></td>
<td>stay open in header1 when header2 is close :( </td>
</tr>
</tbody>
</table>

So after a big help from Noble Mushtak, I found the solution.
SOLUTION:
It was just my selector. It was wrong because when I toggle parents, they also toggle children and vice versa : $(this).parent().nextUntil(...
So I made multiple <tbody>s in my table. Parent toggle the <tbody>s and children continue to toggles rows.
Sorry about my English and the fixed code is here.
Thanks again for your time, Noble Mushtak!!
The code:
$(document).ready(function() {
/* Close all toggle */
$('.header2').nextUntil('.header2').slideToggle(100);
$('.bdBody').slideToggle(100);
$('.rowClic1').click(function(){
$(this).parent().parent().next('.bdBody').slideToggle(100);
});
$('.rowClic2').click(function(){
$(this).parent().nextUntil('tr.header2').slideToggle(100);
});
});
.tH {
background-color : #fbc112;
}
.tB {
background-color : #976eb3;
}
.tC {
background-color : #c7d6de;
}
.tD {
background-color : #96a4ac;
}
.rowClic1, .rowClic2 {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr class="tH">
<th>HEAD A</th>
<th>HEAD B</th>
</tr>
</thead>
<tbody>
<!-- 1 -->
<tr class="tB header1">
<td class=" rowClic1">Clic here to close/open first Row</td>
<td></td>
</tr>
</tbody>
<tbody class="bdBody">
<!-- 1.1 -->
<tr class="tD header2">
<td class="rowClic2">Clic here to open children Row </td>
<td></td>
</tr>
<tr class="tD">
<td></td>
<td>data</td>
</tr>
<tr class="tC">
<td></td>
<td>data</td>
</tr>
<tr class="tC">
<td></td>
<td>data</td>
</tr>
<!-- 1.2 -->
<tr class="tC header2">
<td class="rowClic2"> Clic here to open children Row</td>
<td></td>
</tr>
<tr class="tC">
<td></td>
<td>data</td>
</tr>
<!-- 1.3 -->
<tr class="tD header2">
<td class="rowClic2">Clic here to open children Row</td>
<td></td>
</tr>
<tr class="tD">
<td></td>
<td>data</td>
</tr>
<tr class="tC">
<td></td>
<td>data</td>
</tr>
</tbody>
<tbody>
<!-- 2 -->
<tr class="tB header1">
<td class=" rowClic1">Clic here to open first Row </td>
<td></td>
</tr>
</tbody>
<tbody class="bdBody">
<!-- 2.1 -->
<tr class="tD header2">
<td class="rowClic2">Clic here to open children Row</td>
<td></td>
</tr>
<tr class="tD">
<td></td>
<td>data</td>
</tr>
<!-- 2.2 -->
<tr class="tC header2">
<td class="rowClic2">Clic here to open children Row</td>
<td></td>
</tr>
<tr class="tC">
<td></td>
<td>data</td>
</tr>
<tr class="tC">
<td></td>
<td>data</td>
</tr>
<tr class="tC">
<td></td>
<td>data</td>
</tr>
<!-- 2.3 -->
<tr class="tD header2">
<td class="rowClic2">Clic here to open children Row</td>
<td></td>
</tr>
<tr class="tD">
<td></td>
<td>data</td>
</tr>
<tr class="tC">
<td></td>
<td>data</td>
</tr>
<tr class="tC">
<td></td>
<td>data</td>
</tr>
<tr class="tC">
<td></td>
<td>data</td>
</tr>
</tbody>
</table>

Generating PDF from complex html table using JSPDF

I am trying to generate pdf from html using JSPDF and html having one complex table, Added image below.
You can see in this Fiddle, What i tried so far.
pdf.fromHTML(
source, // HTML string or DOM elem ref.
margins.left, // x coord
margins.top, { // y coord
'width': margins.width, // max width of content on PDF
'elementHandlers': specialElementHandlers
},
function (dispose) {
// dispose: object with X, Y of the last line add to the PDF
// this allow the insertion of new lines after html
pdf.save('Test.pdf');
}, margins);
Problem is, when i try to generate pdf i am getting
Uncaught TypeError: Cannot read property 'name' of undefined
Is it possible to use JSPDF for this kind of complex table or will it only work for a simple table.
EDIT:
Solved this by different way, This is what i did
I converted HTML Table into Canvas html2canvas.js
You can get canvas as Base64 image using canvas.toDataURL("image/jpeg")
Once i got Base64 image, Created empty PDF using JSPDF and using addImage feature of JSPDF, i manage to embed Base64 image inside PDF.
If you need charts and images as part of PDF -> charts and images as part of PDF
Credit goes to my brain.

I was able to fix this by modifying line 6203 of jspdf.debug.js (on version 1.2.61) to this:
while (j < tableRow.cells.length && headers[j] != undefined) {
Which was originally:
while (j < tableRow.cells.length) {
Alternatively, I could make it go away by adding another td to the tr it was processing (it only had one td, which apparently caused the problem).
I'm thinking I'll try to submit it as a bug fix.

Checkout the pdfmake Playground (It is supposed to work in the browser and is MIT-licensed.)
Select TABLES in the top menu of the Playground.
Scroll down the example pdf, there is a section illustrating Colspan-capabilities.

I stepped through the code using the chrome debugger, and it looks like jspdf is is having an issue with colspan in the first row of the table.
It seems like a bug in their library, where you can't use col span in the header or first row of each table.

Remove All the colspan Attribute And Rowspan Attribute From td Tag And Apply blank td then try.
Its Working and Generate Pdf (for checking put this code in your file)
<div id="inspectionReport">
<div class="title">
<p class="appname">Title</p>
<p>REPORT</p>
</div>
<p class="date">Revised on 9/3/2013</p>
<p style="float:right;">
<button onclick="javascript:demoFromHTML();">Generate Pdf</button>
</p>
<table style="width:100%">
<tbody>
<tr>
<td>A No : <span id="a">1</span>
</td>
<td>B / No : <span id="b">2</span>
</td>
<td>C Date: <span id="c"></span>
</td>
</tr>
<tr>
<td>A No : <span id="d">3</span>
</td>
<td>B name: <span id="e">4</span>
</td>
<td>
<p>C [ X ] D [ ]</p>
<p>G Date : <span id="f"></span>
</p>
</td>
</tr>
<tr>
<td>O No : <span id="yy"></span>
</td>
<td>Orgin : <span id="yyr"></span>
</td>
<td>S : [ X ] G [ ] J [ X ] Y [ X ] G</td>
</tr>
<tr>
<td></td>
<td>Name : <span id="QW"></span>
</td>
<td>xc : <span id="FG"></span>
</td>
</tr>
<tr>
<td>No : <span id="gg"></span>
</td>
<td>company : <span id="gg"></span>
</td>
<td>type t [ ] A [ X ] No</td>
</tr>
<tr>
<td>Quen : <span id="odrQuan"></span>
</td>
<td>Sh : <span id="shipQuan"></span>
</td>
<td>Run [ ] Int [ X ]. Shi [ ] No.</td>
</tr>
</tbody>
</table>
<table style="width:100%">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td >Title:</td>
</tr>
<tr align="center">
<td>FY</td>
<td>CJK</td>
<td>SL</td>
<td>F</td>
<td>P</td>
</tr>
<tr align="center">
<td><span id="fyavail">20</span>
</td>
<td><span id="ck">40</span>
</td>
<td><span id="sl">70</span>
</td>
<td><span id="finish">100</span>
</td>
<td><span id="pack">50</span>
</td>
</tr>
</tbody>
</table>
<table style="width:100%">
<tbody id="dhtml">
<tr>
<td class="boldFont">SAPC:</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="boldFont">
<td>ATU: <span id="aqluser"></span>
</td>
<td>SS : <span id="sampleSize"></span>
</td>
<td></td>
<td >MA : <span id="majallowed"></span>
</td>
<td></td>
<td>MAS : <span id="minallowed"></span>
</td>
</tr>
<tr>
<td>DT</td>
<td align="center">No.</td>
<td>DD</td>
<td align="center">C</td>
<td align="center">Max</td>
<td align="center">Min</td>
</tr>
<tr>
<td >FY</td>
<td align="center">1</td>
<td>FY</td>
<td align="center">11</td>
<td align="center">12</td>
<td align="center">123</td>
</tr>
<tr>
<td></td>
<td align="center">2</td>
<td>FY</td>
<td align="center">11</td>
<td align="center">12</td>
<td align="center">123</td>
</tr>
<tr>
<td></td>
<td></td>
<td align="right">ST :</td>
<td align="center">22</td>
<td align="center">24</td>
<td align="center">246</td>
</tr>
<tr>
<td >SKL</td>
<td align="center">1</td>
<td>SKL</td>
<td align="center">14</td>
<td align="center">13</td>
<td align="center">234</td>
</tr>
<tr>
<td align="center">2</td>
<td>SKL</td>
<td align="center">14</td>
<td align="center">13</td>
<td align="center">234</td>
<td></td>
</tr>
<tr>
<td align="right">ST :</td>
<td></td>
<td></td>
<td align="center">28</td>
<td align="center">26</td>
<td align="center">468</td>
</tr>
<tr>
<td >A</td>
<td align="center">1</td>
<td>A</td>
<td align="center">33</td>
<td align="center">445</td>
<td align="center">33</td>
</tr>
<tr>
<td></td>
<td align="center">2</td>
<td>A</td>
<td align="center">33</td>
<td align="center">445</td>
<td align="center">33</td>
</tr>
<tr>
<td></td>
<td></td>
<td align="right">ST :</td>
<td align="center">66</td>
<td align="center">890</td>
<td align="center">66</td>
</tr>
<tr>
<td></td>
<td></td>
<td align="right" class="boldFont">Tot :</td>
<td align="center">116</td>
<td align="center">940</td>
<td align="center">780</td>
</tr>
</tbody>
</table>
<table style="width:100%">
<tr class="boldFont">
<td >Title 3</td>
<td align="center">ASD</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="boldFont">
<td>C : <span id="tolcartons"></span>
</td>
<td>S : <span id="samsize"></span>
</td>
<td>M : <span id="allowmajor"></span>
</td>
<td align="center">WPZ</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>D No.</td>
<td>D type</td>
<td>NOF</td>
<td>C</td>
<td>Spev</td>
<td>Act</td>
<td>diff</td>
</tr>
<tr>
<td>1</td>
<td>F/Y</td>
<td><span id="nooffy"></span>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>S/K/L</td>
<td><span id="skl"></span>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>Fin</td>
<td><span id="finl"></span>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td align="right">TM:</td>
<td><span id="totmajores"></span>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td >Comment:<span id="comment"></span>
</td>
</tr>
</table>
<table style="width:100%">
<tbody>
<tr>
<td >outcome</td>
<td>A. V</td>
<td>[ X ] P</td>
<td>[ ] F</td>
<td>[ ] W</td>
<td>[ ] NA</td>
</tr>
<tr>
<td></td>
<td>B. M</td>
<td>[ X ] P</td>
<td>[ ] F</td>
<td>[ ] W</td>
<td>[ ] NA</td>
</tr>
<tr>
<td></td>
<td>C. P</td>
<td>[ X ] P</td>
<td>[ ] F</td>
<td>[ ] W</td>
<td>[ ] NA</td>
</tr>
</tbody>
</table>
<table style="width:100%">
<tbody>
<tr class="boldFont">
<td>CC A s</td>
</tr>
<tr>
<td><span id="comcorraction"></span>
</td>
</tr>
</tbody>
</table>
<table style="width:100%">
<tbody>
<tr class="boldFont">
<td >Title 4 :</td>
<td></td>
</tr>
<tr>
<td>TWT [ X ] Pass [ ] Fail</td>
<td>STO [ ] Pass [ X ] Fail</td>
</tr>
<tr>
<td>PAS [ ] A [ X ] NA</td>
<td>SR [ ] Yes [ X ] No [ ] NA</td>
</tr>
</tbody>
</table>
<table style="width:100%">
<tbody>
<tr class="boldFont">
<td >Signatures:</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p><span id="qaauditNo">.</span> <span id="qaadate" class="sdate">.</span>
</p>
<p>QANo <span class="sdate">Date</span>
</p>
</td>
<td>
<p><span id="mp">.</span> <span id="mpdate" class="sdate">.</span>
</p>
<p>MP<span class="sdate">Date</span>
</p>
</td>
<td>
<p><span id="supr">.</span> <span id="supdate" class="sdate">.</span>
</p>
<p>Sup<span class="sdate">Date</span>
</p>
</td>
</tr>
</tbody>
</table>
</div>
<p class="boldFont">Note: ABCDEFG</p>
<p class="boldFont">Note: ABCDEFG</p>
<div class="title boldFont">QC / MED / FAC / FOR</div>

Alternating row colors in a sortable table

I'm using a table sorter to 'order' my tables on the client side. However - when I change an order, my row colors get messed up.
does anyone have a solution?
(js file below if you want to 'try it')
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title></title>
<script type="text/javascript" src="js/sorttable.js"></script>
<style type="text/css">
table.sortable thead { background-color:#DF7C1B; color:#ffffff; font-weight:bold; font-size:12px;}
.datatable-evenrow { background-color:#FFC68F;}
.datatable-rowhighlight { background-color: #8E9DBE; }
.datatable-labelrow { background-color:#EF943B; }
</style>
</head>
<body>
<table class="sortable" >
<thead>
<tr class="datatable-labelrow" >
<td class="">NAME</td>
<td class="">CODE</td>
<td class="">ADDRESS</td>
<td class="">CITY</td>
<td class="">STATE</td>
<td class="">ZIP</td>
<td class="">PHONE</td>
<td class="">FAX</td>
</tr>
</thead>
<tbody>
<tr onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className=''" >
<td>EC, INC</td>
<td>234567</td>
<td>222 street</td>
<td>ELMHURST</td>
<td>IL</td>
<td>60000</td>
<td></td>
<td></td>
</tr>
<tr class="datatable-evenrow" onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className='datatable-evenrow'" >
<td>EC, INC</td>
<td>4322234</td>
<td>702 road</td>
<td>ELMHURST</td>
<td>IL</td>
<td>60000</td>
<td></td>
<td></td>
</tr>
<tr onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className=''" >
<td>AAA AMERICA, INC</td>
<td>1111112222222</td>
<td>1458 avenue Ave</td>
<td>ITASCA</td>
<td>IL</td>
<td>60143</td>
<td></td>
<td></td>
</tr>
<tr class="datatable-evenrow" onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className='datatable-evenrow'" >
<td>Likeme & likeme P.C.</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>00000</td>
<td></td>
<td></td>
</tr>
<tr onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className=''" >
<td>OFFICE STUFF, INC.</td>
<td>3333444</td>
<td>55555 Fifth Ave</td>
<td>NY</td>
<td>NY</td>
<td>02020</td>
<td></td>
<td></td>
</tr>
<tr class="datatable-evenrow" onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className='datatable-evenrow'" >
<td>RepServe Inc.</td>
<td>54321</td>
<td>P.O. Box 3099</td></td>
<td>Heresville</td>
<td>HR</td>
<td>44000</td>
<td></td>
<td></td>
</tr>
<tr onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className=''" >
<td>SCHNEIDER'S SCHNOUSERS INC.</td>
<td>654543</td>
<td>3101 S. PACKERLAND DR. P.</td>
<td>Dog Town</td>
<td>Delaware</td>
<td>000077</td>
<td>Dan D. Dog</td>
<td>800-600-3366</td>
</tr>
<tr class="datatable-evenrow" onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className='datatable-evenrow'" >
<td>SIMPLE DISTRIBUTORS, LLC</td>
<td>444</td>
<td>235255 Drive Way</td>
<td>CHICAGO</td>
<td>IL</td>
<td>60606</td>
<td></td>
<td></td>
</tr>
<tr onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className=''" >
<td>SIMPLE DISTRIBUTORS, LLC</td>
<td>1234 </td>
<td>xxxoooo</td>
<td>DETROIT</td>
<td>MI</td>
<td>40606</td>
<td></td>
<td></td>
</tr>
<tr class="datatable-evenrow" onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className='datatable-evenrow'" >
<td>AAA ,INC.</td>
<td>83300</td>
<td>OFFICEITEMS.COM</td>
<td>SOUTH ELGIN</td>
<td>IL</td>
<td>60177</td>
<td></td>
<td></td>
</tr>
<tr onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className=''" >
<td>BBB,INC.</td>
<td>156302</td>
<td>BBB.COM</td>
<td>SOUTH ELGIN</td>
<td>IL</td>
<td>60177</td>
<td></td>
<td></td>
</tr>
<tr class="datatable-evenrow" onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className='datatable-evenrow'" >
<td>CCC, INC</td>
<td>305792</td>
<td>333 ELKHART RD.</td>
<td>GOSH</td>
<td>SD</td>
<td>76526</td>
<td></td>
<td></td>
</tr>
<tr onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className=''" >
<td>CCC</td>
<td></td>
<td>UPRIGHT</td>
<td>P.O. BOX 228</td>
<td>FL</td>
<td>00000</td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr class="datatable-footerrow">
<td colspan="10" class="datatable-footercell">Showing 1-x of x Records </td>
</tr>
</tfoot>
</table>
</body>
</html>
For sorttable.js see http://www.kryogenix.org/code/browser/sorttable/

I don't see the JS file, but you should definitely consider the jQuery tablesorter plug-in. It's lightweight, performs fast on the client, and handles all your zebra-striping/custom css with sorting. It also works with a pager add-in.

Don't even worry about class names or anything. Just do this in your css:
table.sortable tbody tr:nth-child(even) td {
background-color: #FFC68F;
}

After the sort you need to re-assign the class names for the rows.

Categories