Progress Bar
Ik ben momenteel bezig met tabellen die ik met datatables extra opties heb gegeven.
De data wordt automatisch uit een .txt bestand gehaald momenteel, maar ik wil dit op termijn veranderen naar .php zodat alle gegevens uit de database kunnen komen. Ik heb dus momenteel een lijst van verschillende handelingen en de bedoeling is dat er in de tabel een progress bar getoond wordt en niet gewoon een percentage. Maar ik heb al veel zitten opzoeken en vind nergens hoe ik er aan moet beginnen, hebben jullie een idee alvast bedankt!
Deze code haalt de gegevens op:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
$(document).ready(function() {
var oTable = $('#gamenr1').dataTable( {
dataType: "html",
"sAjaxSource": 'gegevens.txt',
} );
setInterval(function()
{
oTable.fnReloadAjax();
},999920000);
} );
var oTable = $('#gamenr1').dataTable( {
dataType: "html",
"sAjaxSource": 'gegevens.txt',
} );
setInterval(function()
{
oTable.fnReloadAjax();
},999920000);
} );
Dit kun je vinden in de gegevens.txt:
(is slechts een deel om de structuur te tonen.)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
{
"aaData": [
[
"James",
"start kamelenrace",
"25",
"5.5",
"5%"
],
[
"Dries",
"Start kamelenrace",
"19",
"6",
"5.5%"
],
[
"Olivier",
"Kamelenrace gestart",
"28",
"4",
"12%"
]
]
}
"aaData": [
[
"James",
"start kamelenrace",
"25",
"5.5",
"5%"
],
[
"Dries",
"Start kamelenrace",
"19",
"6",
"5.5%"
],
[
"Olivier",
"Kamelenrace gestart",
"28",
"4",
"12%"
]
]
}
En nu zou ik graag hebben dat in mijn tabel de laatste kolom (het percentage) via een progress bar komt. Heb veel zitten zoeken maar weet niet hoe ik er aan begin.
De tabel ziet er zo uit:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<table cellpadding="0" cellspacing="0" border="0" class="table table-hover table-nomargin table-bordered dataTable-noheader dataTable-nofooter display" id="example">
<thead>
<tr>
<th width="20%">Naam</th>
<th width="25%">Opdracht</th>
<th width="25%">Punten</th>
<th width="15%">Levens</th>
<th width="15%">Vooruitgang</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th>Naam</th>
<th>Opdracht</th>
<th>Punten</th>
<th>Levens</th>
<th>Vooruitgang</th>
</tr>
</tfoot>
</table>
<thead>
<tr>
<th width="20%">Naam</th>
<th width="25%">Opdracht</th>
<th width="25%">Punten</th>
<th width="15%">Levens</th>
<th width="15%">Vooruitgang</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th>Naam</th>
<th>Opdracht</th>
<th>Punten</th>
<th>Levens</th>
<th>Vooruitgang</th>
</tr>
</tfoot>
</table>
De progress bar code zou ongeveer zo moeten zijn:
Code (php)
1
2
2
<div class="progress progress-success">
<div class="bar" style="width: HET PERCENTAGE"></div></div>
<div class="bar" style="width: HET PERCENTAGE"></div></div>
Heeft iemand ervaring alvast bedankt!
Had hiermee al wat geprobeerd (http://www.datatables.net/release-datatables/examples/server_side/row_details.html) maar dan krijg ik enkel errors?
Gewijzigd op 27/04/2014 19:39:32 door Wouter J
Ik heb nu nog eens de vraag van Jos gelezen en het lijkt erop dat je niet opzoek bent naar een progress bar die loopt, zoals Frank en ik hebben gegeven, maar eentje die stilstaat.
In dat geval kun je makkelijk met het progress element werken:
Code (php)
1
<progress min="0" max="100" value="12"></progress>
Dit toont een progress bar op 12% (12 op een schaal van 0-100).
Het browser support voor deze tag ligt op 72%, wat redelijk goed is: http://caniuse.com/#feat=progressmeter
Dit kun je verhogen tot een bijna compleet niveau als je deze polyfill gebruikt: http://lea.verou.me/polyfills/progress/
Toevoeging op 27/04/2014 21:38:17:
@donny: hiermee kom je vast wel verder: http://www.johnboy.com/php-upload-progress-bar/
Wouter J op 27/04/2014 19:59:37:
Donny, kun je daarvoor misschien een ander topic openen. Daar gaat dit topic namelijk niet over.
Ik heb nu nog eens de vraag van Jos gelezen en het lijkt erop dat je niet opzoek bent naar een progress bar die loopt, zoals Frank en ik hebben gegeven, maar eentje die stilstaat.
In dat geval kun je makkelijk met het progress element werken:
Dit toont een progress bar op 12% (12 op een schaal van 0-100).
Het browser support voor deze tag ligt op 72%, wat redelijk goed is: http://caniuse.com/#feat=progressmeter
Dit kun je verhogen tot een bijna compleet niveau als je deze polyfill gebruikt: http://lea.verou.me/polyfills/progress/
Ik heb nu nog eens de vraag van Jos gelezen en het lijkt erop dat je niet opzoek bent naar een progress bar die loopt, zoals Frank en ik hebben gegeven, maar eentje die stilstaat.
In dat geval kun je makkelijk met het progress element werken:
Code (php)
1
<progress min="0" max="100" value="12"></progress>
Dit toont een progress bar op 12% (12 op een schaal van 0-100).
Het browser support voor deze tag ligt op 72%, wat redelijk goed is: http://caniuse.com/#feat=progressmeter
Dit kun je verhogen tot een bijna compleet niveau als je deze polyfill gebruikt: http://lea.verou.me/polyfills/progress/
Bedankt dat zocht ik,
heb het wel nog wat moeten aanpassen voor de ajax :)