Is there a way to use NR dashboard template node to get functionality provided by datatables?
I was trying to put this example code in to the template node. It works somehow, but when page is reloaded (Ctrl - R in Firefox), all table functionality/formatting is gone.
How achieve this goal in NR dashboard?
Or is it necessary to install uibuilder for such a task?
I would like to get some action/data back to the back-end as well.
It should be possible. You need to make sure you are loading it correctly. jQuery v3.3.1 is already part of Dashboard. So you should be able to load the datatables library in your template.
The information you may be missing however is that the Dashboard template is NOT a complete html file. It is inserted into a master html file dynamically. So you can't use any of the <head> part and you can't use <body> because your template is already part of the body.
That is actually not a very good example anyway but you will need to put this part into your template:
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<script type="text/javascript" class="init">
$(document).ready(function() {
$('#example').dataTable();
} );
</script>
You can put that below the html code you put in the template.
It isn't necessary but if you aren't using the features of Dashboard, you might find uibuilder easier to work with - assuming you are trying to build a custom interface. The default installation of uibuilder includes jQuery so you can simply load datatables and adjust index.js (which already caters for the on document ready processing) to apply the table js.
Either way, you can simply use a send function to return data back to the Node-RED back-end.
I would like to add some tables to my existing NR back-end Dashboard front-end functionality
http://maxbox.maxbox.cz:8000/ui credentials: node-ui / KotelnikFace
I was mainly involved in Python programming so detailed instructions for my start-up are highly appreciated.
I have changed the code according to your suggestions but it does not work...
[{"id":"c033940c.f91f9","type":"ui_template","z":"171dbdc2.2de1c2","group":"8f1c7f3.9a70b8","name":"","order":3,"width":"16","height":"17","format":"<!DOCTYPE html>\n<html>\n \n <font color=\"black\">\n <a name=\"top\" id=\"top\"></a>\n <div class=\"fw-background\">\n <div></div>\n </div>\n <div class=\"fw-container\">\n \n <div class=\"fw-nav\">\n\n <div class=\"mobile-show\">\n \n </div>\n </div>\n <div class=\"fw-body\">\n\n <table id=\"example\" class=\"display\" style=\"width:100%\">\n <thead>\n <tr>\n <th>Name</th>\n <th>Position</th>\n <th>Office</th>\n <th>Age</th>\n <th>Start date</th>\n <th>Salary</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Tiger Nixon</td>\n <td>System Architect</td>\n <td>Edinburgh</td>\n <td>61</td>\n <td>2011/04/25</td>\n <td>$320,800</td>\n </tr>\n <tr>\n <td>Garrett Winters</td>\n <td>Accountant</td>\n <td>Tokyo</td>\n <td>63</td>\n <td>2011/07/25</td>\n <td>$170,750</td>\n </tr>\n <tr>\n <td>Ashton Cox</td>\n <td>Junior Technical Author</td>\n <td>San Francisco</td>\n <td>66</td>\n <td>2009/01/12</td>\n <td>$86,000</td>\n </tr>\n <tr>\n <td>Cedric Kelly</td>\n <td>Senior Javascript Developer</td>\n <td>Edinburgh</td>\n <td>22</td>\n <td>2012/03/29</td>\n <td>$433,060</td>\n </tr>\n <tr>\n <td>Airi Satou</td>\n <td>Accountant</td>\n <td>Tokyo</td>\n <td>33</td>\n <td>2008/11/28</td>\n <td>$162,700</td>\n </tr>\n <tr>\n <td>Brielle Williamson</td>\n <td>Integration Specialist</td>\n <td>New York</td>\n <td>61</td>\n <td>2012/12/02</td>\n <td>$372,000</td>\n </tr>\n <tr>\n <td>Herrod Chandler</td>\n <td>Sales Assistant</td>\n <td>San Francisco</td>\n <td>59</td>\n <td>2012/08/06</td>\n <td>$137,500</td>\n </tr>\n <tr>\n <td>Rhona Davidson</td>\n <td>Integration Specialist</td>\n <td>Tokyo</td>\n <td>55</td>\n <td>2010/10/14</td>\n <td>$327,900</td>\n </tr>\n <tr>\n <td>Colleen Hurst</td>\n <td>Javascript Developer</td>\n <td>San Francisco</td>\n <td>39</td>\n <td>2009/09/15</td>\n <td>$205,500</td>\n </tr>\n <tr>\n <td>Sonya Frost</td>\n <td>Software Engineer</td>\n <td>Edinburgh</td>\n <td>23</td>\n <td>2008/12/13</td>\n <td>$103,600</td>\n </tr>\n <tr>\n <td>Jena Gaines</td>\n <td>Office Manager</td>\n <td>London</td>\n <td>30</td>\n <td>2008/12/19</td>\n <td>$90,560</td>\n </tr>\n <tr>\n <td>Quinn Flynn</td>\n <td>Support Lead</td>\n <td>Edinburgh</td>\n <td>22</td>\n <td>2013/03/03</td>\n <td>$342,000</td>\n </tr>\n <tr>\n <td>Charde Marshall</td>\n <td>Regional Director</td>\n <td>San Francisco</td>\n <td>36</td>\n <td>2008/10/16</td>\n <td>$470,600</td>\n </tr>\n <tr>\n <td>Haley Kennedy</td>\n <td>Senior Marketing Designer</td>\n <td>London</td>\n <td>43</td>\n <td>2012/12/18</td>\n <td>$313,500</td>\n </tr>\n <tr>\n <td>Tatyana Fitzpatrick</td>\n <td>Regional Director</td>\n <td>London</td>\n <td>19</td>\n <td>2010/03/17</td>\n <td>$385,750</td>\n </tr>\n <tr>\n <td>Michael Silva</td>\n <td>Marketing Designer</td>\n <td>London</td>\n <td>66</td>\n <td>2012/11/27</td>\n <td>$198,500</td>\n </tr>\n <tr>\n <td>Paul Byrd</td>\n <td>Chief Financial Officer (CFO)</td>\n <td>New York</td>\n <td>64</td>\n <td>2010/06/09</td>\n <td>$725,000</td>\n </tr>\n <tr>\n <td>Gloria Little</td>\n <td>Systems Administrator</td>\n <td>New York</td>\n <td>59</td>\n <td>2009/04/10</td>\n <td>$237,500</td>\n </tr>\n <tr>\n <td>Bradley Greer</td>\n <td>Software Engineer</td>\n <td>London</td>\n <td>41</td>\n <td>2012/10/13</td>\n <td>$132,000</td>\n </tr>\n <tr>\n <td>Dai Rios</td>\n <td>Personnel Lead</td>\n <td>Edinburgh</td>\n <td>35</td>\n <td>2012/09/26</td>\n <td>$217,500</td>\n </tr>\n <tr>\n <td>Jenette Caldwell</td>\n <td>Development Lead</td>\n <td>New York</td>\n <td>30</td>\n <td>2011/09/03</td>\n <td>$345,000</td>\n </tr>\n <tr>\n <td>Yuri Berry</td>\n <td>Chief Marketing Officer (CMO)</td>\n <td>New York</td>\n <td>40</td>\n <td>2009/06/25</td>\n <td>$675,000</td>\n </tr>\n <tr>\n <td>Caesar Vance</td>\n <td>Pre-Sales Support</td>\n <td>New York</td>\n <td>21</td>\n <td>2011/12/12</td>\n <td>$106,450</td>\n </tr>\n <tr>\n <td>Doris Wilder</td>\n <td>Sales Assistant</td>\n <td>Sidney</td>\n <td>23</td>\n <td>2010/09/20</td>\n <td>$85,600</td>\n </tr>\n <tr>\n <td>Angelica Ramos</td>\n <td>Chief Executive Officer (CEO)</td>\n <td>London</td>\n <td>47</td>\n <td>2009/10/09</td>\n <td>$1,200,000</td>\n </tr>\n <tr>\n <td>Gavin Joyce</td>\n <td>Developer</td>\n <td>Edinburgh</td>\n <td>42</td>\n <td>2010/12/22</td>\n <td>$92,575</td>\n </tr>\n <tr>\n <td>Jennifer Chang</td>\n <td>Regional Director</td>\n <td>Singapore</td>\n <td>28</td>\n <td>2010/11/14</td>\n <td>$357,650</td>\n </tr>\n <tr>\n <td>Brenden Wagner</td>\n <td>Software Engineer</td>\n <td>San Francisco</td>\n <td>28</td>\n <td>2011/06/07</td>\n <td>$206,850</td>\n </tr>\n <tr>\n <td>Fiona Green</td>\n <td>Chief Operating Officer (COO)</td>\n <td>San Francisco</td>\n <td>48</td>\n <td>2010/03/11</td>\n <td>$850,000</td>\n </tr>\n <tr>\n <td>Shou Itou</td>\n <td>Regional Marketing</td>\n <td>Tokyo</td>\n <td>20</td>\n <td>2011/08/14</td>\n <td>$163,000</td>\n </tr>\n <tr>\n <td>Michelle House</td>\n <td>Integration Specialist</td>\n <td>Sidney</td>\n <td>37</td>\n <td>2011/06/02</td>\n <td>$95,400</td>\n </tr>\n <tr>\n <td>Suki Burks</td>\n <td>Developer</td>\n <td>London</td>\n <td>53</td>\n <td>2009/10/22</td>\n <td>$114,500</td>\n </tr>\n <tr>\n <td>Prescott Bartlett</td>\n <td>Technical Author</td>\n <td>London</td>\n <td>27</td>\n <td>2011/05/07</td>\n <td>$145,000</td>\n </tr>\n <tr>\n <td>Gavin Cortez</td>\n <td>Team Leader</td>\n <td>San Francisco</td>\n <td>22</td>\n <td>2008/10/26</td>\n <td>$235,500</td>\n </tr>\n <tr>\n <td>Martena Mccray</td>\n <td>Post-Sales support</td>\n <td>Edinburgh</td>\n <td>46</td>\n <td>2011/03/09</td>\n <td>$324,050</td>\n </tr>\n <tr>\n <td>Unity Butler</td>\n <td>Marketing Designer</td>\n <td>San Francisco</td>\n <td>47</td>\n <td>2009/12/09</td>\n <td>$85,675</td>\n </tr>\n <tr>\n <td>Howard Hatfield</td>\n <td>Office Manager</td>\n <td>San Francisco</td>\n <td>51</td>\n <td>2008/12/16</td>\n <td>$164,500</td>\n </tr>\n <tr>\n <td>Hope Fuentes</td>\n <td>Secretary</td>\n <td>San Francisco</td>\n <td>41</td>\n <td>2010/02/12</td>\n <td>$109,850</td>\n </tr>\n <tr>\n <td>Vivian Harrell</td>\n <td>Financial Controller</td>\n <td>San Francisco</td>\n <td>62</td>\n <td>2009/02/14</td>\n <td>$452,500</td>\n </tr>\n <tr>\n <td>Timothy Mooney</td>\n <td>Office Manager</td>\n <td>London</td>\n <td>37</td>\n <td>2008/12/11</td>\n <td>$136,200</td>\n </tr>\n <tr>\n <td>Jackson Bradshaw</td>\n <td>Director</td>\n <td>New York</td>\n <td>65</td>\n <td>2008/09/26</td>\n <td>$645,750</td>\n </tr>\n <tr>\n <td>Olivia Liang</td>\n <td>Support Engineer</td>\n <td>Singapore</td>\n <td>64</td>\n <td>2011/02/03</td>\n <td>$234,500</td>\n </tr>\n <tr>\n <td>Bruno Nash</td>\n <td>Software Engineer</td>\n <td>London</td>\n <td>38</td>\n <td>2011/05/03</td>\n <td>$163,500</td>\n </tr>\n <tr>\n <td>Sakura Yamamoto</td>\n <td>Support Engineer</td>\n <td>Tokyo</td>\n <td>37</td>\n <td>2009/08/19</td>\n <td>$139,575</td>\n </tr>\n <tr>\n <td>Thor Walton</td>\n <td>Developer</td>\n <td>New York</td>\n <td>61</td>\n <td>2013/08/11</td>\n <td>$98,540</td>\n </tr>\n <tr>\n <td>Finn Camacho</td>\n <td>Support Engineer</td>\n <td>San Francisco</td>\n <td>47</td>\n <td>2009/07/07</td>\n <td>$87,500</td>\n </tr>\n <tr>\n <td>Serge Baldwin</td>\n <td>Data Coordinator</td>\n <td>Singapore</td>\n <td>64</td>\n <td>2012/04/09</td>\n <td>$138,575</td>\n </tr>\n <tr>\n <td>Zenaida Frank</td>\n <td>Software Engineer</td>\n <td>New York</td>\n <td>63</td>\n <td>2010/01/04</td>\n <td>$125,250</td>\n </tr>\n <tr>\n <td>Zorita Serrano</td>\n <td>Software Engineer</td>\n <td>San Francisco</td>\n <td>56</td>\n <td>2012/06/01</td>\n <td>$115,000</td>\n </tr>\n <tr>\n <td>Jennifer Acosta</td>\n <td>Junior Javascript Developer</td>\n <td>Edinburgh</td>\n <td>43</td>\n <td>2013/02/01</td>\n <td>$75,650</td>\n </tr>\n <tr>\n <td>Cara Stevens</td>\n <td>Sales Assistant</td>\n <td>New York</td>\n <td>46</td>\n <td>2011/12/06</td>\n <td>$145,600</td>\n </tr>\n <tr>\n <td>Hermione Butler</td>\n <td>Regional Director</td>\n <td>London</td>\n <td>47</td>\n <td>2011/03/21</td>\n <td>$356,250</td>\n </tr>\n <tr>\n <td>Lael Greer</td>\n <td>Systems Administrator</td>\n <td>London</td>\n <td>21</td>\n <td>2009/02/27</td>\n <td>$103,500</td>\n </tr>\n <tr>\n <td>Jonas Alexander</td>\n <td>Developer</td>\n <td>San Francisco</td>\n <td>30</td>\n <td>2010/07/14</td>\n <td>$86,500</td>\n </tr>\n <tr>\n <td>Shad Decker</td>\n <td>Regional Director</td>\n <td>Edinburgh</td>\n <td>51</td>\n <td>2008/11/13</td>\n <td>$183,000</td>\n </tr>\n <tr>\n <td>Michael Bruce</td>\n <td>Javascript Developer</td>\n <td>Singapore</td>\n <td>29</td>\n <td>2011/06/27</td>\n <td>$183,000</td>\n </tr>\n <tr>\n <td>Donna Snider</td>\n <td>Customer Support</td>\n <td>New York</td>\n <td>27</td>\n <td>2011/01/25</td>\n <td>$112,000</td>\n </tr>\n </tbody>\n <tfoot>\n <tr>\n <th>Name</th>\n <th>Position</th>\n <th>Office</th>\n <th>Age</th>\n <th>Start date</th>\n <th>Salary</th>\n </tr>\n </tfoot>\n </table>\n \n </div>\n </div>\n </font>\n \n</html>\n \n<script>\n <link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css\"> \n \n \n <script type=\"text/javascript\" language=\"javascript\" src=\"https://code.jquery.com/jquery-3.3.1.js\"></script>\n \n <script type=\"text/javascript\" charset=\"utf8\" src=\"https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js\"></script>\n \n <script type=\"text/javascript\" class=\"init\">\n\n $(document).ready(function() {\n $('#example').dataTable();\n } );\n\n </script>\n ","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":705.5,"y":371,"wires":[[]]},{"id":"8f1c7f3.9a70b8","type":"ui_group","z":"","name":"Group 1","tab":"14f566ca.b61379","order":1,"disp":true,"width":"16","collapse":true},{"id":"14f566ca.b61379","type":"ui_tab","z":"","name":"Tabulka","icon":"dashboard","disabled":false,"hidden":false}]
You have messed up the template. A lot!
<!DOCTYPE html>
<html>
</html>
None of that should be there as I hinted at previously.
You have overlapping <script> tags. You also have some other html that I think is invalid like unterminated <font> tags - you shouldn't be using font tags anyway, that is what CSS is for.
If you sort all that out, it should work.
OK, trying to follow your suggestions.
I have removed all html tags except table tags and script tags.
Generally it works the same way as mentioned in my starting post (all table functionality is lost after Ctrl-R). Plus table and element formatting is lost at the begening.
Me, I am lost as well 
[{"id":"c033940c.f91f9","type":"ui_template","z":"171dbdc2.2de1c2","group":"8f1c7f3.9a70b8","name":"","order":3,"width":"16","height":"17","format":" <table id=\"example\" class=\"display\" style=\"width:100%\">\n <thead>\n <tr>\n <th>Name</th>\n <th>Position</th>\n <th>Office</th>\n <th>Age</th>\n <th>Start date</th>\n <th>Salary</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Tiger Nixon</td>\n <td>System Architect</td>\n <td>Edinburgh</td>\n <td>61</td>\n <td>2011/04/25</td>\n <td>$320,800</td>\n </tr>\n <tr>\n <td>Garrett Winters</td>\n <td>Accountant</td>\n <td>Tokyo</td>\n <td>63</td>\n <td>2011/07/25</td>\n <td>$170,750</td>\n </tr>\n <tr>\n <td>Ashton Cox</td>\n <td>Junior Technical Author</td>\n <td>San Francisco</td>\n <td>66</td>\n <td>2009/01/12</td>\n <td>$86,000</td>\n </tr>\n <tr>\n <td>Cedric Kelly</td>\n <td>Senior Javascript Developer</td>\n <td>Edinburgh</td>\n <td>22</td>\n <td>2012/03/29</td>\n <td>$433,060</td>\n </tr>\n <tr>\n <td>Airi Satou</td>\n <td>Accountant</td>\n <td>Tokyo</td>\n <td>33</td>\n <td>2008/11/28</td>\n <td>$162,700</td>\n </tr>\n <tr>\n <td>Brielle Williamson</td>\n <td>Integration Specialist</td>\n <td>New York</td>\n <td>61</td>\n <td>2012/12/02</td>\n <td>$372,000</td>\n </tr>\n <tr>\n <td>Herrod Chandler</td>\n <td>Sales Assistant</td>\n <td>San Francisco</td>\n <td>59</td>\n <td>2012/08/06</td>\n <td>$137,500</td>\n </tr>\n <tr>\n <td>Rhona Davidson</td>\n <td>Integration Specialist</td>\n <td>Tokyo</td>\n <td>55</td>\n <td>2010/10/14</td>\n <td>$327,900</td>\n </tr>\n <tr>\n <td>Colleen Hurst</td>\n <td>Javascript Developer</td>\n <td>San Francisco</td>\n <td>39</td>\n <td>2009/09/15</td>\n <td>$205,500</td>\n </tr>\n <tr>\n <td>Sonya Frost</td>\n <td>Software Engineer</td>\n <td>Edinburgh</td>\n <td>23</td>\n <td>2008/12/13</td>\n <td>$103,600</td>\n </tr>\n <tr>\n <td>Jena Gaines</td>\n <td>Office Manager</td>\n <td>London</td>\n <td>30</td>\n <td>2008/12/19</td>\n <td>$90,560</td>\n </tr>\n <tr>\n <td>Quinn Flynn</td>\n <td>Support Lead</td>\n <td>Edinburgh</td>\n <td>22</td>\n <td>2013/03/03</td>\n <td>$342,000</td>\n </tr>\n <tr>\n <td>Charde Marshall</td>\n <td>Regional Director</td>\n <td>San Francisco</td>\n <td>36</td>\n <td>2008/10/16</td>\n <td>$470,600</td>\n </tr>\n <tr>\n <td>Haley Kennedy</td>\n <td>Senior Marketing Designer</td>\n <td>London</td>\n <td>43</td>\n <td>2012/12/18</td>\n <td>$313,500</td>\n </tr>\n <tr>\n <td>Tatyana Fitzpatrick</td>\n <td>Regional Director</td>\n <td>London</td>\n <td>19</td>\n <td>2010/03/17</td>\n <td>$385,750</td>\n </tr>\n <tr>\n <td>Michael Silva</td>\n <td>Marketing Designer</td>\n <td>London</td>\n <td>66</td>\n <td>2012/11/27</td>\n <td>$198,500</td>\n </tr>\n <tr>\n <td>Paul Byrd</td>\n <td>Chief Financial Officer (CFO)</td>\n <td>New York</td>\n <td>64</td>\n <td>2010/06/09</td>\n <td>$725,000</td>\n </tr>\n <tr>\n <td>Gloria Little</td>\n <td>Systems Administrator</td>\n <td>New York</td>\n <td>59</td>\n <td>2009/04/10</td>\n <td>$237,500</td>\n </tr>\n <tr>\n <td>Bradley Greer</td>\n <td>Software Engineer</td>\n <td>London</td>\n <td>41</td>\n <td>2012/10/13</td>\n <td>$132,000</td>\n </tr>\n <tr>\n <td>Dai Rios</td>\n <td>Personnel Lead</td>\n <td>Edinburgh</td>\n <td>35</td>\n <td>2012/09/26</td>\n <td>$217,500</td>\n </tr>\n <tr>\n <td>Jenette Caldwell</td>\n <td>Development Lead</td>\n <td>New York</td>\n <td>30</td>\n <td>2011/09/03</td>\n <td>$345,000</td>\n </tr>\n <tr>\n <td>Yuri Berry</td>\n <td>Chief Marketing Officer (CMO)</td>\n <td>New York</td>\n <td>40</td>\n <td>2009/06/25</td>\n <td>$675,000</td>\n </tr>\n <tr>\n <td>Caesar Vance</td>\n <td>Pre-Sales Support</td>\n <td>New York</td>\n <td>21</td>\n <td>2011/12/12</td>\n <td>$106,450</td>\n </tr>\n <tr>\n <td>Doris Wilder</td>\n <td>Sales Assistant</td>\n <td>Sidney</td>\n <td>23</td>\n <td>2010/09/20</td>\n <td>$85,600</td>\n </tr>\n <tr>\n <td>Angelica Ramos</td>\n <td>Chief Executive Officer (CEO)</td>\n <td>London</td>\n <td>47</td>\n <td>2009/10/09</td>\n <td>$1,200,000</td>\n </tr>\n <tr>\n <td>Gavin Joyce</td>\n <td>Developer</td>\n <td>Edinburgh</td>\n <td>42</td>\n <td>2010/12/22</td>\n <td>$92,575</td>\n </tr>\n <tr>\n <td>Jennifer Chang</td>\n <td>Regional Director</td>\n <td>Singapore</td>\n <td>28</td>\n <td>2010/11/14</td>\n <td>$357,650</td>\n </tr>\n <tr>\n <td>Brenden Wagner</td>\n <td>Software Engineer</td>\n <td>San Francisco</td>\n <td>28</td>\n <td>2011/06/07</td>\n <td>$206,850</td>\n </tr>\n <tr>\n <td>Fiona Green</td>\n <td>Chief Operating Officer (COO)</td>\n <td>San Francisco</td>\n <td>48</td>\n <td>2010/03/11</td>\n <td>$850,000</td>\n </tr>\n <tr>\n <td>Shou Itou</td>\n <td>Regional Marketing</td>\n <td>Tokyo</td>\n <td>20</td>\n <td>2011/08/14</td>\n <td>$163,000</td>\n </tr>\n <tr>\n <td>Michelle House</td>\n <td>Integration Specialist</td>\n <td>Sidney</td>\n <td>37</td>\n <td>2011/06/02</td>\n <td>$95,400</td>\n </tr>\n <tr>\n <td>Suki Burks</td>\n <td>Developer</td>\n <td>London</td>\n <td>53</td>\n <td>2009/10/22</td>\n <td>$114,500</td>\n </tr>\n <tr>\n <td>Prescott Bartlett</td>\n <td>Technical Author</td>\n <td>London</td>\n <td>27</td>\n <td>2011/05/07</td>\n <td>$145,000</td>\n </tr>\n <tr>\n <td>Gavin Cortez</td>\n <td>Team Leader</td>\n <td>San Francisco</td>\n <td>22</td>\n <td>2008/10/26</td>\n <td>$235,500</td>\n </tr>\n <tr>\n <td>Martena Mccray</td>\n <td>Post-Sales support</td>\n <td>Edinburgh</td>\n <td>46</td>\n <td>2011/03/09</td>\n <td>$324,050</td>\n </tr>\n <tr>\n <td>Unity Butler</td>\n <td>Marketing Designer</td>\n <td>San Francisco</td>\n <td>47</td>\n <td>2009/12/09</td>\n <td>$85,675</td>\n </tr>\n <tr>\n <td>Howard Hatfield</td>\n <td>Office Manager</td>\n <td>San Francisco</td>\n <td>51</td>\n <td>2008/12/16</td>\n <td>$164,500</td>\n </tr>\n <tr>\n <td>Hope Fuentes</td>\n <td>Secretary</td>\n <td>San Francisco</td>\n <td>41</td>\n <td>2010/02/12</td>\n <td>$109,850</td>\n </tr>\n <tr>\n <td>Vivian Harrell</td>\n <td>Financial Controller</td>\n <td>San Francisco</td>\n <td>62</td>\n <td>2009/02/14</td>\n <td>$452,500</td>\n </tr>\n <tr>\n <td>Timothy Mooney</td>\n <td>Office Manager</td>\n <td>London</td>\n <td>37</td>\n <td>2008/12/11</td>\n <td>$136,200</td>\n </tr>\n <tr>\n <td>Jackson Bradshaw</td>\n <td>Director</td>\n <td>New York</td>\n <td>65</td>\n <td>2008/09/26</td>\n <td>$645,750</td>\n </tr>\n <tr>\n <td>Olivia Liang</td>\n <td>Support Engineer</td>\n <td>Singapore</td>\n <td>64</td>\n <td>2011/02/03</td>\n <td>$234,500</td>\n </tr>\n <tr>\n <td>Bruno Nash</td>\n <td>Software Engineer</td>\n <td>London</td>\n <td>38</td>\n <td>2011/05/03</td>\n <td>$163,500</td>\n </tr>\n <tr>\n <td>Sakura Yamamoto</td>\n <td>Support Engineer</td>\n <td>Tokyo</td>\n <td>37</td>\n <td>2009/08/19</td>\n <td>$139,575</td>\n </tr>\n <tr>\n <td>Thor Walton</td>\n <td>Developer</td>\n <td>New York</td>\n <td>61</td>\n <td>2013/08/11</td>\n <td>$98,540</td>\n </tr>\n <tr>\n <td>Finn Camacho</td>\n <td>Support Engineer</td>\n <td>San Francisco</td>\n <td>47</td>\n <td>2009/07/07</td>\n <td>$87,500</td>\n </tr>\n <tr>\n <td>Serge Baldwin</td>\n <td>Data Coordinator</td>\n <td>Singapore</td>\n <td>64</td>\n <td>2012/04/09</td>\n <td>$138,575</td>\n </tr>\n <tr>\n <td>Zenaida Frank</td>\n <td>Software Engineer</td>\n <td>New York</td>\n <td>63</td>\n <td>2010/01/04</td>\n <td>$125,250</td>\n </tr>\n <tr>\n <td>Zorita Serrano</td>\n <td>Software Engineer</td>\n <td>San Francisco</td>\n <td>56</td>\n <td>2012/06/01</td>\n <td>$115,000</td>\n </tr>\n <tr>\n <td>Jennifer Acosta</td>\n <td>Junior Javascript Developer</td>\n <td>Edinburgh</td>\n <td>43</td>\n <td>2013/02/01</td>\n <td>$75,650</td>\n </tr>\n <tr>\n <td>Cara Stevens</td>\n <td>Sales Assistant</td>\n <td>New York</td>\n <td>46</td>\n <td>2011/12/06</td>\n <td>$145,600</td>\n </tr>\n <tr>\n <td>Hermione Butler</td>\n <td>Regional Director</td>\n <td>London</td>\n <td>47</td>\n <td>2011/03/21</td>\n <td>$356,250</td>\n </tr>\n <tr>\n <td>Lael Greer</td>\n <td>Systems Administrator</td>\n <td>London</td>\n <td>21</td>\n <td>2009/02/27</td>\n <td>$103,500</td>\n </tr>\n <tr>\n <td>Jonas Alexander</td>\n <td>Developer</td>\n <td>San Francisco</td>\n <td>30</td>\n <td>2010/07/14</td>\n <td>$86,500</td>\n </tr>\n <tr>\n <td>Shad Decker</td>\n <td>Regional Director</td>\n <td>Edinburgh</td>\n <td>51</td>\n <td>2008/11/13</td>\n <td>$183,000</td>\n </tr>\n <tr>\n <td>Michael Bruce</td>\n <td>Javascript Developer</td>\n <td>Singapore</td>\n <td>29</td>\n <td>2011/06/27</td>\n <td>$183,000</td>\n </tr>\n <tr>\n <td>Donna Snider</td>\n <td>Customer Support</td>\n <td>New York</td>\n <td>27</td>\n <td>2011/01/25</td>\n <td>$112,000</td>\n </tr>\n </tbody>\n <tfoot>\n <tr>\n <th>Name</th>\n <th>Position</th>\n <th>Office</th>\n <th>Age</th>\n <th>Start date</th>\n <th>Salary</th>\n </tr>\n </tfoot>\n </table>\n\n<script type=\"text/javascript\" charset=\"utf8\" src=\"https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js\"></script>\n<script type=\"text/javascript\" class=\"init\">\n\n $(document).ready(function() {\n $('#example').dataTable();\n } );\n\n</script> \n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":623.5,"y":149,"wires":[[]]},{"id":"8f1c7f3.9a70b8","type":"ui_group","z":"","name":"Group 1","tab":"14f566ca.b61379","order":1,"disp":true,"width":"16","collapse":true},{"id":"14f566ca.b61379","type":"ui_tab","z":"","name":"Tabulka","icon":"dashboard","disabled":false,"hidden":false}]
If you look at the console in your browser, you will see why it is failing.
If you then paste $('#example').dataTable() into the browsers console, you will see that the table is correctly formatted.
That tells us that, I think, the JS hasn't had time to load correctly by the time that it is executed. It works when you type the command in manually because, by then, everything is loaded.
Not really sure how to fix that other than trying to put in a slight delay before calling the datatable. Normally, the $(document).ready(function() {}) is sufficient. Perhaps someone more proficient in Dashboard can suggest something.
If you aren't using any of the other features of Dashboard, you can certainly do this in uibuilder. Simply take the default example code, add the html from your Dashboard template to the index.html file within the div with the "app" id. Add the link to the CSS in the head and the javascript link below the jquery link but above the index.js link. Finally add the $('#example').dataTable() part into index.js.
If you have installed uibuilder v1.1.0 from earlier today, you can do the edits in the admin interface.
The example code is for me "proof of concept". I would like to fill the table with my real data.
Than incorporate some functionality (buttons, input fields?) to change values and send it back to the NR back-end. Not really sure now ... maybe I am not on the good way.....
Some hints?
My all "code" is in Dashbord till now (see below), so I am not sure, how to continue.
[{"id":"a2632538.64ece","type":"json","z":"3ab1fcde.51baf4","name":"","property":"payload","action":"","pretty":false,"x":282,"y":810,"wires":[["444398d8.8a04e","7d2bee4a.02fcb","4a0825fc.db2434","ba11a325.7d07b","692559ed.8b98b","3efab90d.bd1b2e","9c7f4a31.f5411","d5192b43.bfa9f","301b4ecb.cfab9a","b8f98be8.4846e8","cb4ccef4.4270a8"]]},{"id":"ce873ce2.87f03","type":"mqtt in","z":"3ab1fcde.51baf4","name":"","topic":"konecchlumska/","qos":"2","broker":"6f2e24e1.6bb3ec","x":112,"y":810,"wires":[["a2632538.64ece"]]},{"id":"4ebbc12a.cf926","type":"ui_gauge","z":"3ab1fcde.51baf4","name":"Teploata vzduchu do vĂ˝parnĂku K1 (S3)","group":"afc0e610.90eeb8","order":3,"width":"2","height":"2","gtype":"gage","title":" <center><b>Teplota vzduchu do vĂ˝parnĂku (S3)</></center> ","label":"°C","format":"{{payload.TEMPERATURE.s3.values[0]}}","min":"-30","max":"-10","colors":["#00b500","#e6e600","#ca3838"],"seg1":"-21","seg2":"-15","x":758,"y":177,"wires":[]},{"id":"b6d1556.b0702a8","type":"ui_gauge","z":"3ab1fcde.51baf4","name":"Teplota vzduchu do vĂ˝parnĂku K2 (S3)","group":"422223b4.80744c","order":3,"width":"2","height":"2","gtype":"gage","title":" <center><b>Teplota vzduchu do vĂ˝parnĂku (S3)</></center> ","label":"°C","format":"{{payload.TEMPERATURE.s3.values[1]}}","min":"-30","max":"-10","colors":["#00b500","#e6e600","#ca3838"],"seg1":"-21","seg2":"-15","x":737,"y":333,"wires":[]},{"id":"13f5b391.f2f384","type":"ui_chart","z":"3ab1fcde.51baf4","name":"","group":"afc0e610.90eeb8","order":6,"width":0,"height":0,"label":"PRĹ®BÄšH TEPLOT SEKCE K1 [°C]","chartType":"line","legend":"true","xformat":"HH:mm","interpolate":"bezier","nodata":"ÄŤekánĂ na staĹľenĂ prvotnĂch dat","dot":false,"ymin":"-27","ymax":"-15","removeOlder":"24","removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":1143,"y":666,"wires":[[],[]]},{"id":"444398d8.8a04e","type":"change","z":"3ab1fcde.51baf4","name":"K1 S2","rules":[{"t":"set","p":"topic","pt":"msg","to":"S2","tot":"str"},{"t":"set","p":"timestamp","pt":"msg","to":"","tot":"date"},{"t":"set","p":"payload","pt":"msg","to":"payload.TEMPERATURE.s2.values[0]","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":602,"y":790,"wires":[[]]},{"id":"692559ed.8b98b","type":"change","z":"3ab1fcde.51baf4","name":"K1 vstĹ™ikovacĂ teplota","rules":[{"t":"set","p":"topic","pt":"msg","to":"vstĹ™ikovacĂ teplota","tot":"str"},{"t":"set","p":"timestamp","pt":"msg","to":"","tot":"date"},{"t":"set","p":"payload","pt":"msg","to":"payload.TEMPERATURE.evaptemp.values[0]","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":652,"y":630,"wires":[[]]},{"id":"ba11a325.7d07b","type":"change","z":"3ab1fcde.51baf4","name":"K1 S5 (teplota vĂ˝parnĂku)","rules":[{"t":"set","p":"topic","pt":"msg","to":"teplota vĂ˝parnĂku","tot":"str"},{"t":"set","p":"timestamp","pt":"msg","to":"","tot":"date"},{"t":"set","p":"payload","pt":"msg","to":"payload.TEMPERATURE.s5.values[0]","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":662,"y":670,"wires":[["13f5b391.f2f384"]]},{"id":"4a0825fc.db2434","type":"change","z":"3ab1fcde.51baf4","name":"K1 S4 (vzduch z vĂ˝parnĂku)","rules":[{"t":"set","p":"topic","pt":"msg","to":"vzduch z vĂ˝parnĂku (S4)","tot":"str"},{"t":"set","p":"timestamp","pt":"msg","to":"","tot":"date"},{"t":"set","p":"payload","pt":"msg","to":"payload.TEMPERATURE.s4.values[0]","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":672,"y":710,"wires":[["13f5b391.f2f384"]]},{"id":"7d2bee4a.02fcb","type":"change","z":"3ab1fcde.51baf4","name":"K1 S3 (vzduch do vĂ˝parnĂku)","rules":[{"t":"set","p":"topic","pt":"msg","to":"vzduch do vĂ˝parnĂku (S3)","tot":"str"},{"t":"set","p":"timestamp","pt":"msg","to":"","tot":"date"},{"t":"set","p":"payload","pt":"msg","to":"payload.TEMPERATURE.s3.values[0]","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":672,"y":750,"wires":[["13f5b391.f2f384"]]},{"id":"3efab90d.bd1b2e","type":"change","z":"3ab1fcde.51baf4","name":"K2 S2","rules":[{"t":"set","p":"topic","pt":"msg","to":"S2","tot":"str"},{"t":"set","p":"timestamp","pt":"msg","to":"","tot":"date"},{"t":"set","p":"payload","pt":"msg","to":"payload.TEMPERATURE.s2.values[1]","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":598,"y":993,"wires":[[]]},{"id":"9c7f4a31.f5411","type":"change","z":"3ab1fcde.51baf4","name":"K2 S3 (vzduch do vĂ˝parnĂku)","rules":[{"t":"set","p":"topic","pt":"msg","to":"vzduch do vĂ˝parnĂku (S3)","tot":"str"},{"t":"set","p":"timestamp","pt":"msg","to":"","tot":"date"},{"t":"set","p":"payload","pt":"msg","to":"payload.TEMPERATURE.s3.values[1]","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":668,"y":955,"wires":[["f2632ea1.31d778"]]},{"id":"d5192b43.bfa9f","type":"change","z":"3ab1fcde.51baf4","name":"K2 S4 (vzduch z vĂ˝parnĂku)","rules":[{"t":"set","p":"topic","pt":"msg","to":"vzduch z vĂ˝parnĂku (S4)","tot":"str"},{"t":"set","p":"timestamp","pt":"msg","to":"","tot":"date"},{"t":"set","p":"payload","pt":"msg","to":"payload.TEMPERATURE.s4.values[1]","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":669,"y":918,"wires":[["f2632ea1.31d778"]]},{"id":"301b4ecb.cfab9a","type":"change","z":"3ab1fcde.51baf4","name":"K2 S5 (teplota vĂ˝parnĂku)","rules":[{"t":"set","p":"topic","pt":"msg","to":"teplota vĂ˝parnĂku","tot":"str"},{"t":"set","p":"timestamp","pt":"msg","to":"","tot":"date"},{"t":"set","p":"payload","pt":"msg","to":"payload.TEMPERATURE.s5.values[1]","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":659,"y":879,"wires":[["f2632ea1.31d778"]]},{"id":"b8f98be8.4846e8","type":"change","z":"3ab1fcde.51baf4","name":"K2 vstĹ™ikovacĂ teplota","rules":[{"t":"set","p":"topic","pt":"msg","to":"vstĹ™ikovacĂ teplota","tot":"str"},{"t":"set","p":"timestamp","pt":"msg","to":"","tot":"date"},{"t":"set","p":"payload","pt":"msg","to":"payload.TEMPERATURE.evaptemp.values[1]","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":650,"y":841,"wires":[[]]},{"id":"f2632ea1.31d778","type":"ui_chart","z":"3ab1fcde.51baf4","name":"","group":"422223b4.80744c","order":6,"width":0,"height":0,"label":"PRĹ®BÄšH TEPLOT SEKCE K2 [°C]","chartType":"line","legend":"true","xformat":"HH:mm","interpolate":"bezier","nodata":"ÄŤekánĂ na staĹľenĂ prvotnĂch dat","dot":false,"ymin":"-27","ymax":"-15","removeOlder":"24","removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":1152,"y":910,"wires":[[],[]]},{"id":"3ca7e298.69e81e","type":"ui_gauge","z":"3ab1fcde.51baf4","name":"Tlak na vstĹ™ik. ventilu K1","group":"afc0e610.90eeb8","order":2,"width":"2","height":"2","gtype":"gage","title":"<b> <center>Tlak na vstĹ™ik. ventilu</center> </b>","label":"bar","format":"{{payload.AKV.evaporationpress.values[0]}}","min":0,"max":"4","colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":707,"y":133,"wires":[]},{"id":"799e8f8b.c89288","type":"ui_gauge","z":"3ab1fcde.51baf4","name":"Tlak na vstĹ™ik. ventilu K2","group":"422223b4.80744c","order":2,"width":"2","height":"2","gtype":"gage","title":"<b> <center>Tlak na vstĹ™ik. ventilu</center> </b>","label":"bar","format":"{{payload.AKV.evaporationpress.values[1]}}","min":0,"max":"4","colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":700,"y":298,"wires":[]},{"id":"f78715bf.c7adb","type":"ui_gauge","z":"3ab1fcde.51baf4","name":"OtevĹ™enĂ vstĹ™ik. ventilu K1","group":"afc0e610.90eeb8","order":1,"width":"2","height":"2","gtype":"gage","title":"<b> <center>OtevĹ™enĂ vstĹ™ik. ventilu</center></b>","label":"%","format":"{{payload.AKV.akvopeningdegree.values[0]}}","min":0,"max":"100","colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":707,"y":92,"wires":[]},{"id":"c278a115.7fd18","type":"ui_gauge","z":"3ab1fcde.51baf4","name":"OtevĹ™enĂ vstĹ™ik. ventilu K2","group":"422223b4.80744c","order":1,"width":"2","height":"2","gtype":"gage","title":"<b> <center>OtevĹ™enĂ vstĹ™ik. ventilu</center></b>","label":"%","format":"{{payload.AKV.akvopeningdegree.values[1]}}","min":0,"max":"100","colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":705,"y":257,"wires":[]},{"id":"e921eafe.03f0c8","type":"inject","z":"3ab1fcde.51baf4","name":"NulovánĂ grafĹŻ","topic":"","payload":"[]","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":952,"y":810,"wires":[["13f5b391.f2f384","f2632ea1.31d778"]]},{"id":"d42bdd02.3ff0d","type":"mqtt in","z":"3ab1fcde.51baf4","name":"","topic":"konecchlumska/gauges/","qos":"2","broker":"6f2e24e1.6bb3ec","x":105,"y":212,"wires":[["1332fdb9.2509d2"]]},{"id":"69269ef1.6a1ab8","type":"debug","z":"3ab1fcde.51baf4","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":378,"y":51,"wires":[]},{"id":"1332fdb9.2509d2","type":"json","z":"3ab1fcde.51baf4","name":"","property":"payload","action":"","pretty":false,"x":298,"y":211,"wires":[["69269ef1.6a1ab8","f78715bf.c7adb","3ca7e298.69e81e","4ebbc12a.cf926","b6d1556.b0702a8","799e8f8b.c89288","c278a115.7fd18","fdc3fb2d.faf798","3d1b852a.fcef8a","49ca04e.918c8fc"]]},{"id":"fdc3fb2d.faf798","type":"switch","z":"3ab1fcde.51baf4","name":"ventilátory K1","property":"payload.FAN.fanrelaystate.values[0]","propertyType":"msg","rules":[{"t":"eq","v":"0","vt":"num"},{"t":"eq","v":"1","vt":"num"}],"checkall":"true","repair":false,"outputs":2,"x":679,"y":48,"wires":[["281712e6.3e36ae"],["a68e4dda.6a528"]]},{"id":"a68e4dda.6a528","type":"change","z":"3ab1fcde.51baf4","name":"Ventilátory K1 zapnuty","rules":[{"t":"set","p":"payload","pt":"msg","to":"<center> <font size=\"3\">Ventilátory<br/>vĂ˝parnĂku<br/>zapnuty</font> </center> <br/> <font color=\"grey\"> <i class=\"fa fa-asterisk fa-spin fa-5x\"></i> <i class=\"fa fa-asterisk fa-spin fa-5x\"></i> </font>","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":975,"y":59,"wires":[["26c46504.80a99a"]]},{"id":"281712e6.3e36ae","type":"change","z":"3ab1fcde.51baf4","name":"ventilátory K1 vypnuty","rules":[{"t":"set","p":"payload","pt":"msg","to":"<center> <font size=\"3\">Ventilátory<br/>vĂ˝parnĂku<br/>vypnuty</font> </center> <br/> <font color=\"grey\"> <i class=\"fa fa-asterisk fa-5x\"></i> <i class=\"fa fa-asterisk fa-5x\"></i> </font>","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":977,"y":20,"wires":[["26c46504.80a99a"]]},{"id":"26c46504.80a99a","type":"ui_text","z":"3ab1fcde.51baf4","group":"afc0e610.90eeb8","order":4,"width":"2","height":"2","name":"VRTULE K1","label":"","format":"{{msg.payload}}","layout":"col-center","x":1240,"y":44,"wires":[]},{"id":"3d1b852a.fcef8a","type":"switch","z":"3ab1fcde.51baf4","name":"ventilátory K2","property":"payload.FAN.fanrelaystate.values[1]","propertyType":"msg","rules":[{"t":"eq","v":"0","vt":"num"},{"t":"eq","v":"1","vt":"num"}],"checkall":"true","repair":false,"outputs":2,"x":685,"y":401,"wires":[["c387a30e.40934"],["43e4737b.ac6fcc"]]},{"id":"c387a30e.40934","type":"change","z":"3ab1fcde.51baf4","name":"ventilátory K2 vypnuty","rules":[{"t":"set","p":"payload","pt":"msg","to":"<center> <font size=\"3\">Ventilátory<br/>vĂ˝parnĂku<br/>vypnuty</font> </center> <br/> <font color=\"grey\"> <i class=\"fa fa-asterisk fa-5x\"></i> <i class=\"fa fa-asterisk fa-5x\"></i> </font>","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":983,"y":373,"wires":[["8f2aac1f.034de"]]},{"id":"43e4737b.ac6fcc","type":"change","z":"3ab1fcde.51baf4","name":"ventilátory K2 zapnuty","rules":[{"t":"set","p":"payload","pt":"msg","to":"<center> <font size=\"3\">Ventilátory<br/>vĂ˝parnĂku<br/>zapnuty</font> </center> <br/> <font color=\"grey\"> <i class=\"fa fa-asterisk fa-spin fa-5x\"></i> <i class=\"fa fa-asterisk fa-spin fa-5x\"></i> </font>","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":981,"y":412,"wires":[["8f2aac1f.034de"]]},{"id":"8f2aac1f.034de","type":"ui_text","z":"3ab1fcde.51baf4","group":"422223b4.80744c","order":4,"width":"2","height":"2","name":"VRTULE K2","label":"","format":"{{msg.payload}}","layout":"col-center","x":1246,"y":397,"wires":[]},{"id":"a4637f88.9b0bf","type":"ui_template","z":"3ab1fcde.51baf4","group":"afc0e610.90eeb8","name":"","order":5,"width":"0","height":"0","format":"<style type=\"text/css\">\ntable.darkTable {\n font-family: Arial, Helvetica, sans-serif;\n border: 1px solid #CFCFCF;\n background-color: #343434\n text-align: center;\n}\ntable.darkTable td, table.darkTable th {\n border: 1px solid #CFCFCF;\n padding: 3px 2px;\n}\ntable.darkTable tbody td {\n font-size: 13px;\n color: #E6E6E6;\n}\ntable.darkTable tfoot td {\n font-size: 12px;\n}\n@media screen and (max-width: 767px) {.tg {width: auto !important;}.tg col {width: auto !important;}.tg-wrap {overflow-x: auto;-webkit-overflow-scrolling: touch;margin: 0px;}}\n</style>\n\n<table class=\"darkTable\">\n<tbody>\n<tr>\n<td>d21</td>\n<td>V AK-CC550A je nastavena funkce adaptivního ovládání na reĹľim:</td>\n<td>{{msg.payload.DEFROST.adaptivedefrost.values[0]}}</td>\n</tr>\n<tr>\n<td>U01</td>\n<td>Aktuální stav adptivního odtávání:</td>\n<td>{{msg.payload.DEFROST.adstate.values[0]}}</td>\n</tr>\n</tbody>\n</table>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1046,"y":185,"wires":[[]]},{"id":"49ca04e.918c8fc","type":"function","z":"3ab1fcde.51baf4","name":"nastavenĂ textĹŻ stav adapt. odtávánĂ","func":"\nswitch (msg.payload.DEFROST.adaptivedefrost.values[0]) {\n\ncase 0 : \n msg.payload.DEFROST.adaptivedefrost.values[0] = \"0 (nenĂ aktivováno).\";\n break;\ncase 1 : \n msg.payload.DEFROST.adaptivedefrost.values[0] = \"1 (nenĂ aktivováno, v pĹ™ĂpadÄ› zjištÄ›nĂ námrazy se aktivuje alarm)\";\n break;\ncase 2 : \n msg.payload.DEFROST.adaptivedefrost.values[0] = \"2 (povoleno zrušenĂ dennĂho ÄŤasovĂ©ho plánu odtávánĂ. NoÄŤnĂ ÄŤasovĂ˝ plán je zachován)\";\n break;\ncase 3 : \n msg.payload.DEFROST.adaptivedefrost.values[0] = \"3 (povoleno zrušenĂ dennĂho i noÄŤnĂho ÄŤasovĂ©ho plánu odtávánĂ)\";\n break;\ncase 4 : \n msg.payload.DEFROST.adaptivedefrost.values[0] = \"4 (všechny ÄŤasovĂ© plány se uskuteÄŤnĂ + dodateÄŤnĂ© odtávánĂ, pokud vznikne poĹľadavek).\";\n break;\n}\nswitch (msg.payload.DEFROST.adaptivedefrost.values[1]) {\n\ncase 0 : \n msg.payload.DEFROST.adaptivedefrost.values[1] = \"0 (nenĂ aktivováno)\";\n break;\ncase 1 : \n msg.payload.DEFROST.adaptivedefrost.values[1] = \"1 (nenĂ aktivováno, v pĹ™ĂpadÄ› zjištÄ›nĂ námrazy se aktivuje alarm)\";\n break;\ncase 2 : \n msg.payload.DEFROST.adaptivedefrost.values[1] = \"2 (povoleno zrušenĂ dennĂho ÄŤasovĂ©ho plánu odtávánĂ. NoÄŤnĂ ÄŤasovĂ˝ plán je zachován)\";\n break;\ncase 3 : \n msg.payload.DEFROST.adaptivedefrost.values[1] = \"3 (povoleno zrušenĂ dennĂho i noÄŤnĂho ÄŤasovĂ©ho plánu odtávánĂ)\";\n break;\ncase 4 : \n msg.payload.DEFROST.adaptivedefrost.values[1] = \"4 (všechny ÄŤasovĂ© plány se uskuteÄŤnĂ + dodateÄŤnĂ© odtávánĂ, pokud vznikne poĹľadavek)\";\n break;\n}\n\nswitch (msg.payload.DEFROST.adstate.values[0]) {\n\ncase 0 : \n msg.payload.DEFROST.adstate.values[0] = \"0 (adaptivnĂ odtávánĂ nenĂ aktivováno)\";\n break;\ncase 1 : \n msg.payload.DEFROST.adstate.values[0] = \"1 (chybnÄ› zapojeny senzory S3 a S4)\";\n break;\ncase 2 : \n msg.payload.DEFROST.adstate.values[0] = \"2 (probĂhá ladÄ›nĂ adaptivnĂho odtávánĂ)\";\n break;\ncase 3 : \n msg.payload.DEFROST.adstate.values[0] = \"3 (vĂ˝parnĂk OK)\";\n break;\ncase 4 : \n msg.payload.DEFROST.adstate.values[0] = \"4 (mĂrná námraza vĂ˝parnĂku)\";\n break;\ncase 5 : \n msg.payload.DEFROST.adstate.values[0] = \"5 (stĹ™ednĂ námraza vĂ˝parnĂku)\";\n break;\ncase 6 : \n msg.payload.DEFROST.adstate.values[0] = \"6 (silná námraza vĂ˝parnĂku\";\n break;\n}\n\nswitch (msg.payload.DEFROST.adstate.values[1]) {\n\ncase 0 : \n msg.payload.DEFROST.adstate.values[1] = \"0 (adaptivnĂ odtávánĂ nenĂ aktivováno)\";\n break;\ncase 1 : \n msg.payload.DEFROST.adstate.values[1] = \"1 (chybnÄ› zapojeny senzory S3 a S4)\";\n break;\ncase 2 : \n msg.payload.DEFROST.adstate.values[1] = \"2 (probĂhá ladÄ›nĂ adaptivnĂho odtávánĂ)\";\n break;\ncase 3 : \n msg.payload.DEFROST.adstate.values[1] = \"3 (vĂ˝parnĂk OK)\";\n break;\ncase 4 : \n msg.payload.DEFROST.adstate.values[1] = \"4 (mĂrná námraza vĂ˝parnĂku)\";\n break;\ncase 5 : \n msg.payload.DEFROST.adstate.values[1] = \"5 (stĹ™ednĂ námraza vĂ˝parnĂku)\";\n break;\ncase 6 : \n msg.payload.DEFROST.adstate.values[1] = \"6 (silná námraza vĂ˝parnĂku\";\n break;\n}\n\nreturn (msg);","outputs":1,"noerr":0,"x":748,"y":219,"wires":[["a4637f88.9b0bf","dfb1e2eb.a6a35"]]},{"id":"dfb1e2eb.a6a35","type":"ui_template","z":"3ab1fcde.51baf4","group":"422223b4.80744c","name":"","order":5,"width":0,"height":0,"format":"<style type=\"text/css\">\ntable.darkTable {\n font-family: Arial, Helvetica, sans-serif;\n border: 1px solid #CFCFCF;\n background-color: #343434\n text-align: center;\n}\ntable.darkTable td, table.darkTable th {\n border: 1px solid #CFCFCF;\n padding: 3px 2px;\n}\ntable.darkTable tbody td {\n font-size: 13px;\n color: #E6E6E6;\n}\ntable.darkTable tfoot td {\n font-size: 12px;\n}\n@media screen and (max-width: 767px) {.tg {width: auto !important;}.tg col {width: auto !important;}.tg-wrap {overflow-x: auto;-webkit-overflow-scrolling: touch;margin: 0px;}}\n</style>\n\n<table class=\"darkTable\">\n<tbody>\n<tr>\n<td>d21</td>\n<td>V AK-CC550A je nastavena funkce adaptivního ovládání na reĹľim:</td>\n<td>{{msg.payload.DEFROST.adaptivedefrost.values[1]}}</td>\n</tr>\n<tr>\n<td>U01</td>\n<td>Aktuální stav adptivního odtávání:</td>\n<td>{{msg.payload.DEFROST.adstate.values[1]}}</td>\n</tr>\n</tbody>\n</table>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1045,"y":235,"wires":[[]]},{"id":"e854861.b81eb78","type":"e-mail","z":"3ab1fcde.51baf4","server":"smtp.gmail.com","port":"465","secure":true,"name":"petr.jakes.tpc@gmail.com, rene.plicka@gmail.com","dname":"mail sender","x":648.5,"y":459,"wires":[]},{"id":"27549c38.bb7204","type":"inject","z":"3ab1fcde.51baf4","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":428,"y":451,"wires":[["e854861.b81eb78"]]},{"id":"aa207717.9e774","type":"inject","z":"3ab1fcde.51baf4","name":"","topic":"","payload":"{\"ERRORS\":{\"adaptive_defrost_alarm\":{\"pnuRegisterNo\":20019,\"values\":[0,1]},\"TESTdefrost_alarm\":{\"pnuRegisterNo\":20019,\"values\":[0,1]}},\"TEMPERATURE\":{\"s3\":{\"pnuRegisterNo\":2530,\"values\":[-22.5,-22.1]},\"s2\":{\"pnuRegisterNo\":2537,\"values\":[-25.2,-25.6]},\"evaptemp\":{\"pnuRegisterNo\":2544,\"values\":[-30.8,-31.6]},\"s5\":{\"pnuRegisterNo\":1011,\"values\":[-24.7,-24.9]},\"s4\":{\"pnuRegisterNo\":2531,\"values\":[-24.9,-24.4]}},\"ENGINE_TIMES\":{\"minofftime\":{\"pnuRegisterNo\":501,\"values\":[5,5]},\"minontime\":{\"pnuRegisterNo\":500,\"values\":[15,15]}},\"DEFROST\":{\"adaptivedefrost\":{\"pnuRegisterNo\":1029,\"values\":[3,3]},\"adstate\":{\"pnuRegisterNo\":2628,\"values\":[2,2]},\"defstart\":{\"pnuRegisterNo\":1013,\"values\":[0,0]},\"fanstartdel\":{\"pnuRegisterNo\":1007,\"values\":[0,0]},\"defrostinterval\":{\"pnuRegisterNo\":1002,\"values\":[0,0]},\"maxdefrosttime\":{\"pnuRegisterNo\":1003,\"values\":[60,60]},\"fanstarttemp\":{\"pnuRegisterNo\":1006,\"values\":[-5,-5]},\"dripofftime\":{\"pnuRegisterNo\":1005,\"values\":[0,0]},\"defroststart\":{\"pnuRegisterNo\":1013,\"values\":[0,0]},\"defrelay\":{\"pnuRegisterNo\":2512,\"values\":[0,0]},\"defroststoptemp\":{\"pnuRegisterNo\":1001,\"values\":[30,30]},\"lastdefrosttime\":{\"pnuRegisterNo\":2508,\"values\":[15,20]}},\"AKV\":{\"s3\":{\"pnuRegisterNo\":2530,\"values\":[-22.5,-22.1]},\"evaporationpress\":{\"pnuRegisterNo\":2543,\"values\":[0.6,0.5]},\"akvopeningdegree\":{\"pnuRegisterNo\":2528,\"values\":[76,74]},\"coolingrelleystate\":{\"pnuRegisterNo\":2510,\"values\":[1,1]},\"evaporationtemp\":{\"pnuRegisterNo\":2544,\"values\":[-29.3,-30.2]}},\"COOLING\":{\"thermostatmode\":{\"pnuRegisterNo\":124,\"values\":[1,1]},\"di_1_status\":{\"pnuRegisterNo\":2002,\"values\":[1,1]}},\"FAN\":{\"fanrelaystate\":{\"pnuRegisterNo\":2511,\"values\":[1,1]},\"fanpulsemode\":{\"pnuRegisterNo\":1506,\"values\":[1,1]},\"fanpulsecycle\":{\"pnuRegisterNo\":1507,\"values\":[5,5]},\"fanonpercentage\":{\"pnuRegisterNo\":1508,\"values\":[50,50]}},\"OTHERS\":{\"di2_status\":{\"pnuRegisterNo\":2556,\"values\":[0,0]},\"di1_status\":{\"pnuRegisterNo\":2002,\"values\":[1,1]},\"drip_of_time\":{\"pnuRegisterNo\":1005,\"values\":[0,0]},\"di1_config\":{\"pnuRegisterNo\":2001,\"values\":[5,5]},\"fan_start_delay\":{\"pnuRegisterNo\":1007,\"values\":[0,0]},\"di2_config\":{\"pnuRegisterNo\":2055,\"values\":[0,0]}}}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":86.5,"y":573,"wires":[["cb4ccef4.4270a8"]]},{"id":"80397922.95592","type":"inject","z":"3ab1fcde.51baf4","name":"","topic":"","payload":"{\"ERRORS\":{},\"TEMPERATURE\":{\"s3\":{\"pnuRegisterNo\":2530,\"values\":[-22.5,-22.1]},\"s2\":{\"pnuRegisterNo\":2537,\"values\":[-25.2,-25.6]},\"evaptemp\":{\"pnuRegisterNo\":2544,\"values\":[-30.8,-31.6]},\"s5\":{\"pnuRegisterNo\":1011,\"values\":[-24.7,-24.9]},\"s4\":{\"pnuRegisterNo\":2531,\"values\":[-24.9,-24.4]}},\"ENGINE_TIMES\":{\"minofftime\":{\"pnuRegisterNo\":501,\"values\":[5,5]},\"minontime\":{\"pnuRegisterNo\":500,\"values\":[15,15]}},\"DEFROST\":{\"adaptivedefrost\":{\"pnuRegisterNo\":1029,\"values\":[3,3]},\"adstate\":{\"pnuRegisterNo\":2628,\"values\":[2,2]},\"defstart\":{\"pnuRegisterNo\":1013,\"values\":[0,0]},\"fanstartdel\":{\"pnuRegisterNo\":1007,\"values\":[0,0]},\"defrostinterval\":{\"pnuRegisterNo\":1002,\"values\":[0,0]},\"maxdefrosttime\":{\"pnuRegisterNo\":1003,\"values\":[60,60]},\"fanstarttemp\":{\"pnuRegisterNo\":1006,\"values\":[-5,-5]},\"dripofftime\":{\"pnuRegisterNo\":1005,\"values\":[0,0]},\"defroststart\":{\"pnuRegisterNo\":1013,\"values\":[0,0]},\"defrelay\":{\"pnuRegisterNo\":2512,\"values\":[0,0]},\"defroststoptemp\":{\"pnuRegisterNo\":1001,\"values\":[30,30]},\"lastdefrosttime\":{\"pnuRegisterNo\":2508,\"values\":[15,20]}},\"AKV\":{\"s3\":{\"pnuRegisterNo\":2530,\"values\":[-22.5,-22.1]},\"evaporationpress\":{\"pnuRegisterNo\":2543,\"values\":[0.6,0.5]},\"akvopeningdegree\":{\"pnuRegisterNo\":2528,\"values\":[76,74]},\"coolingrelleystate\":{\"pnuRegisterNo\":2510,\"values\":[1,1]},\"evaporationtemp\":{\"pnuRegisterNo\":2544,\"values\":[-29.3,-30.2]}},\"COOLING\":{\"thermostatmode\":{\"pnuRegisterNo\":124,\"values\":[1,1]},\"di_1_status\":{\"pnuRegisterNo\":2002,\"values\":[1,1]}},\"FAN\":{\"fanrelaystate\":{\"pnuRegisterNo\":2511,\"values\":[1,1]},\"fanpulsemode\":{\"pnuRegisterNo\":1506,\"values\":[1,1]},\"fanpulsecycle\":{\"pnuRegisterNo\":1507,\"values\":[5,5]},\"fanonpercentage\":{\"pnuRegisterNo\":1508,\"values\":[50,50]}},\"OTHERS\":{\"di2_status\":{\"pnuRegisterNo\":2556,\"values\":[0,0]},\"di1_status\":{\"pnuRegisterNo\":2002,\"values\":[1,1]},\"drip_of_time\":{\"pnuRegisterNo\":1005,\"values\":[0,0]},\"di1_config\":{\"pnuRegisterNo\":2001,\"values\":[5,5]},\"fan_start_delay\":{\"pnuRegisterNo\":1007,\"values\":[0,0]},\"di2_config\":{\"pnuRegisterNo\":2055,\"values\":[0,0]}}}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":88,"y":530,"wires":[["cb4ccef4.4270a8"]]},{"id":"cb4ccef4.4270a8","type":"function","z":"3ab1fcde.51baf4","name":"test payload for ERROR messages","func":"// AK CC-550 was returning ADalarm PNU 20019 \n// without any obvious problems in the deep freeze store\n// so delete this error first to not be sent \n// by e-mail\ndelete msg.payload.ERRORS.adaptive_defrost_alarm\nif (Object.keys(msg.payload.ERRORS).length >>> 0){\n msg.payload = msg.payload.ERRORS\n msg.topic = \"chyba mrazĂrny\"\n return msg;\n}\n\n","outputs":1,"noerr":0,"x":389,"y":530,"wires":[["1ec476f3.7507e9","e854861.b81eb78"]]},{"id":"1ec476f3.7507e9","type":"debug","z":"3ab1fcde.51baf4","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":622,"y":511,"wires":[]},{"id":"6f2e24e1.6bb3ec","type":"mqtt-broker","z":"","name":"test Mosquito","broker":"test.mosquitto.org","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"afc0e610.90eeb8","type":"ui_group","z":"","name":"Sekce K1","tab":"4d73f6fd.705e4","order":1,"disp":true,"width":"8","collapse":true},{"id":"422223b4.80744c","type":"ui_group","z":"","name":"Sekce K2","tab":"4d73f6fd.705e4","order":2,"disp":true,"width":"8","collapse":false},{"id":"4d73f6fd.705e4","type":"ui_tab","z":"","name":"MrazĂrna pĹ™ehledy","icon":" 'check'","order":1,"disabled":false,"hidden":false}]
I was just astonished by the charm of datatables.
I can, of course, go an other way when you thing incorporating datatables is to complicated for me as a total beginner in javascripting...
Sorry, as I don't use Dashboard except for very simple things, I can't really help any more.
I don't think it would take you too long to convert all that to uibuilder. Though as things stand, you would have to find your own gauge and chart addins for whatever framework/library you want to use. Of course, if that code is only part of your current Dashboard, then you would be facing a lot of work to translate it.
Gauges and charts are next on my list of things to try for my new home dashboard (using uibuilder) but they haven't been a priority since I use Grafana for data-heavy dashboards at the moment. There is another thread by me detailing my home dashboard where I show how to use VueJS and bootstrap-vue (which has a rather nice table component).
Thank you for your help. I will try to study
never the ideal solution but a simple delay to allow the library to load from cdn helps.
<script type="text/javascript">
setTimeout(function() {
$('#example').dataTable();
},100 );
</script>
Another way would be to actually download that library and host is locally in the flow (holding it in another ui_template set to Add to section
1 Like
Ah, thanks Dave, I knew you'd have some other options. Switching to uibuilder does seem a bit excessive in this case.
Actually thinking about it the way to do it is to split what was there.
Add the library in a ui_template in the head - so then the on.ready will work.
[{"id":"709fca12.c3cf54","type":"ui_template","z":"82738787.0e0338","group":"3fe3d1e3.c6d01e","name":"Head","order":3,"width":"16","height":"17","format":"\n<script type=\"text/javascript\" charset=\"utf8\" src=\"https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js\"></script>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":170,"y":960,"wires":[[]]},{"id":"37029ff2.ffb3a","type":"ui_template","z":"82738787.0e0338","group":"865720c5.67171","name":"Table","order":3,"width":"16","height":"17","format":" <table id=\"example\" class=\"display\" style=\"width:100%\">\n <thead>\n <tr>\n <th>Name</th>\n <th>Position</th>\n <th>Office</th>\n <th>Age</th>\n <th>Start date</th>\n <th>Salary</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Tiger Nixon</td>\n <td>System Architect</td>\n <td>Edinburgh</td>\n <td>61</td>\n <td>2011/04/25</td>\n <td>$320,800</td>\n </tr>\n <tr>\n <td>Garrett Winters</td>\n <td>Accountant</td>\n <td>Tokyo</td>\n <td>63</td>\n <td>2011/07/25</td>\n <td>$170,750</td>\n </tr>\n <tr>\n <td>Ashton Cox</td>\n <td>Junior Technical Author</td>\n <td>San Francisco</td>\n <td>66</td>\n <td>2009/01/12</td>\n <td>$86,000</td>\n </tr>\n <tr>\n <td>Cedric Kelly</td>\n <td>Senior Javascript Developer</td>\n <td>Edinburgh</td>\n <td>22</td>\n <td>2012/03/29</td>\n <td>$433,060</td>\n </tr>\n <tr>\n <td>Airi Satou</td>\n <td>Accountant</td>\n <td>Tokyo</td>\n <td>33</td>\n <td>2008/11/28</td>\n <td>$162,700</td>\n </tr>\n <tr>\n <td>Brielle Williamson</td>\n <td>Integration Specialist</td>\n <td>New York</td>\n <td>61</td>\n <td>2012/12/02</td>\n <td>$372,000</td>\n </tr>\n <tr>\n <td>Herrod Chandler</td>\n <td>Sales Assistant</td>\n <td>San Francisco</td>\n <td>59</td>\n <td>2012/08/06</td>\n <td>$137,500</td>\n </tr>\n <tr>\n <td>Rhona Davidson</td>\n <td>Integration Specialist</td>\n <td>Tokyo</td>\n <td>55</td>\n <td>2010/10/14</td>\n <td>$327,900</td>\n </tr>\n <tr>\n <td>Colleen Hurst</td>\n <td>Javascript Developer</td>\n <td>San Francisco</td>\n <td>39</td>\n <td>2009/09/15</td>\n <td>$205,500</td>\n </tr>\n <tr>\n <td>Sonya Frost</td>\n <td>Software Engineer</td>\n <td>Edinburgh</td>\n <td>23</td>\n <td>2008/12/13</td>\n <td>$103,600</td>\n </tr>\n <tr>\n <td>Jena Gaines</td>\n <td>Office Manager</td>\n <td>London</td>\n <td>30</td>\n <td>2008/12/19</td>\n <td>$90,560</td>\n </tr>\n <tr>\n <td>Quinn Flynn</td>\n <td>Support Lead</td>\n <td>Edinburgh</td>\n <td>22</td>\n <td>2013/03/03</td>\n <td>$342,000</td>\n </tr>\n <tr>\n <td>Charde Marshall</td>\n <td>Regional Director</td>\n <td>San Francisco</td>\n <td>36</td>\n <td>2008/10/16</td>\n <td>$470,600</td>\n </tr>\n <tr>\n <td>Haley Kennedy</td>\n <td>Senior Marketing Designer</td>\n <td>London</td>\n <td>43</td>\n <td>2012/12/18</td>\n <td>$313,500</td>\n </tr>\n <tr>\n <td>Tatyana Fitzpatrick</td>\n <td>Regional Director</td>\n <td>London</td>\n <td>19</td>\n <td>2010/03/17</td>\n <td>$385,750</td>\n </tr>\n <tr>\n <td>Michael Silva</td>\n <td>Marketing Designer</td>\n <td>London</td>\n <td>66</td>\n <td>2012/11/27</td>\n <td>$198,500</td>\n </tr>\n <tr>\n <td>Paul Byrd</td>\n <td>Chief Financial Officer (CFO)</td>\n <td>New York</td>\n <td>64</td>\n <td>2010/06/09</td>\n <td>$725,000</td>\n </tr>\n <tr>\n <td>Gloria Little</td>\n <td>Systems Administrator</td>\n <td>New York</td>\n <td>59</td>\n <td>2009/04/10</td>\n <td>$237,500</td>\n </tr>\n <tr>\n <td>Bradley Greer</td>\n <td>Software Engineer</td>\n <td>London</td>\n <td>41</td>\n <td>2012/10/13</td>\n <td>$132,000</td>\n </tr>\n <tr>\n <td>Dai Rios</td>\n <td>Personnel Lead</td>\n <td>Edinburgh</td>\n <td>35</td>\n <td>2012/09/26</td>\n <td>$217,500</td>\n </tr>\n <tr>\n <td>Jenette Caldwell</td>\n <td>Development Lead</td>\n <td>New York</td>\n <td>30</td>\n <td>2011/09/03</td>\n <td>$345,000</td>\n </tr>\n <tr>\n <td>Yuri Berry</td>\n <td>Chief Marketing Officer (CMO)</td>\n <td>New York</td>\n <td>40</td>\n <td>2009/06/25</td>\n <td>$675,000</td>\n </tr>\n <tr>\n <td>Caesar Vance</td>\n <td>Pre-Sales Support</td>\n <td>New York</td>\n <td>21</td>\n <td>2011/12/12</td>\n <td>$106,450</td>\n </tr>\n <tr>\n <td>Doris Wilder</td>\n <td>Sales Assistant</td>\n <td>Sidney</td>\n <td>23</td>\n <td>2010/09/20</td>\n <td>$85,600</td>\n </tr>\n <tr>\n <td>Angelica Ramos</td>\n <td>Chief Executive Officer (CEO)</td>\n <td>London</td>\n <td>47</td>\n <td>2009/10/09</td>\n <td>$1,200,000</td>\n </tr>\n <tr>\n <td>Gavin Joyce</td>\n <td>Developer</td>\n <td>Edinburgh</td>\n <td>42</td>\n <td>2010/12/22</td>\n <td>$92,575</td>\n </tr>\n <tr>\n <td>Jennifer Chang</td>\n <td>Regional Director</td>\n <td>Singapore</td>\n <td>28</td>\n <td>2010/11/14</td>\n <td>$357,650</td>\n </tr>\n <tr>\n <td>Brenden Wagner</td>\n <td>Software Engineer</td>\n <td>San Francisco</td>\n <td>28</td>\n <td>2011/06/07</td>\n <td>$206,850</td>\n </tr>\n <tr>\n <td>Fiona Green</td>\n <td>Chief Operating Officer (COO)</td>\n <td>San Francisco</td>\n <td>48</td>\n <td>2010/03/11</td>\n <td>$850,000</td>\n </tr>\n <tr>\n <td>Shou Itou</td>\n <td>Regional Marketing</td>\n <td>Tokyo</td>\n <td>20</td>\n <td>2011/08/14</td>\n <td>$163,000</td>\n </tr>\n <tr>\n <td>Michelle House</td>\n <td>Integration Specialist</td>\n <td>Sidney</td>\n <td>37</td>\n <td>2011/06/02</td>\n <td>$95,400</td>\n </tr>\n <tr>\n <td>Suki Burks</td>\n <td>Developer</td>\n <td>London</td>\n <td>53</td>\n <td>2009/10/22</td>\n <td>$114,500</td>\n </tr>\n <tr>\n <td>Prescott Bartlett</td>\n <td>Technical Author</td>\n <td>London</td>\n <td>27</td>\n <td>2011/05/07</td>\n <td>$145,000</td>\n </tr>\n <tr>\n <td>Gavin Cortez</td>\n <td>Team Leader</td>\n <td>San Francisco</td>\n <td>22</td>\n <td>2008/10/26</td>\n <td>$235,500</td>\n </tr>\n <tr>\n <td>Martena Mccray</td>\n <td>Post-Sales support</td>\n <td>Edinburgh</td>\n <td>46</td>\n <td>2011/03/09</td>\n <td>$324,050</td>\n </tr>\n <tr>\n <td>Unity Butler</td>\n <td>Marketing Designer</td>\n <td>San Francisco</td>\n <td>47</td>\n <td>2009/12/09</td>\n <td>$85,675</td>\n </tr>\n <tr>\n <td>Howard Hatfield</td>\n <td>Office Manager</td>\n <td>San Francisco</td>\n <td>51</td>\n <td>2008/12/16</td>\n <td>$164,500</td>\n </tr>\n <tr>\n <td>Hope Fuentes</td>\n <td>Secretary</td>\n <td>San Francisco</td>\n <td>41</td>\n <td>2010/02/12</td>\n <td>$109,850</td>\n </tr>\n <tr>\n <td>Vivian Harrell</td>\n <td>Financial Controller</td>\n <td>San Francisco</td>\n <td>62</td>\n <td>2009/02/14</td>\n <td>$452,500</td>\n </tr>\n <tr>\n <td>Timothy Mooney</td>\n <td>Office Manager</td>\n <td>London</td>\n <td>37</td>\n <td>2008/12/11</td>\n <td>$136,200</td>\n </tr>\n <tr>\n <td>Jackson Bradshaw</td>\n <td>Director</td>\n <td>New York</td>\n <td>65</td>\n <td>2008/09/26</td>\n <td>$645,750</td>\n </tr>\n <tr>\n <td>Olivia Liang</td>\n <td>Support Engineer</td>\n <td>Singapore</td>\n <td>64</td>\n <td>2011/02/03</td>\n <td>$234,500</td>\n </tr>\n <tr>\n <td>Bruno Nash</td>\n <td>Software Engineer</td>\n <td>London</td>\n <td>38</td>\n <td>2011/05/03</td>\n <td>$163,500</td>\n </tr>\n <tr>\n <td>Sakura Yamamoto</td>\n <td>Support Engineer</td>\n <td>Tokyo</td>\n <td>37</td>\n <td>2009/08/19</td>\n <td>$139,575</td>\n </tr>\n <tr>\n <td>Thor Walton</td>\n <td>Developer</td>\n <td>New York</td>\n <td>61</td>\n <td>2013/08/11</td>\n <td>$98,540</td>\n </tr>\n <tr>\n <td>Finn Camacho</td>\n <td>Support Engineer</td>\n <td>San Francisco</td>\n <td>47</td>\n <td>2009/07/07</td>\n <td>$87,500</td>\n </tr>\n <tr>\n <td>Serge Baldwin</td>\n <td>Data Coordinator</td>\n <td>Singapore</td>\n <td>64</td>\n <td>2012/04/09</td>\n <td>$138,575</td>\n </tr>\n <tr>\n <td>Zenaida Frank</td>\n <td>Software Engineer</td>\n <td>New York</td>\n <td>63</td>\n <td>2010/01/04</td>\n <td>$125,250</td>\n </tr>\n <tr>\n <td>Zorita Serrano</td>\n <td>Software Engineer</td>\n <td>San Francisco</td>\n <td>56</td>\n <td>2012/06/01</td>\n <td>$115,000</td>\n </tr>\n <tr>\n <td>Jennifer Acosta</td>\n <td>Junior Javascript Developer</td>\n <td>Edinburgh</td>\n <td>43</td>\n <td>2013/02/01</td>\n <td>$75,650</td>\n </tr>\n <tr>\n <td>Cara Stevens</td>\n <td>Sales Assistant</td>\n <td>New York</td>\n <td>46</td>\n <td>2011/12/06</td>\n <td>$145,600</td>\n </tr>\n <tr>\n <td>Hermione Butler</td>\n <td>Regional Director</td>\n <td>London</td>\n <td>47</td>\n <td>2011/03/21</td>\n <td>$356,250</td>\n </tr>\n <tr>\n <td>Lael Greer</td>\n <td>Systems Administrator</td>\n <td>London</td>\n <td>21</td>\n <td>2009/02/27</td>\n <td>$103,500</td>\n </tr>\n <tr>\n <td>Jonas Alexander</td>\n <td>Developer</td>\n <td>San Francisco</td>\n <td>30</td>\n <td>2010/07/14</td>\n <td>$86,500</td>\n </tr>\n <tr>\n <td>Shad Decker</td>\n <td>Regional Director</td>\n <td>Edinburgh</td>\n <td>51</td>\n <td>2008/11/13</td>\n <td>$183,000</td>\n </tr>\n <tr>\n <td>Michael Bruce</td>\n <td>Javascript Developer</td>\n <td>Singapore</td>\n <td>29</td>\n <td>2011/06/27</td>\n <td>$183,000</td>\n </tr>\n <tr>\n <td>Donna Snider</td>\n <td>Customer Support</td>\n <td>New York</td>\n <td>27</td>\n <td>2011/01/25</td>\n <td>$112,000</td>\n </tr>\n </tbody>\n <tfoot>\n <tr>\n <th>Name</th>\n <th>Position</th>\n <th>Office</th>\n <th>Age</th>\n <th>Start date</th>\n <th>Salary</th>\n </tr>\n </tfoot>\n </table>\n\n<script type=\"text/javascript\" class=\"init\">\n\n $(document).ready(function() {\n $('#example').dataTable();\n } );\n\n</script> \n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":210,"y":1000,"wires":[[]]},{"id":"3fe3d1e3.c6d01e","type":"ui_group","z":"","name":"Group 1","tab":"466610b4.b6b32","order":1,"disp":true,"width":"16","collapse":true},{"id":"865720c5.67171","type":"ui_group","z":"","name":"Group 1","tab":"484e830d.20c4fc","order":1,"disp":true,"width":"16","collapse":true},{"id":"466610b4.b6b32","type":"ui_tab","z":"","name":"Tabulka","icon":"dashboard","disabled":false,"hidden":false},{"id":"484e830d.20c4fc","type":"ui_tab","z":"","name":"Tabulka","icon":"dashboard","disabled":false,"hidden":false}]
1 Like
Wow. Now I understand the "Template type" "Added to site section" in the Dashboard template node editor.
It works. Thank you.
I have following one more question:
- How/where to change the theme in the table only. I am using dark theme but some elements are not visible because of that (in the attached picture I have highlighted those elements using select.)
One more thing to mention, I have put additional line in the "added to site section" which is causing the theme in above mentioned screen shot.
well you have to override the CSS that is part of the theme - you can do that inline in the main table if you want. (either in the html or script). You would probably need to use the browser developer tools to inspect the page to work out the CSS you need to change.
1 Like
Finally, your suggestion about overriding CSS worked. Putting this style in the "main template node" did the trick.
<style>
body.nr-dashboard-theme md-content md-card {
color: #000000;
}
</style>
[{"id":"fadb2f93.c61ec8","type":"ui_template","z":"171dbdc2.2de1c2","group":"29c72db3.985de2","name":"Head","order":3,"width":"16","height":"17","format":"<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.datatables.net/v/ju-1.12.1/dt-1.10.18/af-2.3.2/b-1.5.4/datatables.min.css\"/>\n \n<script type=\"text/javascript\" src=\"https://cdn.datatables.net/v/ju-1.12.1/dt-1.10.18/af-2.3.2/b-1.5.4/datatables.min.js\"></script>\n\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":636,"y":494,"wires":[[]]},{"id":"2eb129eb.da4e26","type":"ui_template","z":"171dbdc2.2de1c2","group":"917f331.ee040d","name":"Table","order":3,"width":"16","height":"17","format":" <table id=\"example\" class=\"display\" style=\"width:100%\">\n <thead>\n <tr>\n <th>Name</th>\n <th>Position</th>\n <th>Office</th>\n <th>Age</th>\n <th>Start date</th>\n <th>Salary</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Tiger Nixon</td>\n <td>System Architect</td>\n <td>Edinburgh</td>\n <td>61</td>\n <td>2011/04/25</td>\n <td>$320,800</td>\n </tr>\n <tr>\n <td>Garrett Winters</td>\n <td>Accountant</td>\n <td>Tokyo</td>\n <td>63</td>\n <td>2011/07/25</td>\n <td>$170,750</td>\n </tr>\n <tr>\n <td>Ashton Cox</td>\n <td>Junior Technical Author</td>\n <td>San Francisco</td>\n <td>66</td>\n <td>2009/01/12</td>\n <td>$86,000</td>\n </tr>\n <tr>\n <td>Cedric Kelly</td>\n <td>Senior Javascript Developer</td>\n <td>Edinburgh</td>\n <td>22</td>\n <td>2012/03/29</td>\n <td>$433,060</td>\n </tr>\n <tr>\n <td>Airi Satou</td>\n <td>Accountant</td>\n <td>Tokyo</td>\n <td>33</td>\n <td>2008/11/28</td>\n <td>$162,700</td>\n </tr>\n <tr>\n <td>Brielle Williamson</td>\n <td>Integration Specialist</td>\n <td>New York</td>\n <td>61</td>\n <td>2012/12/02</td>\n <td>$372,000</td>\n </tr>\n <tr>\n <td>Herrod Chandler</td>\n <td>Sales Assistant</td>\n <td>San Francisco</td>\n <td>59</td>\n <td>2012/08/06</td>\n <td>$137,500</td>\n </tr>\n <tr>\n <td>Rhona Davidson</td>\n <td>Integration Specialist</td>\n <td>Tokyo</td>\n <td>55</td>\n <td>2010/10/14</td>\n <td>$327,900</td>\n </tr>\n <tr>\n <td>Colleen Hurst</td>\n <td>Javascript Developer</td>\n <td>San Francisco</td>\n <td>39</td>\n <td>2009/09/15</td>\n <td>$205,500</td>\n </tr>\n <tr>\n <td>Sonya Frost</td>\n <td>Software Engineer</td>\n <td>Edinburgh</td>\n <td>23</td>\n <td>2008/12/13</td>\n <td>$103,600</td>\n </tr>\n <tr>\n <td>Jena Gaines</td>\n <td>Office Manager</td>\n <td>London</td>\n <td>30</td>\n <td>2008/12/19</td>\n <td>$90,560</td>\n </tr>\n <tr>\n <td>Quinn Flynn</td>\n <td>Support Lead</td>\n <td>Edinburgh</td>\n <td>22</td>\n <td>2013/03/03</td>\n <td>$342,000</td>\n </tr>\n <tr>\n <td>Charde Marshall</td>\n <td>Regional Director</td>\n <td>San Francisco</td>\n <td>36</td>\n <td>2008/10/16</td>\n <td>$470,600</td>\n </tr>\n <tr>\n <td>Haley Kennedy</td>\n <td>Senior Marketing Designer</td>\n <td>London</td>\n <td>43</td>\n <td>2012/12/18</td>\n <td>$313,500</td>\n </tr>\n <tr>\n <td>Tatyana Fitzpatrick</td>\n <td>Regional Director</td>\n <td>London</td>\n <td>19</td>\n <td>2010/03/17</td>\n <td>$385,750</td>\n </tr>\n <tr>\n <td>Michael Silva</td>\n <td>Marketing Designer</td>\n <td>London</td>\n <td>66</td>\n <td>2012/11/27</td>\n <td>$198,500</td>\n </tr>\n <tr>\n <td>Paul Byrd</td>\n <td>Chief Financial Officer (CFO)</td>\n <td>New York</td>\n <td>64</td>\n <td>2010/06/09</td>\n <td>$725,000</td>\n </tr>\n <tr>\n <td>Gloria Little</td>\n <td>Systems Administrator</td>\n <td>New York</td>\n <td>59</td>\n <td>2009/04/10</td>\n <td>$237,500</td>\n </tr>\n <tr>\n <td>Bradley Greer</td>\n <td>Software Engineer</td>\n <td>London</td>\n <td>41</td>\n <td>2012/10/13</td>\n <td>$132,000</td>\n </tr>\n <tr>\n <td>Dai Rios</td>\n <td>Personnel Lead</td>\n <td>Edinburgh</td>\n <td>35</td>\n <td>2012/09/26</td>\n <td>$217,500</td>\n </tr>\n <tr>\n <td>Jenette Caldwell</td>\n <td>Development Lead</td>\n <td>New York</td>\n <td>30</td>\n <td>2011/09/03</td>\n <td>$345,000</td>\n </tr>\n <tr>\n <td>Yuri Berry</td>\n <td>Chief Marketing Officer (CMO)</td>\n <td>New York</td>\n <td>40</td>\n <td>2009/06/25</td>\n <td>$675,000</td>\n </tr>\n <tr>\n <td>Caesar Vance</td>\n <td>Pre-Sales Support</td>\n <td>New York</td>\n <td>21</td>\n <td>2011/12/12</td>\n <td>$106,450</td>\n </tr>\n <tr>\n <td>Doris Wilder</td>\n <td>Sales Assistant</td>\n <td>Sidney</td>\n <td>23</td>\n <td>2010/09/20</td>\n <td>$85,600</td>\n </tr>\n <tr>\n <td>Angelica Ramos</td>\n <td>Chief Executive Officer (CEO)</td>\n <td>London</td>\n <td>47</td>\n <td>2009/10/09</td>\n <td>$1,200,000</td>\n </tr>\n <tr>\n <td>Gavin Joyce</td>\n <td>Developer</td>\n <td>Edinburgh</td>\n <td>42</td>\n <td>2010/12/22</td>\n <td>$92,575</td>\n </tr>\n <tr>\n <td>Jennifer Chang</td>\n <td>Regional Director</td>\n <td>Singapore</td>\n <td>28</td>\n <td>2010/11/14</td>\n <td>$357,650</td>\n </tr>\n <tr>\n <td>Brenden Wagner</td>\n <td>Software Engineer</td>\n <td>San Francisco</td>\n <td>28</td>\n <td>2011/06/07</td>\n <td>$206,850</td>\n </tr>\n <tr>\n <td>Fiona Green</td>\n <td>Chief Operating Officer (COO)</td>\n <td>San Francisco</td>\n <td>48</td>\n <td>2010/03/11</td>\n <td>$850,000</td>\n </tr>\n <tr>\n <td>Shou Itou</td>\n <td>Regional Marketing</td>\n <td>Tokyo</td>\n <td>20</td>\n <td>2011/08/14</td>\n <td>$163,000</td>\n </tr>\n <tr>\n <td>Michelle House</td>\n <td>Integration Specialist</td>\n <td>Sidney</td>\n <td>37</td>\n <td>2011/06/02</td>\n <td>$95,400</td>\n </tr>\n <tr>\n <td>Suki Burks</td>\n <td>Developer</td>\n <td>London</td>\n <td>53</td>\n <td>2009/10/22</td>\n <td>$114,500</td>\n </tr>\n <tr>\n <td>Prescott Bartlett</td>\n <td>Technical Author</td>\n <td>London</td>\n <td>27</td>\n <td>2011/05/07</td>\n <td>$145,000</td>\n </tr>\n <tr>\n <td>Gavin Cortez</td>\n <td>Team Leader</td>\n <td>San Francisco</td>\n <td>22</td>\n <td>2008/10/26</td>\n <td>$235,500</td>\n </tr>\n <tr>\n <td>Martena Mccray</td>\n <td>Post-Sales support</td>\n <td>Edinburgh</td>\n <td>46</td>\n <td>2011/03/09</td>\n <td>$324,050</td>\n </tr>\n <tr>\n <td>Unity Butler</td>\n <td>Marketing Designer</td>\n <td>San Francisco</td>\n <td>47</td>\n <td>2009/12/09</td>\n <td>$85,675</td>\n </tr>\n <tr>\n <td>Howard Hatfield</td>\n <td>Office Manager</td>\n <td>San Francisco</td>\n <td>51</td>\n <td>2008/12/16</td>\n <td>$164,500</td>\n </tr>\n <tr>\n <td>Hope Fuentes</td>\n <td>Secretary</td>\n <td>San Francisco</td>\n <td>41</td>\n <td>2010/02/12</td>\n <td>$109,850</td>\n </tr>\n <tr>\n <td>Vivian Harrell</td>\n <td>Financial Controller</td>\n <td>San Francisco</td>\n <td>62</td>\n <td>2009/02/14</td>\n <td>$452,500</td>\n </tr>\n <tr>\n <td>Timothy Mooney</td>\n <td>Office Manager</td>\n <td>London</td>\n <td>37</td>\n <td>2008/12/11</td>\n <td>$136,200</td>\n </tr>\n <tr>\n <td>Jackson Bradshaw</td>\n <td>Director</td>\n <td>New York</td>\n <td>65</td>\n <td>2008/09/26</td>\n <td>$645,750</td>\n </tr>\n <tr>\n <td>Olivia Liang</td>\n <td>Support Engineer</td>\n <td>Singapore</td>\n <td>64</td>\n <td>2011/02/03</td>\n <td>$234,500</td>\n </tr>\n <tr>\n <td>Bruno Nash</td>\n <td>Software Engineer</td>\n <td>London</td>\n <td>38</td>\n <td>2011/05/03</td>\n <td>$163,500</td>\n </tr>\n <tr>\n <td>Sakura Yamamoto</td>\n <td>Support Engineer</td>\n <td>Tokyo</td>\n <td>37</td>\n <td>2009/08/19</td>\n <td>$139,575</td>\n </tr>\n <tr>\n <td>Thor Walton</td>\n <td>Developer</td>\n <td>New York</td>\n <td>61</td>\n <td>2013/08/11</td>\n <td>$98,540</td>\n </tr>\n <tr>\n <td>Finn Camacho</td>\n <td>Support Engineer</td>\n <td>San Francisco</td>\n <td>47</td>\n <td>2009/07/07</td>\n <td>$87,500</td>\n </tr>\n <tr>\n <td>Serge Baldwin</td>\n <td>Data Coordinator</td>\n <td>Singapore</td>\n <td>64</td>\n <td>2012/04/09</td>\n <td>$138,575</td>\n </tr>\n <tr>\n <td>Zenaida Frank</td>\n <td>Software Engineer</td>\n <td>New York</td>\n <td>63</td>\n <td>2010/01/04</td>\n <td>$125,250</td>\n </tr>\n <tr>\n <td>Zorita Serrano</td>\n <td>Software Engineer</td>\n <td>San Francisco</td>\n <td>56</td>\n <td>2012/06/01</td>\n <td>$115,000</td>\n </tr>\n <tr>\n <td>Jennifer Acosta</td>\n <td>Junior Javascript Developer</td>\n <td>Edinburgh</td>\n <td>43</td>\n <td>2013/02/01</td>\n <td>$75,650</td>\n </tr>\n <tr>\n <td>Cara Stevens</td>\n <td>Sales Assistant</td>\n <td>New York</td>\n <td>46</td>\n <td>2011/12/06</td>\n <td>$145,600</td>\n </tr>\n <tr>\n <td>Hermione Butler</td>\n <td>Regional Director</td>\n <td>London</td>\n <td>47</td>\n <td>2011/03/21</td>\n <td>$356,250</td>\n </tr>\n <tr>\n <td>Lael Greer</td>\n <td>Systems Administrator</td>\n <td>London</td>\n <td>21</td>\n <td>2009/02/27</td>\n <td>$103,500</td>\n </tr>\n <tr>\n <td>Jonas Alexander</td>\n <td>Developer</td>\n <td>San Francisco</td>\n <td>30</td>\n <td>2010/07/14</td>\n <td>$86,500</td>\n </tr>\n <tr>\n <td>Shad Decker</td>\n <td>Regional Director</td>\n <td>Edinburgh</td>\n <td>51</td>\n <td>2008/11/13</td>\n <td>$183,000</td>\n </tr>\n <tr>\n <td>Michael Bruce</td>\n <td>Javascript Developer</td>\n <td>Singapore</td>\n <td>29</td>\n <td>2011/06/27</td>\n <td>$183,000</td>\n </tr>\n <tr>\n <td>Donna Snider</td>\n <td>Customer Support</td>\n <td>New York</td>\n <td>27</td>\n <td>2011/01/25</td>\n <td>$112,000</td>\n </tr>\n </tbody>\n <tfoot>\n <tr>\n <th>Name</th>\n <th>Position</th>\n <th>Office</th>\n <th>Age</th>\n <th>Start date</th>\n <th>Salary</th>\n </tr>\n </tfoot>\n </table>\n\n<style>\nbody.nr-dashboard-theme md-content md-card {\n\tcolor: #000000;\n}\n</style>\n\n<script type=\"text/javascript\" class=\"init\">\n\n $(document).ready(function() {\n $('#example').dataTable();\n } );\n\n</script>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":676,"y":534,"wires":[[]]},{"id":"29c72db3.985de2","type":"ui_group","z":"","name":"Group 1","tab":"812e55e.16826a8","order":1,"disp":true,"width":"16","collapse":true},{"id":"917f331.ee040d","type":"ui_group","z":"","name":"Group 1","tab":"5543b30c.8e955c","order":1,"disp":true,"width":"16","collapse":true},{"id":"812e55e.16826a8","type":"ui_tab","z":"","name":"Tabulka","icon":"dashboard","disabled":false,"hidden":false},{"id":"5543b30c.8e955c","type":"ui_tab","z":"","name":"Tabulka","icon":"dashboard","disabled":false,"hidden":false}]
Finally, do you have some suggestions how to dynamically generate/fill the data/text to the table?
My data are actually in sqlite table. On the datatables.net there is description about three different locations (datasources): JSON (Ajax), html (DOM), Javascript (array).
What is the most viable way in your point of view?
