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

Angular de_DE (de) und Euro
17.01.2018 - Lesezeit: 2 Minuten

Damit die Währungsanzeige in Angular mit Pipes funktioniert, wie zum Beispiel hier:

<h2>Kontostand</h2>
<table class="kontostandRecords">
  <tr>
    <th>Datum</th>
    <th>Bezeichnung</th>
    <th>Betrag</th>
  </tr>
  <tr *ngFor="let konto of kontostandRecords"
    [class.selected]="konto === selectedKonto">
    <td>{{konto.datum | date: 'dd.MM.yy'}}</td>
    <td><a routerLink="/kubea/detail/{{konto.id}}">{{konto.kurz}}</a></td>
    <td class="wnfDM">{{konto.betrag | currency: '€'}}</td>
  </tr>
  <tr *ngIf="kontostandSumme">
    <th>Summe</th>
    <th></th>
    <th class="wnfSumme">{{kontostandSumme.summe | currency: '€'}}</th>
  </tr>
</table>

muss die Datei app.module.ts ergänzt werden um:

...
import { registerLocaleData } from '@angular/common';
import localeDE from '@angular/common/locales/de';
..
registerLocaleData(localeDE);
...
  providers: [
      {
      provide: LOCALE_ID,
      useValue: 'de' // 'de-DE' for Germany, 'fr-FR' for France ...
      },
..

Dabei ist zu beachten, dass es in angular/common/locales kein de_DE gibt, sondern nur de

FLXP-9iaU-Qk6B-8P4A-KYwY

Tags: Javascript

Javascript beliebte Fehler
17.01.2018 - Lesezeit: 2 Minuten

Der verwöhnte Delphi-Programmierer hat unter Javascript zu leiden.

In dieser Tabelle (kontostand.component.html) wurde nichts angezeigt

<h2>Kontostand</h2>
<table class="kontostandRecords">
  <tr>
    <th>Datum</th>
    <th>Bezeichnung</th>
    <th>Betrag</th>
  </tr>
  <tr *ngFor="let konto of kontostandRecords"
    [class.selected]="konto === selectedKonto">
    <td>{{konto.datum | date: 'dd.MM.yy'}}</td>
    <td><a routerLink="/kubea/detail/{{konto.id}}">{{konto.kurz}}</a></td>
    <td class="wnfDM">{{konto.betrag}}</td>
  </tr>
</table>

weil in der Datei (kontostand.component.ts) ein falscher Name für kontostandRecords verwendet wurde:

export class KontostandComponent implements OnInit {
  kontenRecords: KontoRecord[];
  ...
  getKontostand(): void {
    this.kubeaService.getKontostand()
        .subscribe(konto => this.kontenRecords = konto);
  ...
  }

nach der Korrektur von kontenRecords auf kontostandRecords

export class KontostandComponent implements OnInit {
  kontostandRecords: KontoRecord[];
  ...
  getKontostand(): void {
    this.kubeaService.getKontostand()
        .subscribe(konto => this.kontostandRecords = konto);
  }
}

funktioniert die Anzeige des Kontostandes.

Tags: Javascript

Javasript-Bibliotheken
26.03.2013 - Lesezeit: ~1 Minute
Tags: Javascript

Suchen

Links