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>