diff --git a/src/fr/devinsy/statoolinfos/htmlize/uptimeView.xhtml b/src/fr/devinsy/statoolinfos/htmlize/uptimeView.xhtml
index 52d34a9..d28d432 100644
--- a/src/fr/devinsy/statoolinfos/htmlize/uptimeView.xhtml
+++ b/src/fr/devinsy/statoolinfos/htmlize/uptimeView.xhtml
@@ -14,8 +14,8 @@
 	<div style="width:1150px; margin: 0 auto 0 auto;">
 		<h2>Disponibilité des services</h2>
 		<div style="margin-left: 0px; margin-bottom: 10px;">
-			<a id="allButton" href="#all" class="button" onclick="javascript:setView('ALL');">Tout</a>
-			<a id="shrunkButton" href="#shrunk" class="button" onclick="javascript:setView('SHRUNK');">Réduit</a>
+			<a id="allButton" class="button" href="#" onclick="javascript:filter('ALL');">Tout</a>
+			<a id="nokButton" class="button" href="#" onclick="javascript:filter('NOK');">Indisponibles</a>
 		</div>
 		
 		<div class="legend right" style="float: right; margin-top: -150px;">
@@ -39,70 +39,114 @@
 				<li><img src="status-void.png" title="" /><span id="voidCount">n/a</span></li>
 			</ul>
 		</div>
-		<table class="center_table table_classic left uptimeTable">
-			<tr id="lineHeader">
-				<th id="lineName" style="padding-top: 0; padding-bottom: 0;">Service</th>
-				<th id="lineName" style="padding-top: 0; padding-bottom: 0;">Organisation</th>
-				<td id="lineHeader-21">X</td>
-				<td id="lineHeader-20">X</td>
-				<td id="lineHeader-19">X</td>
-				<td id="lineHeader-18">X</td>
-				<td id="lineHeader-17">X</td>
-				<td id="lineHeader-16">X</td>
-				<td id="lineHeader-15">X</td>
-				<td id="lineHeader-14">X</td>
-				<td id="lineHeader-13">X</td>
-				<td id="lineHeader-12">X</td>
-				<td id="lineHeader-11">X</td>
-				<td id="lineHeader-10">X</td>
-				<td id="lineHeader-9">X</td>
-				<td id="lineHeader-8">X</td>
-				<td id="lineHeader-7">X</td>
-				<td id="lineHeader-6">X</td>
-				<td id="lineHeader-5">X</td>
-				<td id="lineHeader-4">X</td>
-				<td id="lineHeader-3">X</td>
-				<td id="lineHeader-2">X</td>
-				<td id="lineHeader-1">X</td>
-				<td id="lineHeader-0">X</td>
-			</tr>
-			<tr id="line">
-				<td id="lineName" style="padding-top: 0; padding-bottom: 0;">
-					<a href="#" id="lineNameLink">
-						<img id="lineLogo" src="" style="width: 26px; height: 26px; padding-top:0; padding-bottom: 0; vertical-align: middle;"/>
-						&#160;<span id="lineNameValue">n/a</span>
-					</a>
-				</td>
-				<td id="lineOrganization" style="padding-top: 0; padding-bottom: 0;">
-					<a href="#" id="lineOrganizationLink">
-						<img id="lineOrganizationLogo" src="" style="width: 26px; height: 26px; padding-top:0; padding-bottom: 0; vertical-align: middle;"/>
-						&#160;<span id="lineOrganizationValue">n/a</span>
-					</a>
-				</td>
-				<td id="uptime-21"><img id="statusImg-21" src="status-void.png" /></td>
-				<td id="uptime-20"><img id="statusImg-20" src="status-void.png" /></td>
-				<td id="uptime-19"><img id="statusImg-19" src="status-void.png" /></td>
-				<td id="uptime-18"><img id="statusImg-18" src="status-void.png" /></td>
-				<td id="uptime-17"><img id="statusImg-17" src="status-void.png" /></td>
-				<td id="uptime-16"><img id="statusImg-16" src="status-void.png" /></td>
-				<td id="uptime-15"><img id="statusImg-15" src="status-void.png" /></td>
-				<td id="uptime-14"><img id="statusImg-14" src="status-void.png" /></td>
-				<td id="uptime-13"><img id="statusImg-13" src="status-void.png" /></td>
-				<td id="uptime-12"><img id="statusImg-12" src="status-void.png" /></td>
-				<td id="uptime-11"><img id="statusImg-11" src="status-void.png" /></td>
-				<td id="uptime-10"><img id="statusImg-10" src="status-void.png" /></td>
-				<td id="uptime-9"><img id="statusImg-9" src="status-void.png" /></td>
-				<td id="uptime-8"><img id="statusImg-8" src="status-void.png" /></td>
-				<td id="uptime-7"><img id="statusImg-7" src="status-void.png" /></td>
-				<td id="uptime-6"><img id="statusImg-6" src="status-void.png" /></td>
-				<td id="uptime-5"><img id="statusImg-5" src="status-void.png" /></td>
-				<td id="uptime-4"><img id="statusImg-4" src="status-void.png" /></td>
-				<td id="uptime-3"><img id="statusImg-3" src="status-void.png" /></td>
-				<td id="uptime-2"><img id="statusImg-2" src="status-void.png" /></td>
-				<td id="uptime-1"><img id="statusImg-1" src="status-void.png" /></td>
-				<td id="uptime-0"><img id="statusImg-0" src="status-void.png" /></td>
-			</tr>
+		<table id="uptimeTable" class="center_table table_classic left uptimeTable">
+			<thead>
+				<tr id="lineHeader">
+					<th id="lineName" style="padding-top: 0; padding-bottom: 0;">Service</th>
+					<th id="lineName" style="padding-top: 0; padding-bottom: 0;">Organisation</th>
+					<td id="lineHeader-21">X</td>
+					<td id="lineHeader-20">X</td>
+					<td id="lineHeader-19">X</td>
+					<td id="lineHeader-18">X</td>
+					<td id="lineHeader-17">X</td>
+					<td id="lineHeader-16">X</td>
+					<td id="lineHeader-15">X</td>
+					<td id="lineHeader-14">X</td>
+					<td id="lineHeader-13">X</td>
+					<td id="lineHeader-12">X</td>
+					<td id="lineHeader-11">X</td>
+					<td id="lineHeader-10">X</td>
+					<td id="lineHeader-9">X</td>
+					<td id="lineHeader-8">X</td>
+					<td id="lineHeader-7">X</td>
+					<td id="lineHeader-6">X</td>
+					<td id="lineHeader-5">X</td>
+					<td id="lineHeader-4">X</td>
+					<td id="lineHeader-3">X</td>
+					<td id="lineHeader-2">X</td>
+					<td id="lineHeader-1">X</td>
+					<td id="lineHeader-0">X</td>
+				</tr>
+			</thead>
+			<tbody>
+				<tr id="line">
+					<td id="lineName" style="padding-top: 0; padding-bottom: 0;">
+						<a href="#" id="lineNameLink">
+							<img id="lineLogo" src="" style="width: 26px; height: 26px; padding-top:0; padding-bottom: 0; vertical-align: middle;"/>
+							&#160;<span id="lineNameValue">n/a</span>
+						</a>
+					</td>
+					<td id="lineOrganization" style="padding-top: 0; padding-bottom: 0;">
+						<a href="#" id="lineOrganizationLink">
+							<img id="lineOrganizationLogo" src="" style="width: 26px; height: 26px; padding-top:0; padding-bottom: 0; vertical-align: middle;"/>
+							&#160;<span id="lineOrganizationValue">n/a</span>
+						</a>
+					</td>
+					<td id="uptime-21"><img id="statusImg-21" src="status-void.png" /></td>
+					<td id="uptime-20"><img id="statusImg-20" src="status-void.png" /></td>
+					<td id="uptime-19"><img id="statusImg-19" src="status-void.png" /></td>
+					<td id="uptime-18"><img id="statusImg-18" src="status-void.png" /></td>
+					<td id="uptime-17"><img id="statusImg-17" src="status-void.png" /></td>
+					<td id="uptime-16"><img id="statusImg-16" src="status-void.png" /></td>
+					<td id="uptime-15"><img id="statusImg-15" src="status-void.png" /></td>
+					<td id="uptime-14"><img id="statusImg-14" src="status-void.png" /></td>
+					<td id="uptime-13"><img id="statusImg-13" src="status-void.png" /></td>
+					<td id="uptime-12"><img id="statusImg-12" src="status-void.png" /></td>
+					<td id="uptime-11"><img id="statusImg-11" src="status-void.png" /></td>
+					<td id="uptime-10"><img id="statusImg-10" src="status-void.png" /></td>
+					<td id="uptime-9"><img id="statusImg-9" src="status-void.png" /></td>
+					<td id="uptime-8"><img id="statusImg-8" src="status-void.png" /></td>
+					<td id="uptime-7"><img id="statusImg-7" src="status-void.png" /></td>
+					<td id="uptime-6"><img id="statusImg-6" src="status-void.png" /></td>
+					<td id="uptime-5"><img id="statusImg-5" src="status-void.png" /></td>
+					<td id="uptime-4"><img id="statusImg-4" src="status-void.png" /></td>
+					<td id="uptime-3"><img id="statusImg-3" src="status-void.png" /></td>
+					<td id="uptime-2"><img id="statusImg-2" src="status-void.png" /></td>
+					<td id="uptime-1"><img id="statusImg-1" src="status-void.png" /></td>
+					<td id="uptime-0"><img id="statusImg-0" src="status-void.png" /></td>
+				</tr>
+			</tbody>
 		</table>
-	</div>	
+	</div>
+
+    <script type="text/javascript">
+$(document).ready(function()
+{
+    var table = $('#uptimeTable').DataTable(
+    {
+        paging: false,
+        ordering:  true,
+        "order": [[ 0, "asc" ]],
+        language: dataTableFrench
+    });
+
+    var showAll=1;
+    $("#nokButton").click(function()
+    {
+        if (showAll == 1)
+        {
+            showAll=0;
+            $.fn.dataTable.ext.search.push(
+                function(settings, data, dataIndex)
+                {
+                    return !table.cell(dataIndex, 23).data().includes('-ok');
+                }
+            );
+            table.draw();
+        }
+    });
+
+    $("#allButton").click(function()
+	{
+	    if (showAll == 0)
+	    {
+	        showAll=1;
+	        $.fn.dataTable.ext.search.pop();
+	        table.draw();
+	    }
+	});
+
+});
+    </script>
 </body>
 </html>