Index: vhLibLogging.csp
===================================================================
diff -u -r179 -r180
--- vhLibLogging.csp	(.../vhLibLogging.csp)	(revision 179)
+++ vhLibLogging.csp	(.../vhLibLogging.csp)	(revision 180)
@@ -10,6 +10,7 @@
 
     <script type="text/javascript" src="javascript/jquery/jquery-3.3.1.js"></script>
     <script type="text/javascript" src="javascript/jquery/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
+    <script type="text/javascript" src="javascript/jquery/plugins/datatables/1.10.16/jquery.dataTables.min.js"></script>
     <script type="text/javascript" src="javascript/vhliblogging.js"></script>
 </head>
 
@@ -41,7 +42,7 @@
 		<br/><br/>
 
 		<form name="theForm" method="post" action="vhLibLogging.csp">
-			<DIV id="divGroepenCheckboxes">
+			<DIV id="divGroepenCheckboxes" class="checkboxes">
 				<SCRIPT language="Cache" runat="server">
 					Set GroepenIt=##class(TECH.ListIterator).%New(LogViewerHelper.GeefGroepen())
 				</SCRIPT>
@@ -60,7 +61,7 @@
 				<DIV style="clear:both;"></DIV>
 			</DIV>
 			<BR>
-			<DIV>
+			<DIV class="checkboxes">
 				<DIV class="clsToonAlleNiveausDiv"><NOBR><LABEL for="chkToonAlleNiveaus"><INPUT type="checkbox" ID="chkToonAlleNiveaus" name="chkToonAlleNiveaus" onclick="chkToonAlleNiveausClick();" value="1" #($S('ToonAlleNiveaus:"", 1:"checked"))#>Toon alle niveaus</INPUT></LABEL> &nbsp;&nbsp; OF &nbsp;&nbsp;</NOBR></DIV>
 				<SCRIPT language="Cache" runat="server">
 					Set NiveauIt=##class(vhLib.enu.LogNiveau).ValueListIterator()
@@ -77,7 +78,7 @@
 				</CSP:WHILE>
 				<DIV style="clear:both;"></DIV>
 			</DIV>
-			<DIV>
+			<DIV class="checkboxes">
 				<LABEL><INPUT type="checkbox" ID="chkEnkelTeTrierenOfBehandelen" name="chkEnkelTeTrierenOfBehandelen" value="1" #($S('EnkelTeTrierenOfBehandelen:"", 1:"checked"))# >Toon enkel de te tri�ren of behandelen errors.</INPUT></LABEL>
 			</DIV>
 			<BR>
@@ -91,108 +92,98 @@
 
 	<br/>
 	
+	<csp:if condition="($Length(sqlActive))">
+		<SCRIPT LANGUAGE="SQL" NAME="queryA" P1=#($G(%request.Data("P1",1),"A"))#>#(sqlActive)#</SCRIPT>
 	
-<CSP:IF condition="($L(sqlActive))">
-	<SCRIPT LANGUAGE="SQL" NAME="queryA" P1=#($G(%request.Data("P1",1),"A"))#>#(sqlActive)#</SCRIPT>
-	<SCRIPT language="Cache" runat="server">Set qryAColCount=queryA.GetColumnCount()</SCRIPT>
-	<FORM id="frmQItemsList" name="frmQItemsList" action="vhLogging.csp" target="_blank" method="post">
-	<A name="LoggingTable"/>
-	<table width="" border="1" bordercolor="darkblue" cellspacing="0" cellpadding="1" class="clsQryTable">
-		<COLGROUP>		
-			<COL align="center">			
-			<CSP:WHILE COUNTER=col CONDITION=(col<qryAColCount)>   <CSP:COMMENT><!-- CREATE COLUMN DEFs --></CSP:COMMENT>
-			<COL align=#($S($$$UCase(queryA.GetColumnName(col))?1(1"PARAMETERS",1"LESSDETAIL"):"""left""",1:"""center"""))#>			
-			</CSP:WHILE>
-		</COLGROUP>		
-		<SCRIPT language="Cache" runat="server">
-			Kill arColSpecial
-		</SCRIPT>
-		<tr>
-			<CSP:WHILE COUNTER=col CONDITION=(col<qryAColCount)>   <CSP:COMMENT><!-- CREATE COLUMN HEADERS --></CSP:COMMENT>
-			<SCRIPT language="Cache" runat="server">
-				Set ColumnName=queryA.GetColumnName(col)
-				//Set:($$$UCase(ColumnName)="TASK") arColSpecial(col)="Task"
-			</SCRIPT>
-			<th><b>#(ColumnName)#</b></th>
-			</CSP:WHILE>
-		</tr>
-		<SCRIPT language="Cache" runat="server">
-		 set PrevDatum = ""
-		</SCRIPT>
-		<CSP:WHILE COUNTER=row CONDITION="(queryA.Next())&(row<MaxRows)">            <CSP:COMMENT><!-- ALL ROWS IN THE RESULT SET --></CSP:COMMENT>
-		<SCRIPT language="Cache" runat="server">
-		 set Datum=queryA.GetDataByName("Datum")
-		</SCRIPT>
-		<CSP:IF condition="(Datum'=PrevDatum)">
-		<tr><td align="left" colspan="#(qryAColCount)#">#(Datum)#</td></tr>
-		</CSP:IF>
-		<tr class=#($S(row#2:"DarkRow",1:"LightRow"))# #($S(queryA.GetDataByName("Niveau")?1(1"E"):"style=""color:#CC0033;""",queryA.GetDataByName("Niveau")?1(1"W"):"style=""color:#FF9900;""", 1:""))#>
-			<CSP:WHILE COUNTER=col CONDITION=(col<qryAColCount)>
-			<SCRIPT language="Cache" runat="server">
-				#define HTML2(%v)                      $ZCVT(%v,"O","HTML")
+		<form id="frmQItemsList" name="frmQItemsList" action="vhLogging.csp" target="_blank" method="post">
+			<table id="log-table" class="stripe">
+				<thead>
+					<script language="Cache" runat="server">Set ColumnCount = queryA.GetColumnCount()</script>
+					<csp:while counter="col" condition="(col < ColumnCount)">
+						<th>
+							<script language="Cache" runat="server">Set ColumnName = queryA.GetColumnName(col)</script>
+							<csp:if condition='$$$Not(ColumnName = "ID")'>
+								<div>#(ColumnName)#</div>
+								<div class="data-table-search"/>
+							</csp:if>				
+						</th>
+					</csp:while>
+				</thead>
 
-				Set tmpVal=queryA.GetData(col)
-				Set DataIsSimpleValue=1
-				Set UsePreFormattedHtml=0
-				Set UseCollapsedSection=1
-				If $$$UCase(queryA.GetColumnName(col))?1(1"LESSDETAIL")&&(tmpVal'="") {
-					Set UsePreFormattedHtml=1
-					Set DataIsSimpleValue=0
-					Set tmpVal=$$$HTML2(tmpVal)
-				} ElseIf $$$UCase(queryA.GetColumnName(col))?1(1"DETAIL",1"DETAILTRUNC",1"DETAILEXPAND")&&(tmpVal'="") {
-					Set UseCollapsedSection=1
-					Set UsePreFormattedHtml=1
-					Set DataIsSimpleValue=0
-					Set tmpDataSummary=$$$HTML2($TR($E(tmpVal,1,100),$C(13,10),"  "))
-					Set tmpVal=$$$HTML2(tmpVal)
-				} ElseIf  $$$UCase(queryA.GetColumnName(col))?1(1"ID")&&(tmpVal'="") {
-					set DataIsSimpleValue=0
-				}
-				Set PrevDatum = Datum
-				
-				#Dim FilterVeldInQuery As %String = queryA.GetColumnName(col)
-				Set:("Story"=FilterVeldInQuery) FilterVeldInQuery = "GekendeExceptie->StoryID"
-				Set HyperlinkFilterQuery = "fld" _ $$$UCase(FilterVeldInQuery) _"="_ tmpVal
-			</SCRIPT>
-		<CSP:IF condition='queryA.GetColumnName(col)="ID"'>
-			<td><div>
-				<div class="openDetail" id=#(queryA.GetDataByName("ID"))#>more..</div>
-			</div></td>	
-		<CSP:ELSEIF condition='(DataIsSimpleValue)'>
-			<td><div>
-				<a href="#($G(arUrl("ToggleQED")))#&#(HyperlinkFilterQuery)#"
-				#($S(queryA.GetDataByName("Niveau")?1(1"E"):"style=""color:#CC0033;""",queryA.GetDataByName("Niveau")?1(1"W"):"style=""color:#FF9900;""", 1:""))#
-				>#($S($L(tmpVal):tmpVal,1:"&nbsp;"))#</a>
-			</div></td>
-		<CSP:ELSEIF condition='(UseCollapsedSection)'>
-			<td align="left">
-				<DIV class="clsDetailDataCol">
-					<P onclick="ToggleDetailsSummary(this.parentNode,this);">
-						<SPAN name="DetailLabel" class="clsDetailDataHdr">Summary:</SPAN>
-						<SPAN name="DetailInfo" class="clsDetailInfo">#($S($L(tmpDataSummary):tmpDataSummary, 1:"&nbsp;"))#</SPAN>
-					</P>
-					<DIV><PRE>#($S($L(tmpVal):tmpVal,1:"&nbsp;"))#</PRE></DIV>
-				</DIV>
-			</td>
-		<CSP:ELSE>
-			<td align="left">
-				<div>
-					<PRE>
-#($E(tmpVal,1,32000))#
-					</PRE>
-				</div>
-			</td>
-		</CSP:IF>
-			</CSP:WHILE>
-		</tr>
-		</CSP:WHILE>
-	</table>
-	</FORM>
-	<BR>
-</CSP:IF>
+				<script language="Cache" runat="server">Set PrevDatum = ""</script>
+		
+				<tbody>
+					<csp:while COUNTER=row CONDITION="(queryA.Next())&(row<MaxRows)">
+						<script language="Cache" runat="server">Set Datum = queryA.GetDataByName("Datum")</script>
+						<script language="Cache" runat="server">Set ErrorLevel = queryA.GetDataByName("Niveau")</script>
+						<script language="Cache" runat="server">Set RowClass = $Select(row#2:"odd", 1:"even")</script>
+						<script language="Cache" runat="server">Set ErrorClass = $Select((ErrorLevel = "E"):"error", (ErrorLevel = "W"):"warning", 1:"")</script>
+						
+						<tr class="#(RowClass)# #(ErrorClass)#">
+						<CSP:WHILE COUNTER=col CONDITION=(col<ColumnCount)>
+							<SCRIPT language="Cache" runat="server">
+								#define HTML2(%v)                      $ZCVT(%v,"O","HTML")
 
+								Set tmpVal=queryA.GetData(col)
+								Set DataIsSimpleValue=1
+								Set UsePreFormattedHtml=0
+								Set UseCollapsedSection=1
+								If $$$UCase(queryA.GetColumnName(col))?1(1"LESSDETAIL")&&(tmpVal'="") {
+									Set UsePreFormattedHtml=1
+									Set DataIsSimpleValue=0
+									Set tmpVal=$$$HTML2(tmpVal)
+								} ElseIf $$$UCase(queryA.GetColumnName(col))?1(1"DETAIL",1"DETAILTRUNC",1"DETAILEXPAND")&&(tmpVal'="") {
+									Set UseCollapsedSection=1
+									Set UsePreFormattedHtml=1
+									Set DataIsSimpleValue=0
+									Set tmpDataSummary=$$$HTML2($TR($E(tmpVal,1,100),$C(13,10),"  "))
+									Set tmpVal=$$$HTML2(tmpVal)
+								} ElseIf  $$$UCase(queryA.GetColumnName(col))?1(1"ID")&&(tmpVal'="") {
+									set DataIsSimpleValue=0
+								}
+								Set PrevDatum = Datum
+								
+								#Dim FilterVeldInQuery As %String = queryA.GetColumnName(col)
+								Set:("Story"=FilterVeldInQuery) FilterVeldInQuery = "GekendeExceptie->StoryID"
+								Set HyperlinkFilterQuery = "fld" _ $$$UCase(FilterVeldInQuery) _"="_ tmpVal
+							</SCRIPT>
 
-<div id="dialog" title="Detail"></div>
+							<csp:if condition='queryA.GetColumnName(col)="ID"'>
+								<td>
+									<div class="detail ui-button ui-widget ui-corner-all" id="#(queryA.GetDataByName("ID"))#">
+										Detail
+										<input type="hidden" class="action" value="#(queryA.GetDataByName("Actie"))#"/>
+									</div>
+								</td>	
+							<csp:elseif condition='(DataIsSimpleValue)'>
+								<td>
+									<a class="#(ErrorClass)#" href="#($Get(arUrl("ToggleQED")))#&#(HyperlinkFilterQuery)#">#($Select($Length(tmpVal):tmpVal, 1:"&nbsp;"))#</a>
+								</td>
+							<csp:elseif condition='(UseCollapsedSection)'>
+								<td>
+									<div class="clsDetailDataCol">
+										<p onclick="ToggleDetailsSummary(this.parentNode,this);">
+											<span name="DetailLabel" class="clsDetailDataHdr">Summary:</span>
+											<span name="DetailInfo" class="clsDetailInfo">#($Select($Length(tmpDataSummary):tmpDataSummary, 1:"&nbsp;"))#</span>
+										</p>
+										<div><pre>#($Select($Length(tmpVal):tmpVal,1:"&nbsp;"))#</pre></div>
+									</div>
+								</td>
+							<csp:else>
+								<td>
+									<div><pre>#($Extract(tmpVal, 1, 32000))#</pre></div>
+								</td>
+							</csp:if>
+						</csp:while>
+						</tr>
+					</csp:while>
+					
+				</tbody>
+			</table>
+		</form>
+	</csp:if>
+	
+	<div id="dialog" title="Detail"></div>
 
 </div>