修改流量统计详情界面分页按钮样式

src/main/webapp/WEB-INF/views/dashboard/trafficAppTypeList.jsp

@@ -109,7 +109,7 @@
          </thead>
          <tbody id="tableData"></tbody>
        </table>
-		<div id="page"><div class="M-box" style="float: right"></div></div>
+		<div id="page" class="pageView"><div class="M-box"></div><div class="pageMessage"> <spring:message code="current"/> <input type="text" class="pageCurrent" readonly="readonly"/> / <span class="pageNum"></span> <spring:message code="page"/> , <spring:message code="total"/> <span class="pageTotal"></span> <spring:message code="count"/></div></div>
         <div class="none-data"><i class="fa fa-warning font-red-flamingo"></i>&nbsp;&nbsp;<spring:message code="noneData"/></div>
 </div> 
 </div>
@@ -141,6 +141,7 @@ $(document).ready(function(){
 // 	setInterval(function(){
 // 		ajaxAppList(starth,new Date().Format("yyyy-MM-dd HH:mm:00"));
 // 	},500000);// 五分钟调用一次
+	$('.pageView').hide();
 });
 function searchList(){
 	loading();
@@ -175,10 +176,10 @@ function ajaxAppList(start,end){
         	closeTip();
         	if(data!= null&&data.length<1){
         		$(".none-data").show();
-                $('.M-box').hide();
+        		$('.pageView').hide();
             }else{
                 $('.none-data').hide();
-                $('.M-box').show();
+                $('.pageView').show();
             }
         },
         error: function(data, textStatus, errorThrown){
@@ -257,10 +258,10 @@ function htmlData(fileDataS){
     $("#tableData").html("");
     if(fileDataS == null||(fileDataS!=null&&fileDataS.length<1)){
 		$(".none-data").show();
-        $('.M-box').hide();
+		$('.pageView').hide();
     }else{
         $('.none-data').hide();
-        $('.M-box').show();
+        $('.pageView').show();
     	
         $.each(fileDataS,function (index,data){
         	if(data!=null){
@@ -315,6 +316,7 @@ function pageJuan(showData) {
         if(showData > totalData){
             showData = totalData;
         }
+        var current=1;
         $('.M-box').pagination({
             totalData: totalData,
             showData: showData,
@@ -322,8 +324,15 @@ function pageJuan(showData) {
             callback: function (index) {
                 //改变显示开始和结束数据编号
                 getPageData(index.getCurrent(),showData);
+                current=index.getCurrent();
+	        	$(".pageCurrent").val(current);
             }
         });
+        if(totalData<10){
+        	$(".pageCurrent").val(1);
+     }
+	    $(".pageTotal").text(totalData);
+	    $(".pageNum").text(Math.ceil(totalData/10));
     }
 }
 // 比例协议统计图

src/main/webapp/WEB-INF/views/dashboard/trafficHttpStatisticList.jsp

@@ -86,7 +86,7 @@
          </thead>
          <tbody id="tableData"></tbody>
        </table>
-		<div id="page"><div class="M-box" style="float: right"></div></div>
+		<div id="page" class="pageView"><div class="M-box"></div><div class="pageMessage"> <spring:message code="current"/> <input type="text" class="pageCurrent" readonly="readonly"/> / <span class="pageNum"></span> <spring:message code="page"/> , <spring:message code="total"/> <span class="pageTotal"></span> <spring:message code="count"/></div></div>
         <div class="none-data"><i class="fa fa-warning font-red-flamingo"></i>&nbsp;&nbsp;<spring:message code="noneData"/></div>
 </div> 
 </div>
@@ -117,6 +117,7 @@ $(document).ready(function(){
 // 	setInterval(function(){
 // 		ajaxProtocolList(starth,new Date().Format("yyyy-MM-dd HH:mm:00"));
 // 	},500000);// 五分钟调用一次
+	$('.pageView').hide();
 });
 function searchList(){
 	var start=$("#beginDate").val();
@@ -149,14 +150,14 @@ function ajaxProtocolList(start,end){
         	closeTip();
         	if(data!= null&&data.length<1){
         		$(".none-data").show();
-                $('.M-box').hide();
+                $('.pageView').hide();
             }else if(data[0].allLink==0&&data[0].allPackets==0&&data[0].allGByte==0){
             	$("#tableData").html("");
             	$(".none-data").show();
-                $('.M-box').hide();
+                $('.pageView').hide();
             }else{
             	$('.none-data').hide();
-                $('.M-box').show();
+                $('.pageView').show();
             }
         },
         error: function(data, textStatus, errorThrown){
@@ -234,10 +235,10 @@ function htmlData(fileDataS){
     $("#tableData").html("");
     if(fileDataS == null||(fileDataS!=null&&fileDataS.length<1)){
 		$(".none-data").show();
-        $('.M-box').hide();
+        $('.pageView').hide();
     }else{
         $('.none-data').hide();
-        $('.M-box').show();
+        $('.pageView').show();
         var start=$("#beginDate").val();
     	var end=$("#endDate").val();
         $.each(fileDataS,function (index,data){
@@ -278,6 +279,7 @@ function pageJuan(showData) {
         if(showData > totalData){
             showData = totalData;
         }
+        var current=1;
         $('.M-box').pagination({
             totalData: totalData,
             showData: showData,
@@ -285,8 +287,15 @@ function pageJuan(showData) {
             callback: function (index) {
                 //改变显示开始和结束数据编号
                 getPageData(index.getCurrent(),showData);
+                current=index.getCurrent();
+	        	$(".pageCurrent").val(current);
             }
         });
+        if(totalData<10){
+	        	$(".pageCurrent").val(1);
+         }
+        $(".pageTotal").text(totalData);
+        $(".pageNum").text(Math.ceil(totalData/10));
     }
 }
 </script>

src/main/webapp/WEB-INF/views/dashboard/trafficProtocolTypeList.jsp

@@ -99,7 +99,7 @@
          </thead>
          <tbody id="tableData"></tbody>
        </table>
-		<div id="page"><div class="M-box" style="float: right"></div></div>
+		<div id="page" class="pageView"><div class="M-box"></div><div class="pageMessage"> <spring:message code="current"/> <input type="text" class="pageCurrent" readonly="readonly"/> / <span class="pageNum"></span> <spring:message code="page"/> , <spring:message code="total"/> <span class="pageTotal"></span> <spring:message code="count"/></div></div>
         <div class="none-data"><i class="fa fa-warning font-red-flamingo"></i>&nbsp;&nbsp;<spring:message code="noneData"/></div>
 </div> 
 </div>
@@ -132,6 +132,7 @@ $(document).ready(function(){
 // 	setInterval(function(){
 // 		ajaxProtocolList(starth,new Date().Format("yyyy-MM-dd HH:mm:00"));
 // 	},500000);// 五分钟调用一次
+	$('.pageView').hide();
 });
 function searchList(){
 	loading();
@@ -250,10 +251,10 @@ function htmlData(fileDataS){
     $("#tableData").html("");
     if(fileDataS == null||(fileDataS!=null&&fileDataS.length<1)){
     	$(".none-data").show();
-        $('.M-box').hide();
+        $('.pageView').hide();
     }else{
     	$('.none-data').hide();
-	    $('.M-box').show();
+        $('.pageView').show();
         var start=$("#beginDate").val();
     	var end=$("#endDate").val();
         $.each(fileDataS,function (index,data){
@@ -309,6 +310,7 @@ function pageJuan(showData) {
         if(showData > totalData){
             showData = totalData;
         }
+        var current=1;
         $('.M-box').pagination({
             totalData: totalData,
             showData: showData,
@@ -316,8 +318,15 @@ function pageJuan(showData) {
             callback: function (index) {
                 //改变显示开始和结束数据编号
                 getPageData(index.getCurrent(),showData);
+                current=index.getCurrent();
+	        	$(".pageCurrent").val(current);
             }
         });
+        if(totalData<10){
+        	$(".pageCurrent").val(1);
+     }
+	    $(".pageTotal").text(totalData);
+	    $(".pageNum").text(Math.ceil(totalData/10));
     }
 }
 // 比例协议统计图

src/main/webapp/WEB-INF/views/dashboard/trafficWebTypeList.jsp

@@ -152,13 +152,8 @@
 							<tbody id="tableData"></tbody>
 						</table>
 
-						<div id="page">
+						<div id="page" class="pageView"><div class="M-box"></div><div class="pageMessage"> <spring:message code="current"/> <input type="text" class="pageCurrent" readonly="readonly"/> / <span class="pageNum"></span> <spring:message code="page"/> , <spring:message code="total"/> <span class="pageTotal"></span> <spring:message code="count"/></div></div>
-							<div class="M-box" style="float: right"></div>
+        				<div class="none-data"><i class="fa fa-warning font-red-flamingo"></i>&nbsp;&nbsp;<spring:message code="noneData"/></div>
-						</div>
-						<div class="none-data">
-							<i class="fa fa-warning font-red-flamingo"></i>&nbsp;&nbsp;
-							<spring:message code="noneData" />
-						</div>
 					</div>
 					</div>
 				</div>
@@ -196,6 +191,7 @@
 // 						ajaxWebTypeList(starth, new Date()
 // 								.Format("yyyy-MM-dd HH:mm:00"));
 // 					}, 500000);// 五分钟调用一次
+				$('.pageView').hide();
 				});
 		function searchList() {
 			var start = $("#beginDate").val();
@@ -237,10 +233,10 @@
 							closeTip();
 							if (data != null && data.length < 1) {
 								$(".none-data").show();
-								$('.M-box').hide();
+				                $('.pageView').hide();
 							} else {
 								$('.none-data').hide();
-								$('.M-box').show();
+								$('.pageView').show();
 							}
 						},
 						error : function(data, textStatus, errorThrown) {
@@ -321,10 +317,10 @@
 			$("#tableData").html("");
 			if (fileDataS == null || fileData == '') {
 				$(".none-data").show();
-				$('.M-box').hide();
+				$('.pageView').hide();
 			} else {
 				$('.none-data').hide();
-				$('.M-box').show();
+				$('.pageView').show();
 				var start=$("#beginDate").val();
 		    	var end=$("#endDate").val();
 				var totalunique=0;
@@ -401,6 +397,7 @@
 				if (showData > totalData) {
 					showData = totalData;
 				}
+				var current=1;
 				$('.M-box').pagination({
 					totalData : totalData,
 					showData : showData,
@@ -408,8 +405,15 @@
 					callback : function(index) {
 						//改变显示开始和结束数据编号
 						getPageData(index.getCurrent(), showData);
+						current=index.getCurrent();
+			        	$(".pageCurrent").val(current);
 					}
 				});
+				 if(totalData<10){
+			        	$(".pageCurrent").val(1);
+		         }
+		        $(".pageTotal").text(totalData);
+		        $(".pageNum").text(Math.ceil(totalData/10));
 			}
 		}
 		// 比例域名统计图

src/main/webapp/static/pages/css/pagination.css

@@ -5,6 +5,9 @@
     width:960px;
     height:100%;
 }
+.M-box{
+	margin-bottom: 10px;
+}
 .M-box,.M-box1,.M-box2,.M-box3{
 	position: relative;
     text-align: center;
@@ -20,49 +23,79 @@
 }
 .M-box span,.M-box1 span,.M-box2 span,.M-box3 span{
 	float: left;
-	margin:0 5px;
+	line-height: 33px;
-	width: 38px;
+	text-decoration: none;
-    height: 38px;
+	background-color: #ffffff;
-    line-height: 38px;
+	border: 1px solid #999999;
-    color: #bdbdbd;
+	border-left-width: 0;
-    font-size: 14px;
 }
 .M-box .active,.M-box1 .active,.M-box2 .active,.M-box3 .active{
 	float: left;
-	margin:0 5px;
+	width: 30px;
-	width: 38px;
+    height: 33px;
-    height: 38px;
+    line-height: 33px;
-    line-height: 38px;
+    background: #f5f5f5;
-    background: #3598dc;
+    color: #999999;
-    color: #fff;
     font-size: 14px;
-    border: 1px solid #3598dc;
+    border: 1px solid #DDDDDD;
 }
 .M-box a,.M-box1 a,.M-box2 a,.M-box3 a{
 	float: left;
-	margin:0 5px;
+	width: 30px;
-	width: 38px;
+    height: 33px;
-    height: 38px;
+    line-height: 33px;
-    line-height: 38px;
     background: #fff;
     border: 1px solid #ebebeb;
-    color: #08c;
+    color: #3598DC;
     font-size: 14px;
+    text-decoration:none
 }
 .M-box a:hover,.M-box1 a:hover,.M-box2 a:hover,.M-box3 a:hover{
-	color:#fff;
+	color:#23527c;
-    background: #3598dc;
+    background: #f5f5f5;
 }
 .M-box .next,.M-box .prev,.M-box1 .next,.M-box1 .prev{
-	font-family: "Simsun";
+	font-family: "Open Sans", sans-serif;
     font-size: 16px;
     font-weight: bold;
+    line-height: 30px;
 }
 .now,.count{
 	padding:0 5px;
 	color:#f00;
 }
-
+.dian-dian{
+	float: left;
+	width: 30px;
+    height: 33px;
+    font-size: 14px;
+	line-height: 33px;
+	color: #999999;
+	text-decoration: none;
+	background-color: #ffffff;
+	border: 1px solid #DDDDDD !important;
+	border-left-width: 0 !important;;
+	border-right-width: 0 !important;;
+}
+.pageView{
+	display: inline-flex;
+	height: 33px;
+}
+.pageMessage{
+	color:#999999;
+	display: inline-block;
+	margin: 7px;
+}
+.pageMessage input{
+	border: 1px solid #ddd;
+	color:#999999;
+	width:10%;
+	height: 22px;
+    font-size: 14px;
+	line-height: 33px;
+	margin-left:5px;
+	text-align:center;
+}
 /*
 input{
     float: left;