diff --git a/src/main/java/com/alibaba/druid/stat/DruidStatService.java b/src/main/java/com/alibaba/druid/stat/DruidStatService.java
index 28d40a91e1..ae554f6fa7 100644
--- a/src/main/java/com/alibaba/druid/stat/DruidStatService.java
+++ b/src/main/java/com/alibaba/druid/stat/DruidStatService.java
@@ -122,8 +122,7 @@ public final class DruidStatService implements DruidStatServiceMBean {
         }
         
         if (url.startsWith("/wall.json")) {
-        	Object result = statManagerFacade.getWallStatMap(null);
-            return returnJSONResult(RESULT_CODE_SUCCESS, result);
+        	return returnJSONResult(RESULT_CODE_SUCCESS, getWallStatMap(parameters));
         }
         
         if (url.startsWith("/wall-") && url.indexOf(".json") > 0) {
@@ -276,7 +275,14 @@ public final class DruidStatService implements DruidStatServiceMBean {
             dataSourceId = Integer.parseInt(dataSourceIdParam);
         }
         
-        return statManagerFacade.getWallStatMap(dataSourceId);
+        Map<String, Object> result = statManagerFacade.getWallStatMap(dataSourceId);
+        List<Map<String, Object>> sortedArray = comparatorOrderBy((List<Map<String, Object>>)result.get("tables"), parameters);
+        result.put("tables", sortedArray);
+        
+        sortedArray = comparatorOrderBy((List<Map<String, Object>>)result.get("functions"), parameters);
+        result.put("functions", sortedArray);
+        
+        return result;
     }
 
     private String getSqlStat(Integer id) {
diff --git a/src/main/resources/support/http/resources/wall.html b/src/main/resources/support/http/resources/wall.html
index eac8bd835f..e7d41f64a7 100644
--- a/src/main/resources/support/http/resources/wall.html
+++ b/src/main/resources/support/http/resources/wall.html
@@ -59,20 +59,20 @@
 								<td></td>
 							</tr>
 						</table>
-						<table id="dataTable1" style="background-color: #fff" class="table table-bordered responsive-utilities">
+						<table id="dataTable1" style="background-color: #fff" class="table table-bordered table-striped responsive-utilities">
 							<thead>
 								<tr >
-									<td valign="top" width="100" class="td_lable">Table Name</td>
-									<td valign="top" width="100" class="td_lable">SelectCount</td>
-									<td valign="top" width="100" class="td_lable">SelectIntoCount</td>
-									<td valign="top" width="100" class="td_lable">InsertCount</td>
-									<td valign="top" width="100" class="td_lable">UpdateCount</td>
-									<td valign="top" width="100" class="td_lable">DeleteCount</td>
-									<td valign="top" width="100" class="td_lable">TruncateCount</td>
-									<td valign="top" width="100" class="td_lable">CreateCount</td>
-									<td valign="top" width="100" class="td_lable">AlterCount</td>
-									<td valign="top" width="100" class="td_lable">DropCount</td>
-									<td valign="top" width="100" class="td_lable">ReplaceCount</td>
+									<th class="td_lable"><a id="th-name" href="javascript:void(0);">Table Name</a></th>
+									<th class="td_lable"><a id="th-selectCount" href="javascript:void(0);">SelectCount</a></th>
+									<th class="td_lable"><a id="th-selectIntoCount" href="javascript:void(0);">SelectIntoCount</a></th>
+									<th class="td_lable"><a id="th-insertCount" href="javascript:void(0);">InsertCount</a></th>
+									<th class="td_lable"><a id="th-updateCount" href="javascript:void(0);">UpdateCount</a></th>
+									<th class="td_lable"><a id="th-deleteCount" href="javascript:void(0);">DeleteCount</a></th>
+									<th class="td_lable"><a id="th-truncateCount" href="javascript:void(0);">TruncateCount</a></th>
+									<th class="td_lable"><a id="th-createCount" href="javascript:void(0);">CreateCount</a></th>
+									<th class="td_lable"><a id="th-alterCount" href="javascript:void(0);">AlterCount</a></th>
+									<th class="td_lable"><a id="th-dropCount" href="javascript:void(0);">DropCount</a></th>
+									<th class="td_lable"><a id="th-replaceCount" href="javascript:void(0);">ReplaceCount</a></th>
 								</tr>
 							</thead>
 							<tbody></tbody>
@@ -80,8 +80,8 @@
 						<table id="dataTable2" style="background-color: #fff" class="table table-bordered responsive-utilities">
 							<thead>
 								<tr >
-									<td valign="top" width="100" class="td_lable">Function Name</td>
-									<td valign="top" width="100" class="td_lable">InvokeCount</td>
+									<th class="td_lable">Function Name</th>
+									<th class="td_lable"><a id="th-invokeCount" href="javascript:void(0);">InvokeCount</a></th>
 								</tr>
 							</thead>
 							<tbody></tbody>
@@ -91,66 +91,69 @@
       		</div> 
     	<script type="text/javascript">
 			$.namespace("druid.datasource");
-			druid.datasource = function () {  
+			druid.wall = function () {  
 				return  {
 					init : function() {
+						$("#dataTable1 th a").click(function(obj) {
+	    					druid.common.setOrderBy(obj.target.id.substring(3))
+	    				})
+	    				$("#dataTable2 th a").click(function(obj) {
+	    					druid.common.setOrderBy(obj.target.id.substring(3))
+	    				})
 						druid.common.buildHead(3);
-						this.ajaxRequestForBasicInfo();
+						
+						druid.common.ajaxuri = 'wall.json?';
+	    				druid.common.handleAjaxResult = druid.wall.handleAjaxResult;
+	    				druid.common.ajaxRequestForBasicInfo();
+	    				setInterval("druid.common.ajaxRequestForBasicInfo();",5000);
 					},
 					
-					ajaxRequestForBasicInfo : function() {
-						$.ajax({
-							type: 'POST',
-							url: "wall.json",
-							success: function(data) {
-								$("#CheckCount").text(data.Content.checkCount)
-								$("#HardCheckCount").text(data.Content.hardCheckCount)
-								$("#ViolationCount").text(data.Content.violationCount)
-								$("#BlackListHitCount").text(data.Content.blackListHitCount)
-								$("#BlackListSize").text(data.Content.blackListSize)
-								$("#WhiteListHitCount").text(data.Content.whiteListHitCount)
-								$("#WhiteListSize").text(data.Content.whiteListSize)
-								$("#SyntaxErrrorCount").text(data.Content.syntaxErrrorCount)
-								
-								var html = "";
-								var tables = data.Content.tables;
-			    				for ( var i = 0; i < tables.length; i++) {
-			    					var table = tables[i];
-			    					html += "<tr>";
-			    					html += "<td>" + table.name + "</td>";
-			    					html += "<td>" + (table.selectCount ? table.selectCount : 0)+ "</td>";
-			    					html += "<td>" + (table.selectIntoCount ? table.selectIntoCount : 0) + "</td>";
-			    					html += "<td>" + (table.insertCount ? table.insertCount : 0) + "</td>";
-			    					html += "<td>" + (table.updateCount ? table.updateCount : 0) + "</td>";
-			    					html += "<td>" + (table.deleteCount ? table.deleteCount : 0) + "</td>";
-			    					html += "<td>" + (table.truncateCount ? table.truncateCount : 0) + "</td>";
-			    					html += "<td>" + (table.createCount ? table.createCount : 0) + "</td>";
-			    					html += "<td>" + (table.alterCount ? table.alterCount : 0) + "</td>";
-			    					html += "<td>" + (table.dropCount ? table.dropCount : 0) + "</td>";
-			    					html += "<td>" + (table.replaceCount ? table.replaceCount : 0) + "</td>";
-			    					html += "</tr>";
-			    				}
-			    				$("#dataTable1 tbody").html(html);
-			    				
-			    				html = "";
-								var functions = data.Content.functions;
-			    				for ( var i = 0; i < functions.length; i++) {
-			    					var fun = functions[i];
-			    					html += "<tr>";
-			    					html += "<td>" + fun.name + "</td>";
-			    					html += "<td>" + table.invokeCount + "</td>";
-			    					html += "</tr>";
-			    				}
-			    				$("#dataTable2 tbody").html(html);
-							},
-							dataType: "json"
-						});
+					handleAjaxResult : function(data) {
+						$("#CheckCount").text(data.Content.checkCount)
+						$("#HardCheckCount").text(data.Content.hardCheckCount)
+						$("#ViolationCount").text(data.Content.violationCount)
+						$("#BlackListHitCount").text(data.Content.blackListHitCount)
+						$("#BlackListSize").text(data.Content.blackListSize)
+						$("#WhiteListHitCount").text(data.Content.whiteListHitCount)
+						$("#WhiteListSize").text(data.Content.whiteListSize)
+						$("#SyntaxErrrorCount").text(data.Content.syntaxErrrorCount)
+						
+						var html = "";
+						var tables = data.Content.tables;
+	    				for ( var i = 0; i < tables.length; i++) {
+	    					var table = tables[i];
+	    					html += "<tr>";
+	    					html += "<td>" + table.name + "</td>";
+	    					html += "<td>" + (table.selectCount ? table.selectCount : 0)+ "</td>";
+	    					html += "<td>" + (table.selectIntoCount ? table.selectIntoCount : 0) + "</td>";
+	    					html += "<td>" + (table.insertCount ? table.insertCount : 0) + "</td>";
+	    					html += "<td>" + (table.updateCount ? table.updateCount : 0) + "</td>";
+	    					html += "<td>" + (table.deleteCount ? table.deleteCount : 0) + "</td>";
+	    					html += "<td>" + (table.truncateCount ? table.truncateCount : 0) + "</td>";
+	    					html += "<td>" + (table.createCount ? table.createCount : 0) + "</td>";
+	    					html += "<td>" + (table.alterCount ? table.alterCount : 0) + "</td>";
+	    					html += "<td>" + (table.dropCount ? table.dropCount : 0) + "</td>";
+	    					html += "<td>" + (table.replaceCount ? table.replaceCount : 0) + "</td>";
+	    					html += "</tr>";
+	    				}
+	    				$("#dataTable1 tbody").html(html);
+	    				
+	    				html = "";
+						var functions = data.Content.functions;
+	    				for ( var i = 0; i < functions.length; i++) {
+	    					var fun = functions[i];
+	    					html += "<tr>";
+	    					html += "<td>" + fun.name + "</td>";
+	    					html += "<td>" + table.invokeCount + "</td>";
+	    					html += "</tr>";
+	    				}
+	    				$("#dataTable2 tbody").html(html);
 					}
 				}
 			}();
 	
 			$(document).ready(function() {
-				druid.datasource.init();
+				druid.wall.init();
 			});
 		</script>
 	</body>