I am new to node red and I am creating a web page with the http in node and I want to be able to add jquery inside the javascript of the page
example :
[{"id":"9cab65224c5ade8d","type":"template","z":"e33597892d562b22","name":"CSS","field":"ejemplo.css","fieldType":"msg","format":"css","syntax":"mustache","template":"body{\n\n background-color: #eee; \n}\n\ntable th , table td{\n text-align: center;\n}\n\ntable tr:nth-child(even){\n background-color: #BEF2F5\n}\n\n.pagination li:hover{\n cursor: pointer;\n}\n table tbody tr {\n display: none;\n }","output":"str","x":630,"y":2080,"wires":[["b6e5db3265d2dff1"]]},{"id":"b6e5db3265d2dff1","type":"template","z":"e33597892d562b22","name":"HTML","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"<html>\n <head>\n <meta charset=\"UTF_8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <script src=\"./home/pi/JQuery/JQuery.js\"></script>\n <title>ARC</title>\n <style>{{{ejemplo.css}}}</style>\n </head>\n <body>\n \n <div class=\"container\">\n <h2>Select Number Of Rows</h2>\n <div class=\"form-group\"> <!-- Show Numbers Of Rows -->\n <select class =\"form-control\" name=\"state\" id=\"maxRows\">\n <option value=\"5000\">Show ALL Rows</option>\n <option value=\"5\">5</option>\n <option value=\"10\">10</option>\n <option value=\"15\">15</option>\n <option value=\"20\">20</option>\n <option value=\"50\">50</option>\n <option value=\"70\">70</option>\n <option value=\"100\">100</option>\n </select>\n \n </div>\n\n<table class=\"table table-striped table-class\" id= \"table-id\">\n \n <thead>\n <tr>\n <th>Name</th>\n <th>Email</th>\n <th>Phone</th>\n <th>Date</th>\n </tr>\n \n </thead>\n \n <tbody>\n\n <tr>\n <td>Arthur Blackwell</td>\n <td>sodales.elit.erat@vehiculaetrutrum.ca</td>\n <td>1-837-635-8180</td>\n <td>Mar 21, 2017</td>\n </tr>\n <tr>\n <td>Ivan Vasquez</td>\n <td>eu.lacus.Quisque@Nunc.org</td>\n <td>1-626-851-7695</td>\n <td>Feb 23, 2016</td>\n </tr>\n </tbody>\n\n</table>\n\n<!-- Start Pagination -->\n <div class='pagination-container' >\n <nav>\n <ul class=\"pagination\">\n \n <li data-page=\"prev\" >\n <span> < <span class=\"sr-only\">(current)</span></span>\n </li>\n <!-- Here the JS Function Will Add the Rows -->\n <li data-page=\"next\" id=\"prev\">\n <span> > <span class=\"sr-only\">(current)</span></span>\n </li>\n </ul>\n </nav>\n </div>\n\n</div>\n <script>{{{ejemplo.js}}}</script>\n </body>\n</html>","output":"str","x":770,"y":2080,"wires":[["250e32cf53f608ad"]]},{"id":"6afd6eb39599afb5","type":"http in","z":"e33597892d562b22","name":"","url":"ejemploo","method":"get","upload":false,"swaggerDoc":"","x":240,"y":2080,"wires":[["2590a5358d60e4b4"]]},{"id":"250e32cf53f608ad","type":"http response","z":"e33597892d562b22","name":"","statusCode":"","headers":{},"x":950,"y":2080,"wires":[]},{"id":"2590a5358d60e4b4","type":"template","z":"e33597892d562b22","name":"JAVASCRIPT","field":"ejemplo.js","fieldType":"msg","format":"javascript","syntax":"mustache","template":" getPagination('#table-id');\n //getPagination('.table-class');\n //getPagination('table');\n\n /* PAGINATION \n - on change max rows select options fade out all rows gt option value mx = 5\n - append pagination list as per numbers of rows / max rows option (20row/5= 4pages )\n - each pagination li on click -> fade out all tr gt max rows * li num and (5*pagenum 2 = 10 rows)\n - fade out all tr lt max rows * li num - max rows ((5*pagenum 2 = 10) - 5)\n - fade in all tr between (maxRows*PageNum) and (maxRows*pageNum)- MaxRows \n */\n \n\nfunction getPagination(table) {\n var lastPage = 1;\n\n $('#maxRows')\n .on('change', function(evt) {\n //$('.paginationprev').html(''); // reset pagination\n\n lastPage = 1;\n $('.pagination')\n .find('li')\n .slice(1, -1)\n .remove();\n var trnum = 0; // reset tr counter\n var maxRows = parseInt($(this).val()); // get Max Rows from select option\n\n if (maxRows == 5000) {\n $('.pagination').hide();\n } else {\n $('.pagination').show();\n }\n\n var totalRows = $(table + ' tbody tr').length; // numbers of rows\n $(table + ' tr:gt(0)').each(function() {\n // each TR in table and not the header\n trnum++; // Start Counter\n if (trnum > maxRows) {\n // if tr number gt maxRows\n\n $(this).hide(); // fade it out\n }\n if (trnum <= maxRows) {\n $(this).show();\n } // else fade in Important in case if it ..\n }); // was fade out to fade it in\n if (totalRows > maxRows) {\n // if tr total rows gt max rows option\n var pagenum = Math.ceil(totalRows / maxRows); // ceil total(rows/maxrows) to get ..\n // numbers of pages\n for (var i = 1; i <= pagenum; ) {\n // for each page append pagination li\n $('.pagination #prev')\n .before(\n '<li data-page=\"' +\n i +\n '\">\\\n <span>' +\n i++ +\n '<span class=\"sr-only\">(current)</span></span>\\\n </li>'\n )\n .show();\n } // end for i\n } // end if row count > max rows\n $('.pagination [data-page=\"1\"]').addClass('active'); // add active class to the first li\n $('.pagination li').on('click', function(evt) {\n // on click each page\n evt.stopImmediatePropagation();\n evt.preventDefault();\n var pageNum = $(this).attr('data-page'); // get it's number\n\n var maxRows = parseInt($('#maxRows').val()); // get Max Rows from select option\n\n if (pageNum == 'prev') {\n if (lastPage == 1) {\n return;\n }\n pageNum = --lastPage;\n }\n if (pageNum == 'next') {\n if (lastPage == $('.pagination li').length - 2) {\n return;\n }\n pageNum = ++lastPage;\n }\n\n lastPage = pageNum;\n var trIndex = 0; // reset tr counter\n $('.pagination li').removeClass('active'); // remove active class from all li\n $('.pagination [data-page=\"' + lastPage + '\"]').addClass('active'); // add active class to the clicked\n // $(this).addClass('active'); // add active class to the clicked\n limitPagging();\n $(table + ' tr:gt(0)').each(function() {\n // each tr in table not the header\n trIndex++; // tr index counter\n // if tr index gt maxRows*pageNum or lt maxRows*pageNum-maxRows fade if out\n if (\n trIndex > maxRows * pageNum ||\n trIndex <= maxRows * pageNum - maxRows\n ) {\n $(this).hide();\n } else {\n $(this).show();\n } //else fade in\n }); // end of for each tr in table\n }); // end of on click pagination list\n limitPagging();\n })\n .val(5)\n .change();\n\n // end of on select change\n\n // END OF PAGINATION\n}\n\nfunction limitPagging(){\n // alert($('.pagination li').length)\n\n if($('.pagination li').length > 7 ){\n if( $('.pagination li.active').attr('data-page') <= 3 ){\n $('.pagination li:gt(5)').hide();\n $('.pagination li:lt(5)').show();\n $('.pagination [data-page=\"next\"]').show();\n }if ($('.pagination li.active').attr('data-page') > 3){\n $('.pagination li:gt(0)').hide();\n $('.pagination [data-page=\"next\"]').show();\n for( let i = ( parseInt($('.pagination li.active').attr('data-page')) -2 ) ; i <= ( parseInt($('.pagination li.active').attr('data-page')) + 2 ) ; i++ ){\n $('.pagination [data-page=\"'+i+'\"]').show();\n\n }\n\n }\n }\n}\n\n$(function() {\n // Just to append id number for each row\n $('table tr:eq(0)').prepend('<th> ID </th>');\n\n var id = 0;\n\n $('table tr:gt(0)').each(function() {\n id++;\n $(this).prepend('<td>' + id + '</td>');\n });\n});","output":"str","x":460,"y":2080,"wires":[["9cab65224c5ade8d"]]}]
