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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
| /*
* C'est ici que l'on crée la table qui crée les progressbar
* On ne les crée qu'une seule fois ?
*/
var allLabel = null,
allProgressbar = null;
function InitTopDataTable() {
var TopTable = $("#TopTable").dataTable({
"bPaginate": false,
"bJQueryUI": true,
"bServeSide": true,
"sAjaxSource": "Home/GetTopTable",
"bProcessing": true,
"aoColumns": [
{ "sName": "ID" },
{ "sName": "PROGRESS",
"fnRender": function (oObj) {
return '<div id="progressbar' + oObj.aData[0] + '\"><div id=\"progress-label' + oObj.aData[0] + '\"></div></div>';
}
}
]
});
}
/*
* Test simplifié.
* On parcourt toutes les progressbar en donnant
* une valeur et une couleur aléatoire.
*/
function UpdateProgressBar( json ){
var jObjLabel = null,
jObjBar = null,
jObjBarValue = null;
for ( var i = 0; i < json.aaData.length; ++i ){
// debug
// console.log( "Updtate Progressbar " + i );
jObjLabel = allLabel.eq( i );
jObjBar = allProgressbar.eq( i );
jObjBarValue = jObjBar.find(".ui-progressbar-value");
jObjBar.progressbar( "option", {
"value" : Math.floor( Math.random() * 100 )
});
jObjLabel.text( jObjBar.progressbar( "value" ) + "%" );
jObjBarValue.css({
"background" : '#' + Math.floor( Math.random() * 16777215 ).toString( 16 )
});
}
}
function RefreshTable(tableId, urlData, bar) {
$.getJSON(urlData, null, function (json) {
table = $(tableId).dataTable();
oSettings = table.fnSettings();
table.fnClearTable(this);
for (var i = 0; i < json.aaData.length; ++i) {
table.oApi._fnAddData(oSettings, json.aaData[i]);
}
oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
table.fnDraw();
if (bar == "top") {
UpdateProgressBar(json);
}
});
}
function AutoReload() {
RefreshTable("#TopTable", "/Home/GetTopTable", "top");
setTimeout(function () { AutoReload(); }, 1000);
}
$(document).ready( function(){
InitTopDataTable();
var allLabel = $( "div[id^='progress-label']" ),
allProgressbar = $( "div[id^='progressbar']" );
// debug console, touche F12
// résultat correct ?
console.log( allLabel, allProgressbar );
// initialisation
allProgressbar.progressbar({ "value": false });
/*
* Tout est initialisé, alors on débute le cycle
* des rafraîchissements
*/
setTimeout( function(){ AutoReload(); }, 1000 );
}); |
