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

2019-01-02 11:41:10 +08:00
parent c33bf081a5
commit 92a0d9ab6e
5 changed files with 113 additions and 49 deletions
--- a/src/main/webapp/WEB-INF/views/dashboard/trafficAppTypeList.jsp
+++ b/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));
    }
 }
 // 比例协议统计图
--- a/src/main/webapp/WEB-INF/views/dashboard/trafficHttpStatisticList.jsp
+++ b/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>
--- a/src/main/webapp/WEB-INF/views/dashboard/trafficProtocolTypeList.jsp
+++ b/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();
@@ -249,11 +250,11 @@ function getPageData(currentPage,pageNumber){
 function htmlData(fileDataS){
    $("#tableData").html("");
    if(fileDataS == null||(fileDataS!=null&&fileDataS.length<1)){
-		$(".none-data").show();
-        $('.M-box').hide();
+    	$(".none-data").show();
+        $('.pageView').hide();
    }else{
-        $('.none-data').hide();
-	    $('.M-box').show();
+    	$('.none-data').hide();
+        $('.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));
    }
 }
 // 比例协议统计图
--- a/src/main/webapp/WEB-INF/views/dashboard/trafficWebTypeList.jsp
+++ b/src/main/webapp/WEB-INF/views/dashboard/trafficWebTypeList.jsp
@@ -152,13 +152,8 @@
 							<tbody id="tableData"></tbody>
 						</table>

-						<div id="page">
-							<div class="M-box" style="float: right"></div>
-						</div>
-						<div class="none-data">
-							<i class="fa fa-warning font-red-flamingo"></i>&nbsp;&nbsp;
-							<spring:message code="noneData" />
-						</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>
 				</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));
 			}
 		}
 		// 比例域名统计图
--- a/src/main/webapp/static/pages/css/pagination.css
+++ b/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;
-	width: 38px;
-    height: 38px;
-    line-height: 38px;
-    color: #bdbdbd;
-    font-size: 14px;
+	line-height: 33px;
+	text-decoration: none;
+	background-color: #ffffff;
+	border: 1px solid #999999;
+	border-left-width: 0;
 }
 .M-box .active,.M-box1 .active,.M-box2 .active,.M-box3 .active{
 	float: left;
-	margin:0 5px;
-	width: 38px;
-    height: 38px;
-    line-height: 38px;
-    background: #3598dc;
-    color: #fff;
+	width: 30px;
+    height: 33px;
+    line-height: 33px;
+    background: #f5f5f5;
+    color: #999999;
    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: 38px;
-    height: 38px;
-    line-height: 38px;
+	width: 30px;
+    height: 33px;
+    line-height: 33px;
    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;
-    background: #3598dc;
+	color:#23527c;
+    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;