Generating PDF from complex html table using JSPDF - javascript

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>

Related

Change text color depending on table value Laravel

I have datatables on Laravel blade. The table has many rows and three columns which have last column value of salary. I have to choose the 15 people with the highest salary from the table.
The first 5 rows (1-5) of the text in the table should be green, the next 5 rows (6-11) should be yellow, the next 5 rows (11-15) should be red, and the remaining rows should be black as usual.
The codes were written using Laravel Blade and table DataTables.
#foreach($jamisoni as $pay)
<tr>
<td>{{$loop->iteration}}</td>
<td>{{$pay->name}}</td>
<td>{{$pay->amount}}</td>
</tr>
#endforeach
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:12px;
overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:12px;
font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-viqs{color:#fe0000;text-align:left;vertical-align:top}
.tg .tg-0lax{text-align:left;vertical-align:top}
.tg .tg-xdmp{color:#0a790a;text-align:left;vertical-align:top}
.tg .tg-i99s{color:#ffcb2f;text-align:left;vertical-align:top}
</style>
<table class="tg">
<thead>
<tr>
<th class="tg-0lax">ID</th>
<th class="tg-0lax">NAME</th>
<th class="tg-0lax">COUNT</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-xdmp">1</td>
<td class="tg-xdmp">User 35</td>
<td class="tg-xdmp">100 000</td>
</tr>
<tr>
<td class="tg-xdmp">2</td>
<td class="tg-xdmp">User 01</td>
<td class="tg-xdmp">98 000</td>
</tr>
<tr>
<td class="tg-xdmp">3</td>
<td class="tg-xdmp">User 24</td>
<td class="tg-xdmp">95 000</td>
</tr>
<tr>
<td class="tg-xdmp">4</td>
<td class="tg-xdmp">User 26</td>
<td class="tg-xdmp">92 000</td>
</tr>
<tr>
<td class="tg-xdmp">5</td>
<td class="tg-xdmp">User 10</td>
<td class="tg-xdmp">91 000</td>
</tr>
<tr>
<td class="tg-i99s">6</td>
<td class="tg-i99s">User 11</td>
<td class="tg-i99s">85 000</td>
</tr>
<tr>
<td class="tg-i99s">7</td>
<td class="tg-i99s">User 22</td>
<td class="tg-i99s">85 000</td>
</tr>
<tr>
<td class="tg-i99s">8</td>
<td class="tg-i99s">User 24</td>
<td class="tg-i99s">84 000</td>
</tr>
<tr>
<td class="tg-i99s">9</td>
<td class="tg-i99s">User 55</td>
<td class="tg-i99s">83 000</td>
</tr>
<tr>
<td class="tg-i99s">10</td>
<td class="tg-i99s">User 65</td>
<td class="tg-i99s">82 000</td>
</tr>
<tr>
<td class="tg-viqs">11</td>
<td class="tg-viqs">User 40</td>
<td class="tg-viqs">70 000</td>
</tr>
<tr>
<td class="tg-viqs">12</td>
<td class="tg-viqs">User 39</td>
<td class="tg-viqs">69 000</td>
</tr>
<tr>
<td class="tg-viqs">13</td>
<td class="tg-viqs">User 29</td>
<td class="tg-viqs">65 000</td>
</tr>
<tr>
<td class="tg-viqs">14</td>
<td class="tg-viqs">User 44</td>
<td class="tg-viqs">64 000</td>
</tr>
<tr>
<td class="tg-viqs">15</td>
<td class="tg-viqs">User 58</td>
<td class="tg-viqs">63 000</td>
</tr>
<tr>
<td class="tg-0lax">16</td>
<td class="tg-0lax">User 70</td>
<td class="tg-0lax">58 000</td>
</tr>
<tr>
<td class="tg-0lax">17</td>
<td class="tg-0lax">User 71</td>
<td class="tg-0lax">55 000</td>
</tr>
</tbody>
</table>
Please help to solve this problem.

You can use $loop variable as condition to write nedded classes to your rows.
Blade loop:
#foreach($jamisoni as $pay)
<tr class="
#if($loop->iteration < 6)
{{ 'td-text-green' }}
#elseif($loop->iteration < 11)
{{ 'td-text-yellow' }}
#elseif($loop->iteration < 16)
{{ 'td-text-red' }}
#endif
">
<td>{{$loop->iteration}}</td>
<td>{{$pay->name}}</td>
<td>{{$pay->amount}}</td>
</tr>
#endforeach
CSS:
.td-text-green td {color: green;}
.td-text-yellow td {color: yellow;}
.td-text-red td {color: red;}

#php $i=1;#endphp
#foreach($jamisoni as $pay)
#php
if($i<=5){
$color='tg-xdmp';
}
else if($i>=6 && $i<=10){
$color='tg-i99s';
}
else if($i>11 && $i<=15){
$color='tg-viqs';
}
else{
$color='tg-0lax';
}
$i++;
#endphp
<tr>
<td class="{{$color}}">{{$loop->iteration}}</td>
<td class="{{$color}}">{{$pay->name}}</td>
<td class="{{$color}}">{{$pay->amount}}</td>
</tr>
#endforeach
Define a $color variable and assign the color value at once. Once done just use it inside your <td> tag by specifying the class.

JQuery: Uncaught SyntaxError: Invalid or unexpected token

I am also using socket.io. There is an HTML table, and when a user clicks a button, my code is supposed to replace that table with a new one, however it gives the error message in the title.
Here is my code:
HTML:
<table>
</tbody>
<tr>
<td class="1"></td>
<td class="2"></td>
<td class="3"></td>
</tr>
<tr>
<td class="4"></td>
<td class="5"></td>
<td class="6"></td>
</tr>
<tr>
<td class="7"></td>
<td class="8"></td>
<td class="9"></td>
</tr>
</tbody>
</table>
JQuery script:
socket.on('resetGranted', function() {
$('table').replaceWith('<table> //says error is here
</tbody>
<tr>
<td class="1"></td>
<td class="2"></td>
<td class="3"></td>
</tr>
<tr>
<td class="4"></td>
<td class="5"></td>
<td class="6"></td>
</tr>
<tr>
<td class="7"></td>
<td class="8"></td>
<td class="9"></td>
</tr>
</tbody>
</table>');
})
How do I fix this?

Use backtick ` for multiline string
console.log(`
multi
line
string
here
`);

socket.on('resetGranted', function() {
var htmlContent='<table>
</tbody>
<tr>
<td class="1"></td>
<td class="2"></td>
<td class="3"></td>
</tr>
<tr>
<td class="4"></td>
<td class="5"></td>
<td class="6"></td>
</tr>
<tr>
<td class="7"></td>
<td class="8"></td>
<td class="9"></td>
</tr>
</tbody>
</table>';
$('table').replaceWith(htmlContent);
})

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.

Datatable sorting is not working

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/

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