Javascript Tabelle füllen und beim Scrollen Datensätze nachladen
26.04.2018 - Lesezeit: 3 Minuten

Literatur

<!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&auml;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>
Tags: Javascript

Suchen

Links