37两层分页代码
Posted gushixianqiancheng
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了37两层分页代码相关的知识，希望对你有一定的参考价值。
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script>
<style type="text/css">
.protocolAnalysis
background: lightgray;
padding-top: 30px;
height: 900px;
.protocolAnalysis .display
width: 1200px;
margin: 0 auto
.protocolAnalysis .display .table
width: 1200px;
margin: 0 auto;
border-collapse:collapse;
.protocolAnalysis .display .table th
padding: 0 20px;
text-align: center;
border: 1px solid grey;
height: 25px;
.protocolAnalysis .display .table td
padding: 0 20px;
text-align: center;
border: 1px solid grey;
height: 25px;
.protocolAnalysis .display .table td span
color: deepskyblue;
display: inline-block;
border: 1px solid deepskyblue;
padding: 2px 10px;
user-select: none;
cursor: pointer;
margin: 3px auto;
.protocolAnalysis .display .bottomFilter
width: 1200px;
margin: 0 auto;
padding: 5px 0;
.protocolAnalysis .display .bottomFilter button
display: inline-block;
width: 60px;
margin: 0 25px;
background: deepskyblue;
color: white;
height: 20px;
border-radius: 5px;
text-align: center;
line-height: 20px;
.protocolAnalysis .display .bottomFilter button.first
margin-left: 0;
.protocolAnalysis .display .bottomFilter label
display: inline-block;
width: 60px;
background: deepskyblue;
color: white;
height: 20px;
border-radius: 5px;
text-align: center;
line-height: 20px;
.protocolAnalysis .display .bottomFilter input
display: inline-block;
width: 30px;
height: 20px;
text-align: center;
.protocolAnalysis .display .bottomFilter p
display: inline-block
.protocolAnalysis .display .bottomFilter p span
display: inline-block;
margin: 0 5px;
.protocolAnalysis .appearMark
width: 100%;
height: 100%;
background: cadetblue;
z-index: 2;
position: absolute;
display: none;
top: 0;
opacity: 0.2;
.protocolAnalysis .appearMarkInner
width: 1000px;
height: 555px;
background: white;
margin: auto;
position: absolute;
display: none;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 1;
z-index: 4;
.protocolAnalysis .appearMarkInner .detail
height: 40px;
line-height: 40px;
padding-left: 20px;
background: darkblue;
color: white;
font-size: 14px;
.protocolAnalysis .appearMarkInner .detail span
display: inline-block;
float: right;
margin-right: 20px;
cursor: pointer;
user-select: none
.protocolAnalysis .appearMarkInner .tableTopUl
width: 950px;
margin: 20px auto;
overflow: auto;
.protocolAnalysis .appearMarkInner .tableTopUl .tableTopLi
width: 475px;
margin: 0 auto;
float: left;
height: 25px;
line-height: 25px;
.protocolAnalysis .appearMarkInner .tableTopUl .tableTopLi span
display: inline-block;
font-size: 15px;
.protocolAnalysis .appearMarkInner table
width: 950px;
margin: 0 auto;
border: 1px solid gainsboro;
border-collapse:collapse;
.protocolAnalysis .appearMarkInner table tr
width: 100%;
border: 1px solid darkgrey;
height: 30px;
line-height: 30px;
.protocolAnalysis .appearMarkInner table tr th
width: 25%;
border: 1px solid darkgrey;
background: lightgray
.protocolAnalysis .appearMarkInner table tr td
width: 25%;
text-align: center;
.protocolAnalysis .appearMarkInner
background: gainsboro;
.protocolAnalysis .appearMarkInner ul
list-style: none;
.protocolAnalysis .appearMarkInner .tablePopupBottom
width: 950px;
margin: 0 auto;
padding: 5px 0;
.protocolAnalysis .appearMarkInner .tablePopupBottom button
display: inline-block;
width: 60px;
margin: 0 25px;
background: deepskyblue;
color: white;
height: 20px;
border-radius: 5px;
text-align: center;
line-height: 20px;
.protocolAnalysis .appearMarkInner .tablePopupBottom button.first
margin-left: 0;
.protocolAnalysis .appearMarkInner .tablePopupBottom label
display: inline-block;
width: 60px;
background: deepskyblue;
color: white;
height: 20px;
border-radius: 5px;
text-align: center;
line-height: 20px;
.protocolAnalysis .appearMarkInner .tablePopupBottom input
display: inline-block;
width: 30px;
height: 20px;
text-align: center;
.protocolAnalysis .appearMarkInner .tablePopupBottom p
display: inline-block
.protocolAnalysis .appearMarkInner .tablePopupBottom p span
display: inline-block;
margin: 0 5px;
</style>
</head>
<body>
<div class="protocolAnalysis">
<div class="display">
<table class="table" id="table">
<thead>
<tr>
<th><input type="checkbox" id="allChecked"/>全选</th>
<th>序号</th>
<th>起始时间</th>
<th>IP</th>
<th>MAC</th>
<th>端口</th>
<th>协议类型</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class="bottomFilter" id="bottomFilter">
<button class="first" id="firstPage">首页</button>
<button id="prevPage">上一页</button>
<p>
<span>第</span>
<span id="nowPage"></span>
<span>页</span>
<span>/</span>
<span>共</span>
<span id="totalPage"></span>
<span>页</span>
</p>
<button id="nextPage">下一页</button>
<button id="lastPage">尾页</button>
<input type="text" id="leap"/>
<label for="leap">跳转</label>
</div>
</div>
<!--以下是遮罩-->
<div class="appearMark" id="appearMark"></div>
<div class="appearMarkInner" id="appearMarkInner">
<p class="detail">事件信息 <span id="clickDisappear">关闭</span></p>
<ul class="tableTopUl">
<li class="tableTopLi"><span>协议类型：</span><span id="protocolTypePopup">modbus</span></li>
<li class="tableTopLi"><span>起始时间：</span><span id="startTimePopup">2018-04-14</span></li>
<li class="tableTopLi"><span>端口：</span><span id="portPopup">50076<--->502</span></li>
<li class="tableTopLi"><span>IP地址：</span><span id="IPAddressPopup">192.168.1.6<--->192.168.1.222</span></li>
<li class="tableTopLi"><span>MAC地址：</span><span
id="MACAddressPopup">00:0c:26:03:36:30<--->00:1f:2e:00:07:8f</span></li>
</ul>
<table id="tablePopup">
<thead>
<tr>
<th>记录时间</th>
<th>功能码</th>
<th>起始地址</th>
<th>终止地址</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class="tablePopupBottom" id="tablePopupBottom">
<button class="first" id="firstPagePopup">首页</button>
<button id="prevPagePopup">上一页</button>
<p>
<span>第</span>
<span id="nowPagePopup">1</span>
<span>页</span>
<span>/</span>
<span>共</span>
<span id="totalPagePopup">9</span>
<span>页</span>
</p>
<button id="nextPagePopup">下一页</button>
<button id="lastPagePopup">尾页</button>
<input type="text" id="leapPopup"/>
<label for="leap">跳转</label>
</div>
</div>
<!--以上是遮罩-->
</div>
</body>
</html>
<script type="text/javascript">
$(function ()
var nowPage = 1;
var totalPage = 0;
var pageNumberPopup = 1;
var totalPagePopup = 0;
var privateID = null;
var dataServer =
"data": [
"input": "<input type=‘checkbox‘/>",
"startTime": "2018年",
"IP": "255.255.255.255",
"MAC": "255.255.255.255",
"port": "端口1",
"protocolType": "协议类型1",
"id": "1"
,
"input": "<input type=‘checkbox‘/>",
"startTime": "2018年",
"IP": "255.255.255.255",
"MAC": "255.255.255.255",
"port": "端口1",
"protocolType": "协议类型1",
"id": "2"
,
"input": "<input type=‘checkbox‘/>",
"startTime": "2018年",
"IP": "255.255.255.255",
"MAC": "255.255.255.255",
"port": "端口1",
"protocolType": "协议类型1",
"id": "3"
,
"input": "<input type=‘checkbox‘/>",
"startTime": "2018年",
"IP": "255.255.255.255",
"MAC": "255.255.255.255",
"port": "端口1",
"protocolType": "协议类型1",
"id": "4"
],
"totalPage": 5,
"page": 1
;
var dataDetail=
"data":[["2018-04-14 21:39:14", "Read_Coils", "127.0.0.1", "127.0.0.2"],["2018-04-14 21:39:14", "Read_Coils", "127.0.0.1", "127.0.0.2"]],
"protoType":"协议类型1",
"startTime":"2018.3.4",
"port":"端口1",
"ip":"127.0.0.1",
"mac":"efew:eff:33",
"title":["记录时间","功能码","起始地址","终止地址"],
"totalPage": 5,
"page": 1,
"record": 9999
;
$.ajax(
type: ‘get‘,
/*url: */
success: function (data)
data = dataServer;
var table = $("#table");
var tableBody = table.children("tbody");
tableBody.empty();
var str = "";
totalPage = data.totalPage;
nowPage = data.page;
$.each(data.data, function (index, value)
str += "<tr privateID=" + value.id + ">";
str += "<td>" + value.input + "</td>";
str += "<td>" + index + "</td>";
str += "<td>" + value.startTime + "</td>";
str += "<td>" + value.IP + "</td>";
str += "<td>" + value.MAC + "</td>";
str += "<td>" + value.port + "</td>";
str += "<td>" + value.protocolType + "</td>";
str += "<td>" + "<span class=‘tableSpanDetail‘>详情</span>" + "</td>";
str += "</tr>";
);
tableBody.html(str);
$("#nowPage").text(nowPage);
$("#totalPage").text(totalPage);
singleInput();
tableSpanDetail();
);
$("#bottomFilter").click(function (event)
var eventTargetTagName = event.target.tagName.toUpperCase();
var eventTargetInnerText = event.target.innerText;
if (eventTargetTagName === "BUTTON")
if (eventTargetInnerText === "首页")
if (nowPage === 1)
return;
nowPage = 1;
else if (eventTargetInnerText === "上一页")
if (nowPage === 1)
return;
nowPage--;
else if (eventTargetInnerText === "下一页")
if (nowPage === totalPage)
return;
nowPage++;
else if (eventTargetInnerText === "尾页")
if (nowPage === totalPage)
return;
nowPage = totalPage;
else if (eventTargetTagName === "LABEL")
if (eventTargetInnerText === "跳转")
var leap = $("#leap");
var leapPage = leap.val();
if (leapPage > totalPage)
leap.val(totalPage);
else
nowPage = leapPage;
$.ajax(
type: ‘get‘,
/* url: "",*/
success: function (data)
data = dataServer;
var table = $("#table");
var tableBody = table.children("tbody");
tableBody.empty();
var str = "";
totalPage = data.totalPage;
$.each(data.data, function (index, value)
str += "<tr privateID=" + value.id + ">";
str += "<td>" + value.input + "</td>";
str += "<td>" + index + "</td>";
str += "<td>" + value.startTime + "</td>";
str += "<td>" + value.IP + "</td>";
str += "<td>" + value.MAC + "</td>";
str += "<td>" + value.port + "</td>";
str += "<td>" + value.protocolType + "</td>";
str += "<td>" + "<span class=‘tableSpanDetail‘>详情</span>" + "</td>";
str += "</tr>";
);
tableBody.html(str);
console.log(nowPage);
$("#nowPage").text(nowPage);
$("#totalPage").text(totalPage);
singleInput();
tableSpanDetail();
);
);
$("#tablePopupBottom").click(function (event)
var eventTargetTagName = event.target.tagName.toUpperCase();
var eventTargetInnerText = event.target.innerText;
if (eventTargetTagName === "BUTTON")
if (eventTargetInnerText === "首页")
if (pageNumberPopup === 1)
return;
pageNumberPopup = 1;
else if (eventTargetInnerText === "上一页")
if (pageNumberPopup === 1)
return;
pageNumberPopup--;
else if (eventTargetInnerText === "下一页")
if (pageNumberPopup === totalPagePopup)
return;
pageNumberPopup++;
else if (eventTargetInnerText === "尾页")
if (pageNumberPopup === totalPagePopup)
return;
pageNumberPopup = totalPagePopup;
else if (eventTargetTagName === "LABEL")
if (eventTargetInnerText === "跳转")
var leapPopup = $("#leapPopup");
var leapPagePopup = leapPopup.val();
if (leapPagePopup > totalPagePopup)
leapPopup.val(totalPagePopup);
else
pageNumberPopup = leapPagePopup;
$.ajax(
type: ‘get‘,
url: "",
success: function (data)
data=dataDetail;
var table = $("#tablePopup");
var tableBody = table.children("tbody");
tableBody.empty();
var str = "";
$.each(data.data, function (index, value)
str += "<tr>";
for (var i = 0; i < value.length; i++)
str += "<td>" + value[i] + "</td>";
str += "</tr>";
);
tableBody.html(str);
$("#nowPagePopup").text(pageNumberPopup);
$("#totalPagePopup").text(totalPagePopup);
);
);
$("#allChecked").click(function ()
if ($(this).is(‘:checked‘))
$("tbody tr td input[type=checkbox]").prop("checked", true);
else
$(this).prop("checked", false);
$("tbody tr td input[type=checkbox]").prop("checked", false);
);
function singleInput()
var $allCheck = $("tbody tr td input[type=checkbox]");
$allCheck.each(function ()
$(this).click(function ()
if ($(this).is(‘:checked‘))
var len = $allCheck.length;
var num = $("tbody tr td input[type=checkbox]:checked").length;
if (num == len)
$allCheck.prop("checked", true);
$("#allChecked").prop("checked", true);
else
$(this).prop("checked", false);
$("#allChecked").prop("checked", false);
)
);
function tableSpanDetail()
$(".tableSpanDetail").each(function (index, input)
$(this).click(function ()
pageNumberPopup = 1;
privateID = $(this).parent().parent().attr("privateID");
$.ajax(
type: ‘get‘,
url: "",
success: function (data)
data=dataDetail;
totalPagePopup = data.totalPage;
var title = data.title;
var table = $("#tablePopup");
var tableHead = table.children("thead");
var tableBody = table.children("tbody");
tableHead.empty();
tableBody.empty();
$("#protocolTypePopup").html(data.protoType);
$("#startTimePopup").html(data.startTime);
$("#portPopup").html(data.port);
$("#IPAddressPopup").html(data.ip);
$("#MACAddressPopup").html(data.mac);
var tableHeadStr = "";
tableHeadStr += "<tr>";
for (var i = 0; i < title.length; i++)
tableHeadStr += "<th>" + title[i] + "</th>";
tableHeadStr += "</tr>";
tableHead.html(tableHeadStr);
var tableBodyStr = "";
$.each(data.data, function (index, value)
tableBodyStr += "<tr>";
for (var i = 0; i < title.length; i++)
tableBodyStr += "<td>" + value[i] + "</td>";
tableBodyStr += "</tr>";
);
tableBody.html(tableBodyStr);
$("#nowPagePopup").text(pageNumberPopup);
$("#totalPagePopup").text(totalPagePopup);
);
$("#appearMark").css("display", "block");
$("#appearMarkInner").css("display", "block");
$("#clickDisappear").click(function ()
$("#appearMark").css("display", "none");
$("#appearMarkInner").css("display", "none");
)
);
);
)
</script>
```
以上是关于37两层分页代码的主要内容，如果未能解决你的问题，请参考以下文章