[DataTables] Beste aanpak voor bepaalde weergave

[OzBoz]

Doel

Ik speel Assetto Corsa en dat spel slaat je records op de diverse circuits op in een kloterig bestand. Nu ben ik bezig om een pagina te maken waar mensen makkelijk hun bestand kunnen uploaden en dan een helder overzicht krijgen van hun records.

Wat lukt

Ben geen programmeur maar eigenlijk werkt de basis prima. Ik sla de data op in een MySQL database en wanneer je bent ingelogd met facebook onder je facebook id zodat je een backup hebt maar ook makkelijk een link naar je tijden kan sharen.

Normaal wordt de data in hapjes uitgelezen maar omdat het nooit om 3000 rijen gaat lees ik de data in 1x uit en deze wordt geplaatst in een DataTable. Na geklooi met een hoerige UTF-8 BOM is dat ook gelukt.

Wat je ziet is dan een tabel met kolommen voor track/car/tijd/datum.

De flow is upload > database > AJAX call naar .php > data verschijnt in tabel

Wat ik wil

Standaard is gesorteerd op 'track'. Daar is ook niets mis mee. Het oog wil alleen ook wat en ik wil eigenlijk dat de namen van de tracks tussenkopjes zijn en dus niet een extra kolom nodig hebben. Beter voor het overzicht.

Nu vraag ik mij af waar ik dan aan het werk moet. Moet ik de PHP die de data ophaalt aanpassen zodat ik daar andere selecties maak of kan ik het best zoals ik het nu doe de complete data binnenhengelen en dan met jQuery wat gaan vogelen?

Dat geldt eigenlijk ook voor de datum (is een timestamp) en de tijd (milliseconden). Beiden niet echt leesbaar dus dat format moet worden aangepast. Dat doe ik nu in de PHP die de data uit de database vist maar eigenlijk is dat niet echt slim wanneer iemand bijvoorbeeld op tijd wil sorteren.

Concreet

Wat is het slimst om te doen? Aangezien alle data gewoon netjes ingeladen wordt lijkt mij het handigst om verdere bewerking in jQuery/DataTables te doen.

Met iets als console.dir(userData.data().length); zie ik ook prima het aantal records maar ik heb even een beginnetje nodig van hoe ik door de rows kan rennen en de looks kan beinvloeden zonder het DataTable ding aan de kant te schuiven want dat lijkt mij een prima basis.

Zou me kunnen voorstellen dat je per circuit een datatable genereert bijvoorbeeld. Dan kun je die ook sorteren op diverse velden. Door bijvoorbeeld de originele milliseconden timing niet te tonen maar wel binnen je data te houden.

Zoals jullie zien, ik zit een beetje vast met gedachten over hoe dit aan te pakken. Iemand een zetje in de goede richting?

[analogue]

Ik denk dat het simpelste is als je de pagina opbouwt met een regulier PHP script. Zorg ervoor dat je tracks een eigen array hebben:

code:

$data = [
    $track_1 = [],
    $track_2 = [],
    ...
];

Dan gooi je per track een eigen header row in de table. Je kunt je datastrings nog formatten in je loop, dus volgens mij los je dan een hoop problemen op.

[Salmon]

Kan je een voorbeeld (screenshot) van de huidige weergave geven, dat zou helpen bij de beeldvorming.

Over de tijden tonen. De timestamp kan je óf in je PHP vervangen voor een kortere datumformaat (dd/MM/YYY hh:mm:ss of iets dergelijks) voordat je de data teruggeeft als response óf dat kan je doen nadat je JSON data is ontvangen van je GET request en daarna aanpast in JQuery. Je zou ook kunnen kijken naar server-side processing op de website van DataTables. Ik zou als ik jou was het liefst zoveel mogelijk server side processing doen en de load dus daar leggen.

[ Voor 8% gewijzigd door Salmon op 12-01-2017 12:02 ]

[OzBoz]

Dit is mijn huidige weergave. Dit is inderdaad via het server-side gedaan zoals het voorbeeld op DataTables. Daar liep ik eerst mee vast door dat BOM karakter maar uiteindelijk bleek dat ik weer paar uur voor niets had getwijfeld aan mezelf



Hierbij is de data in PHP al een ander format gegeven maar gevoelsmatig is dat niet zo handig en kan ik beter de data zoals hij is binnenhalen en dan verwerken met jQuery.

Het wordt nu inderdaad gewoon via GET binnengehaald en dat ziet er in mijn code uit als

code:

function getRecords() {
    console.log("getRecords");
    userData = $('#example').DataTable({
"processing": true,
"serverSide": true,
"lengthChange": false,
"pageLength" : 1000,
"paging" : false,
"searching" : false,
"ajax": "loaddata.php"
        })
            }

Bovenstaande werkt ook gewoon en zorgt dus voor een tabel zoals plaatje. Ik weet alleen niet zo goed waar ik naar moet kijken of wat ik moet doen om ipv die data meteen de div in te gooien daar eerst wat bewerkingen op los te laten.

Zat ook al erg te zoeken op de website van DataTables maar kon nog niet iets vinden wat een beetje in de buurt kwam van mijn idee.

[edit]

Eigenlijk zoek ik dus een soort loopje/manier om nog even door de data te lopen. Ook gezien de underscores etc. En dan pas de tabel weer te geven. En daar puzzel ik nu mee, ik vind dit al knap dat dit mezelf lukte maar ben wat loops etc beter thuis in php dan in jQuery. Naja, beiden noob

[ Voor 11% gewijzigd door OzBoz op 12-01-2017 12:19 ]

[analogue]

Weet je hoe je een 'normale' table moet opbouwen met PHP en HTML? Daar moet je denk ik starten. Je kan namelijk achteraf DT binden aan je table, en dan heb je nog exact dezelfde functies, alleen heb je veel meer controle over je table design.

[OzBoz]

Ja, begrijp wel wat je bedoelt, dan maak je gewoon een tabel zoals anders en bind je hem zoals ze ook hier doen: https://datatables.net/examples/data_sources/dom.html

Maar ik heb zeg maar netto nu https://datatables.net/examples/data_sources/ajax.html tenminste, die AJAX data heb ik. Wezenlijk voor mijn gevoel niet heel anders alleen moet ik het manipuleren dan met jQuery doen en dan binden.

Of maak ik nu een rare denkfout?

[OzBoz]

Even horen of ik zo op de goede weg ben

code:

$('#example').on( 'draw.dt', function () {
  userData
    .column( 0 )
    .data()
    .each( function ( value, index ) {
        console.log( 'Data in index: '+index+' is: '+value );
  } );
});

Dit wandelt alle data af en geeft de inhoud weer in de console. Dat werkt dus ik denk dat ik zo ook gewoon de data kan manipuleren.

Omdat dit nu lukt heb ik ook eens even gekeken naar de layout die wellicht wel mooi is om te gebruiken. Puur voor het idee en ben benieuwd of het me lukt, in ieder geval een mooi doel

edit:

Tijdens het snuffelen naar sorteermogelijkheden kwam ik ineens deze tegen: https://datatables.net/ex...ed_init/row_grouping.html precies wat ik dus eigenlijk wil

Plaatje concept toegevoegd..

[ Voor 37% gewijzigd door OzBoz op 12-01-2017 17:29 ]

[Merethil]

Maar waarom doe je je bewerkingen niet gewoon serverside? Of eventueel vóór het in de database komt? Alle bewerkingen doen aan client-side zodra iemand je pagina ophaalt is gewoon zonde van je performance...

[OzBoz]

Merethil schreef op donderdag 12 januari 2017 @ 17:38:
Maar waarom doe je je bewerkingen niet gewoon serverside? Of eventueel vóór het in de database komt? Alle bewerkingen doen aan client-side zodra iemand je pagina ophaalt is gewoon zonde van je performance...

Daar heb je wel een punt en qua underscores en KS_ wissen lijkt mij dat ook het meest handig. Wellicht ook gewoon twee kolommen extra in de tabel met een leesbare tijd en datum.

Heb weinig kaas gegeten qua performance maar ipv steeds een AJAX call te maken doe ik er nu eentje die meteen alle data ophaalt. Daarna wordt er gesorteerd.

Dat sorteren kan waarschijnlijk ook inderdaad wel meteen maar dan moet ik even kijken of ik kan uitvogelen hoe dat werkt. Nu haalt hij de zo binnen (na voorbeeld op DataTables)

code:

$columns = array(
array( 'db' => 'trackName',     'dt' => 0 ),
array( 'db' => 'carName',   'dt' => 1 ),
array( 'db' => 'recordTime',     'dt' => 2 ),
    array(
        'db'        => 'recordDate',
        'dt'        => 3,
        'formatter' => function( $d, $row ) {
            return date( "l jS \of F Y h:i:s A" , ($d/1000));;
        }
    )
);

Als ik nu zorg dat de data al op de standaard gewenste volgorde wordt opgeslagen en er twee extra kolommen in zitten die de tijd/datum leesbaar hebben dan scheelt dat waarschijnlijk wel iets.

Theoretisch kun je best wat mogelijkheden hebben aantal auto(typen) x aantal banen (en variaties). Of ik echt veel tijd bespaar weet ik niet.

Sta open voor slimme suggesties. Zelf denk ik vaak te weinig praktisch omdat ik ervaring mis. Op http://ac.maakt.nu/ staat mijn huidige freubel.

[Rooligan]

Ik ben het met analogue eens dat je het beste per track een array kan opbouwen als je de data in 1x wil verwerken.
Dus bijv.

PHP:

$data = [];
foreach($tijden as $tijd){
    $data[$tijd['track']][] = $tijd;
}

Je haalt alle tijden uit de database en loopt ze door binnen php. Hierbij zet je alle regels van een track binnen een aparte array in de data array.

Maar als ik naar jouw ontwerp kijk zou ik het iets anders doen.

Als ik naar het ontwerp kijk dat je gepost hebt, zou ik eens gaan kijken naar een bootstrap template. Hierbij zou je eens moeten kijken naar de accordeon elementen of collapsable group items oid.

In eerste instantie maak je een array aan met alleen de tracks er in. In de template loop je alle tracks door en maak je voor elke track een accordeon element aan.
Vervolgens zet je in de body van dat element een datatable met de tijden voor die track.

Zolang het niet om heel veel informatie per tabel gaat, zou ik geen gebruik maken van de server side oplossing van datatables. Voor grote hoeveelheden data werkt het heel mooi. Maar je moet wel aardig wat weet hebben van php, javascript en sql.
Je kan wel gebruik maken van ajax-source data zoals je nu ook doet. Alleen moet je serverside op false zetten. Wanneer je die op true laat staan, zal je de sortering van de data bijvoorbeeld in de sql-query moeten doen.

Onderstaande code is een voorbeeld van de initialisatie van de datatable voor 1 track.
Voor het bewerken van de data in 1 table row kan je op de datatables website eens zoeken op de render functie.

code:

$('#track1Table').DataTable({
    ajax: "loaddata.php?track=Track1",
    columns : [
        {data: car, orderable: true, searchable: true},
        {data: tijd, orderable: true, searchable: false},
        {data: speed, orderable: true, searchable: false}
    ],
    order: [[1,asc]]
});

[ Voor 4% gewijzigd door Rooligan op 16-01-2017 19:53 ]

[OzBoz]

Rooligan schreef op maandag 16 januari 2017 @ 19:48:
Onderstaande code is een voorbeeld van de initialisatie van de datatable voor 1 track.
Voor het bewerken van de data in 1 table row kan je op de datatables website eens zoeken op de render functie.

Hi @Rooligan bedankt voor je uitgebreide antwoord. Vandaag ben ik er weer mee verder gegaan. Het data ophalen gaat nu dus eigenlijk zoals ik al had aangegeven en ik heb via dat voorbeeld op datatables het zo gemaakt dat je dus per circuit kan inklappen en uitklappen.

Dat werkt eigenlijk allemaal wel aardig dus hou ik nog eventjes zo. Dat sorteren is inderdaad wel een dingetje maar in principe sorteeer ik momenteel op twee kolommen, circuit naam en tijd. Eigenlijk is dat ook gewoon het enige wat moet.

Als alles verder nou een beetje werkt dan wil ik wel een filter inbouwen zodat je op autotype kan filteren. Dat is namelijk handig wanneer je bijvoorbeeld wilt vergelijken. Denk dat dat kan zonder extra query.

Ik ben verder echt helemaal geen programmeur en ik vind al dat ik ver ben gekomen. Je logt nu bijvoorbeeld in (als je wilt) met je facebook account en dan slaat hij ook netjes je data op. Dat maakt weer dat je je 'eigen' resultaten weer makkelijk kan sharen. Allemaal dingen die ik twee weken geleden nog niet wist dus het is vooral leuke puzzel.

Nu bezig met wat foutafhandeling en de juiste dingen tonen op de juiste momenten. Hoop gepruts voor mij maar wel leuk als het lukt. Als het hele systeem in basis werkt dan duik ik nog even in de zaken die misschien sneller of handiger kunnen. Ben met dit topic in ieder geval al veel opgeschoten doordat ik door de feedback ook een beetje anders ben gaan nadenken.

[Rooligan]

Ik heb geprobeerd om de pagina te bekijken, maar ik kan niet inloggen en ik kan de skip optie ook niet gebruiken. Heb trouwens ook geen fb, dus de skip optie zou mijn voorkeur hebben

Met de datatables worden al heel veel dingen voor je gedaan. Omdat ik de pagia niet kan bekijken kan ik nu niet achterhalen of je voor elke wijziging van sortering een nieuwe request naar de server doet of dat het client side afgehandeld wordt.

In principe zou je als je alle data in 1x laadt, de sorteringen en het zoeken door datatables af kunnen laten handelen. Daar hoef je niets meer voor te programmeren. Je hoeft alleen serverside op false te zetten. Je kan dan nog wel de data via ajax ophalen. Alleen hoef je de sortering en het zoeken niet meer te verwerken in de database query.

Als je geen programmeerervaring had, vind ik het knap dat je in die twee weken zo ver gekomen bent.
Goed bezig.

[OzBoz]

Kan kloppen dat het nu niet werkt, was vooral even bezig om te zorgen dat het niet mogelijk is bijvoorbeeld een .exe te hernoemen naar .ini en dan te uploaden. Hoop gepruts maar ik vind het prettig als dingen fool-proof zijn.

Eigenlijk hoeft er niet gesorteerd te worden op de pagina omdat er in mijn optiek maar 1 juiste manier is om de data te tonen. Wel wil ik nog dat je op een auto-type kan filteren maar dat kan prima binnen de pagina.

En het is niet zo dat ik helemaal geen programmeerervaring heb maar het is erg lang geleden dat ik er wat mee gedaan heb. Vooral de dingen met events en callbacks vanaf php > jquery begrijp ik nu beter.

Wat ik wel lastig vind om te verzinnen is of het handiger is om de leesbare tijden gewoon meteen te schrijven in een extra kolom in de tabel en de originele milliseconden tijden te houden voor sorteren of dat je beter bij ophalen pas de normale tijd kan formatten.

Gevoelsmatig is het handiger om gewoon extra kolom mee te bakken in de database omdat daardoor het tonen wellicht wat sneller gaat. En ach, waar hebben we het over. In theorie kun je best weel combinaties hebben aantal automodellen * aantal tracks maar dan nog is het volgens mij eigenlijk weinig data.

Mijn eigen bestand heeft nu ongeveer 130 records dus dat is het aantal rijen in de tabel. Lijkt mij niet echt schokkend. En wat dat betreft zijn die callbacks weer reuze handig omdat je gewoon de user wel op de hoogte kan houden wat er gebeurd.

[Rooligan]

Voor het controleren of de upload niet een hernoemde exe is zou je eens moeten kijken naar de php functie mime_content_type. Voor een ini file zou het mime type volgens mij text/plain moeten zijn.

Maar het kan nog mooier door dit ook te controleren voor de upload heeft plaats gevonden. Hiervoor kan je gebruik maken van jquery validation. Hiermee kan je de invoervelden van een form controleren voordat de submit gedaan wordt. En het is hiermee ook mogelijk om op het mime type van een fileupload te controleren.
Zie: https://jqueryvalidation.org/accept-method/

Sorteren van de tijden moet je inderdaad doen op basis van de milliseconden. Je kan dat als waarde terug geven uit de render functie bij het type 'sort'. En de normale tekst tijd bij de types 'display' en 'filter'.
Zie: https://datatables.net/manual/data/orthogonal-data
En https://datatables.net/manual/data/renderers#Data-rendering

Je hoeft alleen de timestamp waarde op te slaan in de database. Als je het aan de server kant wil converteren kan je met de mysql functie FROM_UNIXTIME deze om zetten in een normaal leesbare tekst. Dus geen reden om de waarde dubbel op te slaan. Client side zoals je nu waarschijnlijk doet kan natuurlijk ook.

Voor het filteren van de automodellen kan je eens kijken naar dit voorbeeld op de datatables website.
https://datatables.net/examples/api/multi_filter_select.html

Oh, ik zie dat ik al weer een aardige lap tekst geschreven heb. Nou ja ehm.. succes in ieder geval.