Javascript Tabelle füllen und beim Scrollen Datensätze nachladen
Posted by wnf on Thursday, 26 April 2018Literatur
- fluuux.de: MySQL-Datensätze beim scrollen nachladen.
- molily.de: JavaScript: Scripte beim Laden des Dokuments ausführen
- stackoverflow: How to insert row in HTML table body in Javascript?
<!DOCTYPE html> <html lang="de"> <head> <meta http-equiv="X-UA-Compatible" content="IE=9"> <meta charset="utf-8"> <meta name="author" content="wlsoft"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="robots" content="index,follow"> <title>Datensätze beim scrollen nachladen</title> <link rel="stylesheet" href="css/wnfportal_2.css" type="text/css"/> <script src="js/jquery-2.1.1.min.js" type="text/javascript"></script> <script type="text/javascript"> var QUERY_LISTEA = 'jsonListEASkip'; var listeaJSON = {}; var aSkip = 0; var aFirst = 20; var aSumme = 0; function getfirst_ea(){ aSkip = 0; $.getJSON(QUERY_LISTEA+'/'+aFirst+'/'+aSkip, '', jsonEintragen); } function getnext_ea(){ $.getJSON(QUERY_LISTEA+'/'+aFirst+'/'+aSkip, '', jsonEintragen); } function addZeile(aDatum,aBez,aBetrag) { var tableRef = document.getElementById('table_EA').getElementsByTagName('tbody')[0]; // Insert a row in the table at the last row var newRow = tableRef.insertRow(tableRef.rows.length); // Insert a cell in the row at index 0 var newCell = newRow.insertCell(0); // Append a text node to the cell var newText = document.createTextNode(aDatum); newCell.appendChild(newText); var newCell = newRow.insertCell(1); var newText = document.createTextNode(aBez); newCell.appendChild(newText); var newCell = newRow.insertCell(2); var newText = document.createTextNode(aBetrag); newCell.appendChild(newText); } function editFuss(aAnzahl,aBez,aBetrag) { document.getElementById('foot_EA_0').innerHTML=aAnzahl; document.getElementById('foot_EA_1').innerHTML=aBez; document.getElementById('foot_EA_2').innerHTML=aBetrag; } function jsonEintragen(aData) { if (!$.isEmptyObject(aData)){ console.log(aData); for (var i = 0; i < aData.length; i++) { aBetrag=parseFloat(aData[i].betrag); addZeile(aData[i].datum,aData[i].kurz,aBetrag.toFixed(2)); aSumme += aBetrag; } aSkip += aFirst; console.log(aFirst,aSkip); editFuss(aSkip,'Summe',aSumme.toFixed(2)); } } function datenNachladen(event) { //Nachladen erst, wenn das Ende erreicht wird if($(window).scrollTop() == $(document).height() - $(window).height()) { console.log('Nachladen ...'); getnext_ea(); } } function dokumentGeladen(event) { getfirst_ea(); } document.addEventListener('DOMContentLoaded', dokumentGeladen, false); document.addEventListener('scroll', datenNachladen) </script> </head> <body> <h1 id="listeaHeader">Einnahmen/Ausgaben</h1> <table id="table_EA"> <thead> <tr> <th>Datum</th> <th>Bezeichnung</th> <th>Betrag</th> </tr> </thead> <tbody> </tbody> <tfoot> <th id="foot_EA_0"></th> <th id="foot_EA_1">Bezeichnung</th> <th id="foot_EA_2"></th> </tfoot> </table> </body> </html>