Api daten verarbeiten - in Tabelle ausgeben - bitte um Hilfe


klausi89

Erfahrenes Mitglied
#21
ich kann irgendwie machen was ich will.....hab schon gefühlte tausend varianten durchprobiert
ich bekomme aus den craetion_date die in Tage angegeben sind keine angaben in Monaten (gerundet)

und aus den Url wollte ich eigentlich nen klickbaren bootstrap button machen und an jede url /r=referralname anhängen

ich schau da wie ins Uhrwerk...ist eben echt blöd wenn man da garnich weiß was man macht...so wie die Tabelle nun ist kann ich sie leider dann auch nicht verwenden.....

trotzdem danke mal gucken ob ich irgendwie noch was rausfinde im moment bin ich ratlos da geh ich lieber erstmal mit dem Hund raus....:)
 

Sempervivum

Erfahrenes Mitglied
#23
So funktioniert es mit den Wochen und dem Link:
Code:
        $('#table-ajax').DataTable({
            "processing": true,
            "ajax": {
                "url": "datatables-ajax.json",
                "dataSrc": "list_data.premium.BTC"
            },
            "columns": [
                { "data": "name" },
                { "data": "name" },
                { "data": "url" },
                { "data": "creation_date" }
            ],
            "order": [[1, "desc"]],
            "columnDefs": [
                {
                    "render": function (data, type, row) {
                        return Math.round(data / 30.5);
                    },
                    "targets": 3
                },
                {
                    "render": function (data, type, row) {
                        var thehtml = '<a class="lnkbtn" href="' + data + '">' + data + '</a>';
                        return thehtml;
                },
                    "targets": 2
                }
            ]
        });
Button <button> und Link <a href=""> vertragen sich leider nicht. Wie man es auch schachtelt, es wird nicht valide. Ich empfehle, auf <button> zu verzichten und stattdessen das a-href-Element entspr. zu gestalten. Wenn ich mir dies ansehe:
http://getbootstrap.com/docs/4.0/components/buttons/
ist es mit wenigen Zeilen CSS getan:
Code:
        .lnkbtn {
            display: inline-block;
            padding: 5px;
            border-radius: 3px;
            background-color: darkgrey;
            color: white;
            text-decoration: none;
        }
 
Zuletzt bearbeitet:

klausi89

Erfahrenes Mitglied
#24
Danke so geht es - hab einen Bootstrap button gemacht .....btn btn-primay btn-sm

jez nur noch die Frage könntest du mir bitte kurz erklären warum die Matherechnung Data / 30.5 - wofür steht denn die 30.5

und wie könnte ich im Button statt der Url - z.Bsp. View Site oder ähnliches stehen haben
 

klausi89

Erfahrenes Mitglied
#25
Danke so geht es - hab einen Bootstrap button gemacht .....btn btn-primay btn-sm

jez nur noch die Frage könntest du mir bitte kurz erklären warum die Matherechnung Data / 30.5 - wofür steht denn die 30.5

und wie könnte ich im Button statt der Url - z.Bsp. View Site oder ähnliches stehen haben
 

klausi89

Erfahrenes Mitglied
#27
Hallo Sempervivum ich hätte da nochma eine Frage

{
"render": function (data, type, row) {
return Math.round(data / 30.5);
},
"targets": 2

}

gibt es dieses auch für Division/ Multiplikation etc.
meinetwegen data/100000 (Division) aber finde da nichts so richtig
bin mir nicht sicher ob Math.floor da das richtige ist

und

ich habe eine Zeile mit einer progressbar verknüpft

{
"render": function (data, type, row) {
var thehtml = '<div class="progress"><div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="' + data + '" aria-valuemin="0" aria-valuemax="100" style="width:' + data + '%">' + data + '</div></div>';
return thehtml;
},
"targets": 6
},

gibt es da die Möglichkeit die Math.round mit einzubauen....

hatte es extra probiert

{
"render": function (data, type, row) {
return Math.round(data,2);
},
"targets": 6

}

da rundet er zwar auf 2 Stellen nach dem Komma aber die Progressbar wird dann nicht mehr angezeigt
Vielleicht könntest du dazu nochmal was schreiben.
Danke
 

Sempervivum

Erfahrenes Mitglied
#28
gibt es dieses auch für Division/ Multiplikation etc.
meinetwegen data/100000 (Division) aber finde da nichts so richtig
bin mir nicht sicher ob Math.floor da das richtige ist
Selbstverständlich, Du kannst alle Rechenoperationen, die JS unterstützt, verwenden.
da rundet er zwar auf 2 Stellen nach dem Komma aber die Progressbar wird dann nicht mehr angezeigt
Vermutlich hast Du beide Codes für das Rendern von Spalte 6 hintereinander notiert. In diesem Fall überschreibt die letzte Definition alle davor. Du muss beides zusammen fassen:
Code:
"render": function (data, type, row) {
    var thehtml = '<div class="progress"><div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="' + data + '" aria-valuemin="0" aria-valuemax="100" style="width:' + data + '%">' + Math.round(data,2) + '</div>';
     return thehtml;
},
"targets": 6
},
 

klausi89

Erfahrenes Mitglied
#29
Einwandfrei, danke dir eine letzte Frage hätte ich noch

was mich jetzt noch stört ist das jeder den Code meiner Tabelle einfach einsehen könnte vorallem weil der Apikey da ja auch drin stehen würde - hab das zwar ausgelagert in eine php datei aber der restliche code und wo die api abgerufen wird ist ja nun trotzdem für jeden sichtbar.
Kann man da was machen ?
 
#32
Es kann vorkommen, dass Sie API-Funktionen innerhalb der DataTables-Callback-Funktionen aufrufen möchten (z. B. initComplete, rowCallback). Das Problem dabei ist, dass das Objekt nicht vollständig initialisiert wurde, sodass Sie das Ergebnis möglicherweise nicht einer Variablen zuweisen und diese Variable dann im Callback verwenden können. Die meisten Callback-Funktionen von DataTables werden im Rahmen der DataTable-Instanz ausgeführt, sodass Sie die spezielle JavaScript-Variable manipulieren können, um auf die API zuzugreifen, da dies der Tabellenknoten ist.
 

klausi89

Erfahrenes Mitglied
#33
Hallo, nochmal eine Frage gibt es denn irgendwie die möglichkeit nur 5 oder 3 Zeilen auszugeben eventuell sogar random aus der kompletten json Datei ? (für eine kleine nebenliste)

Danke
 

Sempervivum

Erfahrenes Mitglied
#36
Es war nicht ganz leicht, aber das Ergebnis ist sehr einfach. Ich hatte das JSON und die HTML-Seite noch. Damit sieht es so aus:
Code:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
    <title>DataTables example - Child rows (show extra / detailed information)</title>

    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" language="javascript" class="init"></script>

</head>
<body>
    <table id="table-ajax"></table>
    <style>
        .lnkbtn {
            display: inline-block;
            padding: 5px;
            border-radius: 3px;
            background-color: darkgrey;
            color: white;
            text-decoration: none;
        }
    </style>
    <script>
        function shuffle(a) {
            var j, x, i;
            for (i = a.length - 1; i > 0; i--) {
                j = Math.floor(Math.random() * (i + 1));
                x = a[i];
                a[i] = a[j];
                a[j] = x;
            }
        }
        var tbl = $('#table-ajax').DataTable({
            "processing": true,
            "ajax": {
                "url": "datatables-ajax-nr5.json",
                "dataSrc": function (data) {
                    data2 = data.list_data.premium.BTC;
                    shuffle(data2);
                    var retdata = [];
                    for (var i = 0; i < data2.length && i < nrtodisplay; i++) retdata.push(data2[i]);
                    return retdata;
                }
            },
            "columns": [
                { "data": "name" },
                { "data": "name" },
                { "data": "url" },
                { "data": "creation_date" }
            ],
            "order": [[1, "desc"]],
            "columnDefs": [
                {
                    "render": function (data, type, row) {
                        return Math.round(data / 30.5);
                    },
                    "targets": 3
                },
                {
                    "render": function (data, type, row) {
                        var thehtml = '<a class="lnkbtn" href="' + data + '">' + data + '</a>';
                        return thehtml;
                    },
                    "targets": 2
                }
            ]
        });
    </script>
</body>
</html>
In den Optionen unter "ajax" wird jetzt unter "dataSrc" eine Funktion definiert, die die Daten vor verarbeitet. Dort wird das Array aus der Struktur heraus geholt und 3 zufällige Zeilen herausgefiltert. Die Anzahl wird durch die Variable nrtodisplay festgelegt.
 

Neue Beiträge