最近在做报表项目的时候，涉及到前端数据分页。在网上查找了好多方案，在这里做一个总结。首先说一下业务场景，目前有两张表的数据，使用js将两部分数据分开显示，两个按钮各自控制各自数据表的展示，两块区域显示，两个分页的功能各自控制各自的表
下面是html
<!DOCTYPE html>
<html >
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="../css/StyleSheet.css" rel="stylesheet" />
</head>
<body>
<table border="1" cellspacing="0">
<tr >
<th colspan="8">
<input type="button" value="查询SMTIPQC表数据" onclick="GetSMTInfo()"/>
</th>
<th colspan="8">
<input type="button" value="查询目检表数据" onclick="GetVisualInfo()"/>
</th>
</tr>
</table>
<table border="1" cellspacing="0" id="viewIpqcTable">
<tr class="table_th_css" >
<th style="width: 5%"></th>
<th style="width: 5%"></th>
<th style="width: 5%"></th>
<th style="width: 5%"></th>
<th style="width: 5%"></th>
<th style="width: 5%"></th>
<th style="width: 5%"></th>
<th style="width: 5%"></th>
<th style="width: 5%"></th>
<th style="width: 5%"></th>
<th style="width: 5%"></th>
<th style="width: 5%"></th>
<th style="width: 5%"></th>
<th style="width: 5%"></th>
<th style="width: 5%"></th>
<th style="width: 5%"></th>
<th style="width: 5%"></th>
<th style="width: 5%"></th>
<th style="width: 5%"></th>
<th style="width: 5%"></th>
</tr>
<tr class="thead_tr">
<th>guid:</th>
<th >lineNo</th>
<th colspan="2">PartNo</th>
<th colspan="2">LotNo</th>
<th colspan="2">要求</th>
<th colspan="2">结果1</th>
<th colspan="2">要求2</th>
<th colspan="2">创建时间</th>
<th colspan="3">描述</th>
<th colspan="2">结果</th>
<th >详情</th>
</tr>
<tr class="thead_tr" id="table2">
<th id="guid" ></th>
<th id="line" ></th>
<th id="part" colspan="2"></th>
<th id="lot" colspan="2"></th>
<th id="engineer" colspan="2"></th>
<th id="engineerdate" colspan="2"></th>
<th id="createtime" colspan="2"></th>
<th id="createuser" colspan="2"></th>
<th id="status" colspan="3"></th>
<th id="result" colspan="2" ></th>
<th id="button1" ></th>
</tr>
</table>
<nav aria-label="Page navigation" class="pagination">
<ul class="pagination">
<li id="pre" class="pagination">
<a href="#" aria-label="Previous" class="pagination">
<span class="pagination" aria-hidden="true">«</span>
</a>
</li>
</ul>
</nav>
<br />
<table border="1" cellspacing="0" id="smtIpqcTable">
<tr class="table_th_css" >
<th style="width: 5%"></th>
<th style="width: 5%"></th>
<th style="width: 5%"></th>
<th style="width: 5%"></th>
<th style="width: 5%"></th>
<th style="width: 5%"></th>
<th style="width: 5%"></th>
<th style="width: 5%"></th>
<th style="width: 5%"></th>
<th style="width: 5%"></th>
<th style="width: 5%"></th>
<th style="width: 5%"></th>
<th style="width: 5%"></th>
<th style="width: 5%"></th>
<th style="width: 5%"></th>
<th style="width: 5%"></th>
<th style="width: 5%"></th>
<th style="width: 5%"></th>
<th style="width: 5%"></th>
<th style="width: 5%"></th>
</tr>
<tr class="thead_tr">
<th>GUID</th>
<th colspan="2">线别</th>
<th colspan="2">料号</th>
<th colspan="2">班次</th>
<th colspan="4">焊接类型</th>
<th colspan="4">创建时间</th>
<th colspan="4">描述</th>
<th colspan="1">详情</th>
</tr>
<tr class="thead_tr" id="table3">
<th id="smtguid" ></th>
<th id="smtline" colspan="2"></th>
<th id="smtpart" colspan="2"></th>
<th id="smtlot" colspan="2"></th>
<th id="smtengineer" colspan="4"></th>
<th id="smtengineerdate" colspan="4"></th>
<th id="smtresult" colspan="4"></th>
<th id="button2" colspan="1"></th>
</tr>
</table>
<nav aria-label="Page navigation1">
<ul class="pagination1">
<li id="pre1" class="pagination1">
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
</ul>
</nav>
</body>
<script src="../js/Select.js" type="text/javascript"></script>
</html>下面是css文件
/*全局*/
body {
background:#C0C0C0;
}
li {
float: left;
width:40px;
}
.table_th_css {
height: 0px;
border: 0px solid;
}
.thead_tr th {
border: 1px;
}下面的js文件
var viewPage = 5//单页浏览量
var viewTotalPages = 0//页数
var pre //上一页
var next //下一页
var ul = document.querySelector(".pagination");
var ul1 = document.querySelector(".pagination1");
/**
* 获取数据
*/
function GetVisualInfo() {
var Visual={
"IsSuccess": true,
"ErrorMsg": "sucsseul",
"UserId": "admin",
"ExceptionType": 1,
"Data": [
{
"GUID": "177f9c",
"LineNo": "line001",
"PartNo": "part1",
"Shifts": 2,
"PannelRS": "底座require",
"PannelDesc": "底座拒收",
"SMRS": "钢网require",
"SPVPFCRS": "锡膏有效期require",
"ProcessEngineerDateTime": "2021-09-10",
"CorrectiveMeasures": "通过"
},
{
"GUID": "4f9ed8",
"LineNo": "lineone",
"PartNo": "partone",
"Shifts": 2,
"PannelRS": "底座要求",
"PannelDesc": "底座拒收",
"SMRS": "钢网要求",
"SPVPFCRS": "锡膏有效期要求",
"ProcessEngineerDateTime": "2021-09-06",
"CorrectiveMeasures": "纠正错误"
},
{
"GUID": "ujv785",
"LineNo": "lineone",
"PartNo": "partone",
"Shifts": 2,
"PannelRS": "底座要求",
"PannelDesc": "底座拒收",
"SMRS": "钢网要求",
"SPVPFCRS": "锡膏有效期要求",
"ProcessEngineerDateTime": "2021-09-06",
"CorrectiveMeasures": "纠正错误"
},
{
"GUID": "bjlk45",
"LineNo": "lineone",
"PartNo": "partone",
"Shifts": 2,
"PannelRS": "底座要求",
"PannelDesc": "底座拒收",
"SMRS": "钢网要求",
"SPVPFCRS": "锡膏有效期要求",
"ProcessEngineerDateTime": "2021-09-06",
"CorrectiveMeasures": "纠正错误"
},
{
"GUID": "ugvj12",
"LineNo": "lineone",
"PartNo": "partone",
"Shifts": 2,
"PannelRS": "底座要求",
"PannelDesc": "底座拒收",
"SMRS": "钢网要求",
"SPVPFCRS": "锡膏有效期要求",
"ProcessEngineerDateTime": "2021-09-06",
"CorrectiveMeasures": "纠正错误"
},
{
"GUID": "vgh41g",
"LineNo": "lineone",
"PartNo": "partone",
"Shifts": 2,
"PannelRS": "底座要求",
"PannelDesc": "底座拒收",
"SMRS": "钢网要求",
"SPVPFCRS": "锡膏有效期要求",
"ProcessEngineerDateTime": "2021-09-06",
"CorrectiveMeasures": "纠正错误"
},
{
"GUID": "jhb548",
"LineNo": "lineone",
"PartNo": "partone",
"Shifts": 2,
"PannelRS": "底座要求",
"PannelDesc": "底座拒收",
"SMRS": "钢网要求",
"SPVPFCRS": "锡膏有效期要求",
"ProcessEngineerDateTime": "2021-09-06",
"CorrectiveMeasures": "纠正错误"
},
{
"GUID": "hbj456",
"LineNo": "lineone",
"PartNo": "partone",
"Shifts": 2,
"PannelRS": "底座要求",
"PannelDesc": "底座拒收",
"SMRS": "钢网要求",
"SPVPFCRS": "锡膏有效期要求",
"ProcessEngineerDateTime": "2021-09-06",
"CorrectiveMeasures": "纠正错误"
},
{
"GUID": "yghbj8",
"LineNo": "line001",
"PartNo": "part1",
"Shifts": 2,
"PannelRS": "底座require",
"PannelDesc": "底座拒收",
"SMRS": "钢网require",
"SPVPFCRS": "锡膏有效期require",
"ProcessEngineerDateTime": "2021-09-10",
"CorrectiveMeasures": "通过"
},
{
"GUID": "ycgho8",
"LineNo": "lineone",
"PartNo": "partone",
"Shifts": 2,
"PannelRS": "底座要求",
"PannelDesc": "底座拒收",
"SMRS": "钢网要求",
"SPVPFCRS": "锡膏有效期要求",
"ProcessEngineerDateTime": "2021-09-06",
"CorrectiveMeasures": "纠正错误"
},
{
"GUID": "rfyci8",
"LineNo": "lineone",
"PartNo": "partone",
"Shifts": 2,
"PannelRS": "底座要求",
"PannelDesc": "底座拒收",
"SMRS": "钢网要求",
"SPVPFCRS": "锡膏有效期要求",
"ProcessEngineerDateTime": "2021-09-06",
"CorrectiveMeasures": "纠正错误"
},
{
"GUID": "177f9c",
"LineNo": "line001",
"PartNo": "part1",
"Shifts": 2,
"PannelRS": "底座require",
"PannelDesc": "底座拒收",
"SMRS": "钢网require",
"SPVPFCRS": "锡膏有效期require",
"ProcessEngineerDateTime": "2021-09-10",
"CorrectiveMeasures": "通过"
},
{
"GUID": "4f9ed8",
"LineNo": "lineone",
"PartNo": "partone",
"Shifts": 2,
"PannelRS": "底座要求",
"PannelDesc": "底座拒收",
"SMRS": "钢网要求",
"SPVPFCRS": "锡膏有效期要求",
"ProcessEngineerDateTime": "2021-09-06",
"CorrectiveMeasures": "纠正错误"
},
{
"GUID": "ujv785",
"LineNo": "lineone",
"PartNo": "partone",
"Shifts": 2,
"PannelRS": "底座要求",
"PannelDesc": "底座拒收",
"SMRS": "钢网要求",
"SPVPFCRS": "锡膏有效期要求",
"ProcessEngineerDateTime": "2021-09-06",
"CorrectiveMeasures": "纠正错误"
},
{
"GUID": "bjlk45",
"LineNo": "lineone",
"PartNo": "partone",
"Shifts": 2,
"PannelRS": "底座要求",
"PannelDesc": "底座拒收",
"SMRS": "钢网要求",
"SPVPFCRS": "锡膏有效期要求",
"ProcessEngineerDateTime": "2021-09-06",
"CorrectiveMeasures": "纠正错误"
},
{
"GUID": "ugvj12",
"LineNo": "lineone",
"PartNo": "partone",
"Shifts": 2,
"PannelRS": "底座要求",
"PannelDesc": "底座拒收",
"SMRS": "钢网要求",
"SPVPFCRS": "锡膏有效期要求",
"ProcessEngineerDateTime": "2021-09-06",
"CorrectiveMeasures": "纠正错误"
},
{
"GUID": "vgh41g",
"LineNo": "lineone",
"PartNo": "partone",
"Shifts": 2,
"PannelRS": "底座要求",
"PannelDesc": "底座拒收",
"SMRS": "钢网要求",
"SPVPFCRS": "锡膏有效期要求",
"ProcessEngineerDateTime": "2021-09-06",
"CorrectiveMeasures": "纠正错误"
},
{
"GUID": "jhb548",
"LineNo": "lineone",
"PartNo": "partone",
"Shifts": 2,
"PannelRS": "底座要求",
"PannelDesc": "底座拒收",
"SMRS": "钢网要求",
"SPVPFCRS": "锡膏有效期要求",
"ProcessEngineerDateTime": "2021-09-06",
"CorrectiveMeasures": "纠正错误"
},
{
"GUID": "hbj456",
"LineNo": "lineone",
"PartNo": "partone",
"Shifts": 2,
"PannelRS": "底座要求",
"PannelDesc": "底座拒收",
"SMRS": "钢网要求",
"SPVPFCRS": "锡膏有效期要求",
"ProcessEngineerDateTime": "2021-09-06",
"CorrectiveMeasures": "纠正错误"
},
{
"GUID": "yghbj8",
"LineNo": "line001",
"PartNo": "part1",
"Shifts": 2,
"PannelRS": "底座require",
"PannelDesc": "底座拒收",
"SMRS": "钢网require",
"SPVPFCRS": "锡膏有效期require",
"ProcessEngineerDateTime": "2021-09-10",
"CorrectiveMeasures": "通过"
},
{
"GUID": "ycgho8",
"LineNo": "lineone",
"PartNo": "partone",
"Shifts": 2,
"PannelRS": "底座要求",
"PannelDesc": "底座拒收",
"SMRS": "钢网要求",
"SPVPFCRS": "锡膏有效期要求",
"ProcessEngineerDateTime": "2021-09-06",
"CorrectiveMeasures": "纠正错误"
},
{
"GUID": "rfyci8",
"LineNo": "lineone",
"PartNo": "partone",
"Shifts": 2,
"PannelRS": "底座要求",
"PannelDesc": "底座拒收",
"SMRS": "钢网要求",
"SPVPFCRS": "锡膏有效期要求",
"ProcessEngineerDateTime": "2021-09-06",
"CorrectiveMeasures": "纠正错误"
},
{
"GUID": "tfyvgh",
"LineNo": "lineone",
"PartNo": "partone",
"Shifts": 2,
"PannelRS": "底座要求",
"PannelDesc": "底座拒收",
"SMRS": "钢网要求",
"SPVPFCRS": "锡膏有效期要求",
"ProcessEngineerDateTime": "2021-09-06",
"CorrectiveMeasures": "纠正错误"
},
{
"GUID": "tfg512",
"LineNo": "lineone",
"PartNo": "partone",
"Shifts": 2,
"PannelRS": "底座要求",
"PannelDesc": "底座拒收",
"SMRS": "钢网要求",
"SPVPFCRS": "锡膏有效期要求",
"ProcessEngineerDateTime": "2021-09-06",
"CorrectiveMeasures": "纠正错误"
},
{
"GUID": "jn5vgh",
"LineNo": "lineone",
"PartNo": "partone",
"Shifts": 2,
"PannelRS": "底座要求",
"PannelDesc": "底座拒收",
"SMRS": "钢网要求",
"SPVPFCRS": "锡膏有效期要求",
"ProcessEngineerDateTime": "2021-09-06",
"CorrectiveMeasures": "纠正错误"
},
{
"GUID": "hbj54g",
"LineNo": "lineone",
"PartNo": "partone",
"Shifts": 2,
"PannelRS": "底座要求",
"PannelDesc": "底座拒收",
"SMRS": "钢网要求",
"SPVPFCRS": "锡膏有效期要求",
"ProcessEngineerDateTime": "2021-09-06",
"CorrectiveMeasures": "纠正错误"
},
{
"GUID": "gv54hg",
"LineNo": "lineone",
"PartNo": "partone",
"Shifts": 2,
"PannelRS": "底座要求",
"PannelDesc": "底座拒收",
"SMRS": "钢网要求",
"SPVPFCRS": "锡膏有效期要求",
"ProcessEngineerDateTime": "2021-09-06",
"CorrectiveMeasures": "纠正错误"
}
]
};
var json = Visual.Data;
json.forEach(function (item, i) {
if (i < viewPage) {
var div = document.getElementById('guid')
var divlab = document.createElement('label')
divlab.innerText = Visual.Data[i].GUID
div.appendChild(divlab)
var br = document.createElement('br')
div.appendChild(br)
//-------------
var div1 = document.getElementById('line')
var divlab = document.createElement('label')
divlab.innerText = Visual.Data[i].LineNo
div1.appendChild(divlab)
var br = document.createElement('br')
div1.appendChild(br)
//-------------
var div2 = document.getElementById('part')
var divlab = document.createElement('label')
divlab.innerText = Visual.Data[i].PartNo
div2.appendChild(divlab)
var br = document.createElement('br')
div2.appendChild(br)
//-------------------
var div3 = document.getElementById('lot')
var divlab = document.createElement('label')
divlab.innerText = Visual.Data[i].Shifts
div3.appendChild(divlab)
var br = document.createElement('br')
div3.appendChild(br)
//-------------------
var div4 = document.getElementById('engineer')
var divlab = document.createElement('label')
divlab.innerText = Visual.Data[i].PannelRS
div4.appendChild(divlab)
var br = document.createElement('br')
div4.appendChild(br)
//-------------------
var div5 = document.getElementById('engineerdate')
var divlab = document.createElement('label')
divlab.innerText = Visual.Data[i].PannelDesc
div5.appendChild(divlab)
var br = document.createElement('br')
div5.appendChild(br)
//-------------------
var div6 = document.getElementById('createtime')
var divlab = document.createElement('label')
divlab.innerText = Visual.Data[i].SMRS
div6.appendChild(divlab)
var br = document.createElement('br')
div6.appendChild(br)
//-------------------
var div7 = document.getElementById('status')
var divlab = document.createElement('label')
divlab.innerText = Visual.Data[i].SPVPFCRS
div7.appendChild(divlab)
var br = document.createElement('br')
div7.appendChild(br)
//-------------------
var div8 = document.getElementById('createuser')
var divlab = document.createElement('label')
divlab.innerText = Visual.Data[i].ProcessEngineerDateTime
div8.appendChild(divlab)
var br = document.createElement('br')
div8.appendChild(br)
//-------------------
var div9 = document.getElementById('result')
var divlab = document.createElement('label')
divlab.innerText = Visual.Data[i].CorrectiveMeasures
div9.appendChild(divlab)
var br = document.createElement('br')
div9.appendChild(br)
//-------------------
var div10 = document.getElementById('button1')
var divlab = document.createElement('a')
divlab.innerText = '详情'
divlab.setAttribute(
'href',
'Visual_Checklist.aspx?guid=' + Visual.Data[i].Guid)
div10.appendChild(divlab)
var br = document.createElement('br')
div10.appendChild(br)
}
})
var len = json.length; //总记录条数
viewTotalPages = len % viewPage == 0 ? len / viewPage : len / viewPage + 1; //页数
for (var i = 1; i <= viewTotalPages; i++) {
ul.innerHTML += `
<li class="pagination" id="${i}"><a href="#">${i}</a></li>
`
}
ul.innerHTML += `
<li id="next" class="pagination">
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
`;
liAll = document.querySelectorAll("li.pagination");
liAll[1].childNodes[0].style.color = "red";
var pagethis = 1; //当前是第几页
for (var i = 1; i < liAll.length - 1; i++) {
liAll[i].onclick = function () {
for (var j = 1; j < liAll.length - 1; j++) {
liAll[j].childNodes[0].style.color = "blue"
}
pagethis = this.id; //获取当前是第几页
liAll[pagethis].childNodes[0].style.color = "red";
let start; //当页数据的起始下标
let end; //当页数据的结束下标
if (pagethis != 1) {
start = (pagethis - 1) * viewPage;
end = start + viewPage;
if (end > json.length - 1) { //如果当页数据结束值大于总数据条数下标的值则赋值为总数据条数最大下标值
end = json.length - 1;
}
} else {
start = 0;
end = viewPage - 1;
}
clearTable();
var tbody = document.querySelector("li.pagination");
json.forEach(function (item, i) {
if (i >= start && i <= end) {
var div = document.getElementById('guid')
var divlab = document.createElement('label')
divlab.innerText = Visual.Data[i].GUID
div.appendChild(divlab)
var br = document.createElement('br')
div.appendChild(br)
//-------------
var div1 = document.getElementById('line')
var divlab = document.createElement('label')
divlab.innerText = Visual.Data[i].LineNo
div1.appendChild(divlab)
var br = document.createElement('br')
div1.appendChild(br)
//-------------
var div2 = document.getElementById('part')
var divlab = document.createElement('label')
divlab.innerText = Visual.Data[i].PartNo
div2.appendChild(divlab)
var br = document.createElement('br')
div2.appendChild(br)
//-------------------
var div3 = document.getElementById('lot')
var divlab = document.createElement('label')
divlab.innerText = Visual.Data[i].Shifts
div3.appendChild(divlab)
var br = document.createElement('br')
div3.appendChild(br)
//-------------------
var div4 = document.getElementById('engineer')
var divlab = document.createElement('label')
divlab.innerText = Visual.Data[i].PannelRS
div4.appendChild(divlab)
var br = document.createElement('br')
div4.appendChild(br)
//-------------------
var div5 = document.getElementById('engineerdate')
var divlab = document.createElement('label')
divlab.innerText = Visual.Data[i].PannelDesc
div5.appendChild(divlab)
var br = document.createElement('br')
div5.appendChild(br)
//-------------------
var div6 = document.getElementById('createtime')
var divlab = document.createElement('label')
divlab.innerText = Visual.Data[i].SMRS
div6.appendChild(divlab)
var br = document.createElement('br')
div6.appendChild(br)
//-------------------
var div7 = document.getElementById('status')
var divlab = document.createElement('label')
divlab.innerText = Visual.Data[i].SPVPFCRS
div7.appendChild(divlab)
var br = document.createElement('br')
div7.appendChild(br)
//-------------------
var div8 = document.getElementById('createuser')
var divlab = document.createElement('label')
divlab.innerText = Visual.Data[i].ProcessEngineerDateTime
div8.appendChild(divlab)
var br = document.createElement('br')
div8.appendChild(br)
//-------------------
var div9 = document.getElementById('result')
var divlab = document.createElement('label')
divlab.innerText = Visual.Data[i].CorrectiveMeasures
div9.appendChild(divlab)
var br = document.createElement('br')
div9.appendChild(br)
//-------------------
var div10 = document.getElementById('button1')
var divlab = document.createElement('a')
divlab.innerText = '详情'
divlab.setAttribute(
'href',
'Visual_Checklist.aspx?guid=' + Visual.Data[i].Guid)
div10.appendChild(divlab)
var br = document.createElement('br')
div10.appendChild(br)
}
})
}
}
pre = document.querySelector("#pre") //上一页
next = document.querySelector("#next") //下一页
pre.onclick = function () {
// alert(pagethis)
if (pagethis != 1) { //当前页数不等于1时执行上一页
pagethis--;
for (var j = 1; j < liAll.length - 1; j++) {
liAll[j].childNodes[0].style.color = "blue"
}
liAll[pagethis].childNodes[0].style.color = "red";
let start;
let end;
if (pagethis != 1) {
start = (pagethis - 1) * viewPage;
end = start + viewPage;
if (end > json.length - 1) {
end = json.length - 1;
}
} else {
start = 0;
end = viewPage - 1;
}
}
}
next.onclick = function () {
// alert(pagethis)
if (pagethis < liAll.length - 2) { //当前页数小于最后一页则执行下一页
pagethis++;
for (var j = 1; j < liAll.length - 1; j++) {
liAll[j].childNodes[0].style.color = "blue"
}
liAll[pagethis].childNodes[0].style.color = "red";
let start;
let end;
if (pagethis != 1) {
start = (pagethis - 1) * viewPage;
end = start + viewPage;
if (end > json.length - 1) {
end = json.length - 1;
}
} else {
start = 0;
end = viewPage - 1;
}
clearTable();
var tbody = document.querySelector("li.pagination");
json.forEach(function (item, i) {
if (i >= start && i <= end) {
var div = document.getElementById('guid')
var divlab = document.createElement('label')
divlab.innerText = Visual.Data[i].GUID
div.appendChild(divlab)
var br = document.createElement('br')
div.appendChild(br)
//-------------
var div1 = document.getElementById('line')
var divlab = document.createElement('label')
divlab.innerText = Visual.Data[i].LineNo
div1.appendChild(divlab)
var br = document.createElement('br')
div1.appendChild(br)
//-------------
var div2 = document.getElementById('part')
var divlab = document.createElement('label')
divlab.innerText = Visual.Data[i].PartNo
div2.appendChild(divlab)
var br = document.createElement('br')
div2.appendChild(br)
//-------------------
var div3 = document.getElementById('lot')
var divlab = document.createElement('label')
divlab.innerText = Visual.Data[i].Shifts
div3.appendChild(divlab)
var br = document.createElement('br')
div3.appendChild(br)
//-------------------
var div4 = document.getElementById('engineer')
var divlab = document.createElement('label')
divlab.innerText = Visual.Data[i].PannelRS
div4.appendChild(divlab)
var br = document.createElement('br')
div4.appendChild(br)
//-------------------
var div5 = document.getElementById('engineerdate')
var divlab = document.createElement('label')
divlab.innerText = Visual.Data[i].PannelDesc
div5.appendChild(divlab)
var br = document.createElement('br')
div5.appendChild(br)
//-------------------
var div6 = document.getElementById('createtime')
var divlab = document.createElement('label')
divlab.innerText = Visual.Data[i].SMRS
div6.appendChild(divlab)
var br = document.createElement('br')
div6.appendChild(br)
//-------------------
var div7 = document.getElementById('status')
var divlab = document.createElement('label')
divlab.innerText = Visual.Data[i].SPVPFCRS
div7.appendChild(divlab)
var br = document.createElement('br')
div7.appendChild(br)
//-------------------
var div8 = document.getElementById('createuser')
var divlab = document.createElement('label')
divlab.innerText = Visual.Data[i].ProcessEngineerDateTime
div8.appendChild(divlab)
var br = document.createElement('br')
div8.appendChild(br)
//-------------------
var div9 = document.getElementById('result')
var divlab = document.createElement('label')
divlab.innerText = Visual.Data[i].CorrectiveMeasures
div9.appendChild(divlab)
var br = document.createElement('br')
div9.appendChild(br)
//-------------------
var div10 = document.getElementById('button1')
var divlab = document.createElement('a')
divlab.innerText = '详情'
divlab.setAttribute(
'href',
'Visual_Checklist.aspx?guid=' + Visual.Data[i].Guid)
div10.appendChild(divlab)
var br = document.createElement('br')
div10.appendChild(br)
}
})
}
}
}
//清空数据
function clearTable() {
document.getElementById("table2").innerHTML = `
<th id="guid" ></th>
<th id="line" ></th>
<th id="part" colspan="2"></th>
<th id="lot" colspan="2"></th>
<th id="engineer" colspan="2"></th>
<th id="engineerdate" colspan="2"></th>
<th id="createtime" colspan="2"></th>
<th id="createuser" colspan="2"></th>
<th id="status" colspan="3"></th>
<th id="result" colspan="2" ></th>
<th id="button1" ></th>
`
}
function clearSMTTable() {
document.getElementById("table3").innerHTML = `
<th id="smtguid" ></th>
<th id="smtline" colspan="2"></th>
<th id="smtpart" colspan="2"></th>
<th id="smtlot" colspan="2"></th>
<th id="smtengineer" colspan="4"></th>
<th id="smtengineerdate" colspan="4"></th>
<th id="smtresult" colspan="4"></th>
<th id="button2" colspan="1"></th>
`
}
function GetSMTInfo() {
var SMT ={
"IsSuccess": true,
"ErrorMsg": "sucsseul",
"UserId": "admin",
"ExceptionType": 1,
"Data": [
{
"GUID": "177f9c",
"LineNo": "line001",
"PartNo": "part1",
"Shifts": 2,
"PannelRS": "底座require",
"PannelDesc": "底座拒收",
"SMRS": "钢网require",
"SPVPFCRS": "锡膏有效期require",
"ProcessEngineerDateTime": "2021-09-10",
"CorrectiveMeasures": "通过"
},
{
"GUID": "4f9ed8",
"LineNo": "lineone",
"PartNo": "partone",
"Shifts": 2,
"PannelRS": "底座要求",
"PannelDesc": "底座拒收",
"SMRS": "钢网要求",
"SPVPFCRS": "锡膏有效期要求",
"ProcessEngineerDateTime": "2021-09-06",
"CorrectiveMeasures": "纠正错误"
},
{
"GUID": "ujv785",
"LineNo": "lineone",
"PartNo": "partone",
"Shifts": 2,
"PannelRS": "底座要求",
"PannelDesc": "底座拒收",
"SMRS": "钢网要求",
"SPVPFCRS": "锡膏有效期要求",
"ProcessEngineerDateTime": "2021-09-06",
"CorrectiveMeasures": "纠正错误"
},
{
"GUID": "bjlk45",
"LineNo": "lineone",
"PartNo": "partone",
"Shifts": 2,
"PannelRS": "底座要求",
"PannelDesc": "底座拒收",
"SMRS": "钢网要求",
"SPVPFCRS": "锡膏有效期要求",
"ProcessEngineerDateTime": "2021-09-06",
"CorrectiveMeasures": "纠正错误"
},
{
"GUID": "ugvj12",
"LineNo": "lineone",
"PartNo": "partone",
"Shifts": 2,
"PannelRS": "底座要求",
"PannelDesc": "底座拒收",
"SMRS": "钢网要求",
"SPVPFCRS": "锡膏有效期要求",
"ProcessEngineerDateTime": "2021-09-06",
"CorrectiveMeasures": "纠正错误"
},
{
"GUID": "vgh41g",
"LineNo": "lineone",
"PartNo": "partone",
"Shifts": 2,
"PannelRS": "底座要求",
"PannelDesc": "底座拒收",
"SMRS": "钢网要求",
"SPVPFCRS": "锡膏有效期要求",
"ProcessEngineerDateTime": "2021-09-06",
"CorrectiveMeasures": "纠正错误"
},
{
"GUID": "jhb548",
"LineNo": "lineone",
"PartNo": "partone",
"Shifts": 2,
"PannelRS": "底座要求",
"PannelDesc": "底座拒收",
"SMRS": "钢网要求",
"SPVPFCRS": "锡膏有效期要求",
"ProcessEngineerDateTime": "2021-09-06",
"CorrectiveMeasures": "纠正错误"
},
{
"GUID": "hbj456",
"LineNo": "lineone",
"PartNo": "partone",
"Shifts": 2,
"PannelRS": "底座要求",
"PannelDesc": "底座拒收",
"SMRS": "钢网要求",
"SPVPFCRS": "锡膏有效期要求",
"ProcessEngineerDateTime": "2021-09-06",
"CorrectiveMeasures": "纠正错误"
},
{
"GUID": "yghbj8",
"LineNo": "line001",
"PartNo": "part1",
"Shifts": 2,
"PannelRS": "底座require",
"PannelDesc": "底座拒收",
"SMRS": "钢网require",
"SPVPFCRS": "锡膏有效期require",
"ProcessEngineerDateTime": "2021-09-10",
"CorrectiveMeasures": "通过"
},
{
"GUID": "ycgho8",
"LineNo": "lineone",
"PartNo": "partone",
"Shifts": 2,
"PannelRS": "底座要求",
"PannelDesc": "底座拒收",
"SMRS": "钢网要求",
"SPVPFCRS": "锡膏有效期要求",
"ProcessEngineerDateTime": "2021-09-06",
"CorrectiveMeasures": "纠正错误"
},
{
"GUID": "rfyci8",
"LineNo": "lineone",
"PartNo": "partone",
"Shifts": 2,
"PannelRS": "底座要求",
"PannelDesc": "底座拒收",
"SMRS": "钢网要求",
"SPVPFCRS": "锡膏有效期要求",
"ProcessEngineerDateTime": "2021-09-06",
"CorrectiveMeasures": "纠正错误"
},
{
"GUID": "tfyvgh",
"LineNo": "lineone",
"PartNo": "partone",
"Shifts": 2,
"PannelRS": "底座要求",
"PannelDesc": "底座拒收",
"SMRS": "钢网要求",
"SPVPFCRS": "锡膏有效期要求",
"ProcessEngineerDateTime": "2021-09-06",
"CorrectiveMeasures": "纠正错误"
},
{
"GUID": "tfg512",
"LineNo": "lineone",
"PartNo": "partone",
"Shifts": 2,
"PannelRS": "底座要求",
"PannelDesc": "底座拒收",
"SMRS": "钢网要求",
"SPVPFCRS": "锡膏有效期要求",
"ProcessEngineerDateTime": "2021-09-06",
"CorrectiveMeasures": "纠正错误"
},
{
"GUID": "jn5vgh",
"LineNo": "lineone",
"PartNo": "partone",
"Shifts": 2,
"PannelRS": "底座要求",
"PannelDesc": "底座拒收",
"SMRS": "钢网要求",
"SPVPFCRS": "锡膏有效期要求",
"ProcessEngineerDateTime": "2021-09-06",
"CorrectiveMeasures": "纠正错误"
},
{
"GUID": "hbj54g",
"LineNo": "lineone",
"PartNo": "partone",
"Shifts": 2,
"PannelRS": "底座要求",
"PannelDesc": "底座拒收",
"SMRS": "钢网要求",
"SPVPFCRS": "锡膏有效期要求",
"ProcessEngineerDateTime": "2021-09-06",
"CorrectiveMeasures": "纠正错误"
},
{
"GUID": "gv54hg",
"LineNo": "lineone",
"PartNo": "partone",
"Shifts": 2,
"PannelRS": "底座要求",
"PannelDesc": "底座拒收",
"SMRS": "钢网要求",
"SPVPFCRS": "锡膏有效期要求",
"ProcessEngineerDateTime": "2021-09-06",
"CorrectiveMeasures": "纠正错误"
}
]
};
var json = SMT.Data;
json.forEach(function (item, i) {
if (i < viewPage) {
var div = document.getElementById('smtguid')
var divlab = document.createElement('label')
divlab.innerText = SMT.Data[i].GUID
div.appendChild(divlab)
var br = document.createElement('br')
div.appendChild(br)
//-------------
var div1 = document.getElementById('smtline')
var divlab = document.createElement('label')
divlab.innerText = SMT.Data[i].LineNo
div1.appendChild(divlab)
var br = document.createElement('br')
div1.appendChild(br)
//-------------
var div2 = document.getElementById('smtpart')
var divlab = document.createElement('label')
divlab.innerText = SMT.Data[i].PartNo
div2.appendChild(divlab)
var br = document.createElement('br')
div2.appendChild(br)
//-------------------
var div3 = document.getElementById('smtlot')
var divlab = document.createElement('label')
divlab.innerText = SMT.Data[i].Shifts
div3.appendChild(divlab)
var br = document.createElement('br')
div3.appendChild(br)
-------------------
var div4 = document.getElementById('smtengineer')
var divlab = document.createElement('label')
var Type = ""
if (SMT.Data[i].WeldingType == 1) {
Type = "回流焊接"
}
else {
Type="波峰焊接"
}
divlab.innerText = Type
div4.appendChild(divlab)
var br = document.createElement('br')
div4.appendChild(br)
-------------------
var div5 = document.getElementById('smtengineerdate')
var divlab = document.createElement('label')
divlab.innerText = SMT.Data[i].ProcessEngineerDateTime
div5.appendChild(divlab)
var br = document.createElement('br')
div5.appendChild(br)
var div9 = document.getElementById('smtresult')
var divlab = document.createElement('label')
divlab.innerText = SMT.Data[i].SMRS
div9.appendChild(divlab)
var br = document.createElement('br')
div9.appendChild(br)
-------------------
var div10 = document.getElementById('button2')
var divlab = document.createElement('a')
divlab.setAttribute('href', 'SMTLine.aspx?guid=' + SMT.Data[i].GUID)
divlab.innerText = '详情'
div10.appendChild(divlab)
var br = document.createElement('br')
div10.appendChild(br)
}
})
var len = json.length; //总记录条数
viewTotalPages = len % viewPage == 0 ? len / viewPage : len / viewPage + 1; //页数
for (var i = 1; i <= viewTotalPages; i++) {
ul1.innerHTML += `
<li id="${i}" class="pagination1"><a href="#">${i}</a></li>
`
}
ul1.innerHTML += `
<li id="next1" class="pagination1">
<a href="#" aria-label="Next1">
<span aria-hidden="true">»</span>
</a>
</li>
`;
liAll = document.querySelectorAll("li.pagination1");
liAll[1].childNodes[0].style.color = "red";
var pagethis = 1; //当前是第几页
for (var i = 1; i < liAll.length - 1; i++) {
liAll[i].onclick = function () {
for (var j = 1; j < liAll.length - 1; j++) {
liAll[j].childNodes[0].style.color = "blue"
}
pagethis = this.id; //获取当前是第几页
liAll[pagethis].childNodes[0].style.color = "red";
// console.log(liAll[i])
let start; //当页数据的起始下标
let end; //当页数据的结束下标
if (pagethis != 1) {
start = (pagethis - 1) * viewPage;
end = start + viewPage;
if (end > json.length - 1) { //如果当页数据结束值大于总数据条数下标的值则赋值为总数据条数最大下标值
end = json.length - 1;
}
} else {
start = 0;
end = viewPage - 1;
}
// console.log("start=" + start)
// console.log("end=" + end)
clearSMTTable();
json.forEach(function (item, i) {
if (i >= start && i <= end) {
var div = document.getElementById('smtguid')
var divlab = document.createElement('label')
divlab.innerText = SMT.Data[i].GUID
div.appendChild(divlab)
var br = document.createElement('br')
div.appendChild(br)
//-------------
var div1 = document.getElementById('smtline')
var divlab = document.createElement('label')
divlab.innerText = SMT.Data[i].LineNo
div1.appendChild(divlab)
var br = document.createElement('br')
div1.appendChild(br)
//-------------
var div2 = document.getElementById('smtpart')
var divlab = document.createElement('label')
divlab.innerText = SMT.Data[i].PartNo
div2.appendChild(divlab)
var br = document.createElement('br')
div2.appendChild(br)
//-------------------
var div3 = document.getElementById('smtlot')
var divlab = document.createElement('label')
divlab.innerText = SMT.Data[i].Shifts
div3.appendChild(divlab)
var br = document.createElement('br')
div3.appendChild(br)
-------------------
var div4 = document.getElementById('smtengineer')
var divlab = document.createElement('label')
var Type = ""
if (SMT.Data[i].WeldingType == 1) {
Type = "回流焊接"
}
else {
Type="波峰焊接"
}
divlab.innerText = Type
div4.appendChild(divlab)
var br = document.createElement('br')
div4.appendChild(br)
-------------------
var div5 = document.getElementById('smtengineerdate')
var divlab = document.createElement('label')
divlab.innerText = SMT.Data[i].ProcessEngineerDateTime
div5.appendChild(divlab)
var br = document.createElement('br')
div5.appendChild(br)
var div9 = document.getElementById('smtresult')
var divlab = document.createElement('label')
divlab.innerText = SMT.Data[i].SMRS
div9.appendChild(divlab)
var br = document.createElement('br')
div9.appendChild(br)
-------------------
var div10 = document.getElementById('button2')
var divlab = document.createElement('a')
divlab.setAttribute('href', 'SMTLine.aspx?guid=' + SMT.Data[i].GUID)
divlab.innerText = '详情'
div10.appendChild(divlab)
var br = document.createElement('br')
div10.appendChild(br)
}
})
}
}
pre = document.querySelector("#pre1") //上一页
next = document.querySelector("#next1") //下一页
pre.onclick = function () {
// alert(pagethis)
if (pagethis != 1) { //当前页数不等于1时执行上一页
pagethis--;
for (var j = 1; j < liAll.length - 1; j++) {
liAll[j].childNodes[0].style.color = "blue"
}
liAll[pagethis].childNodes[0].style.color = "red";
let start;
let end;
if (pagethis != 1) {
start = (pagethis - 1) * viewPage;
end = start + viewPage;
if (end > json.length - 1) {
end = json.length - 1;
}
} else {
start = 0;
end = viewPage - 1;
}
}
}
next1.onclick = function () {
// alert(pagethis)
if (pagethis < liAll.length - 2) { //当前页数小于最后一页则执行下一页
pagethis++;
for (var j = 1; j < liAll.length - 1; j++) {
liAll[j].childNodes[0].style.color = "blue"
}
liAll[pagethis].childNodes[0].style.color = "red";
let start;
let end;
if (pagethis != 1) {
start = (pagethis - 1) * viewPage;
end = start + viewPage;
if (end > json.length - 1) {
end = json.length - 1;
}
} else {
start = 0;
end = viewPage - 1;
}
clearSMTTable()
var tbody = document.querySelector("li.pagination1");
json.forEach(function (item, i) {
if (i >= start && i <= end) {
var div = document.getElementById('smtguid')
var divlab = document.createElement('label')
divlab.innerText = SMT.Data[i].GUID
div.appendChild(divlab)
var br = document.createElement('br')
div.appendChild(br)
//-------------
var div1 = document.getElementById('smtline')
var divlab = document.createElement('label')
divlab.innerText = SMT.Data[i].LineNo
div1.appendChild(divlab)
var br = document.createElement('br')
div1.appendChild(br)
//-------------
var div2 = document.getElementById('smtpart')
var divlab = document.createElement('label')
divlab.innerText = SMT.Data[i].PartNo
div2.appendChild(divlab)
var br = document.createElement('br')
div2.appendChild(br)
//-------------------
var div3 = document.getElementById('smtlot')
var divlab = document.createElement('label')
divlab.innerText = SMT.Data[i].Shifts
div3.appendChild(divlab)
var br = document.createElement('br')
div3.appendChild(br)
-------------------
var div4 = document.getElementById('smtengineer')
var divlab = document.createElement('label')
var Type = ""
if (SMT.Data[i].WeldingType == 1) {
Type = "回流焊接"
}
else {
Type="波峰焊接"
}
divlab.innerText = Type
div4.appendChild(divlab)
var br = document.createElement('br')
div4.appendChild(br)
-------------------
var div5 = document.getElementById('smtengineerdate')
var divlab = document.createElement('label')
divlab.innerText = SMT.Data[i].ProcessEngineerDateTime
div5.appendChild(divlab)
var br = document.createElement('br')
div5.appendChild(br)
var div9 = document.getElementById('smtresult')
var divlab = document.createElement('label')
divlab.innerText = SMT.Data[i].SMRS
div9.appendChild(divlab)
var br = document.createElement('br')
div9.appendChild(br)
-------------------
var div10 = document.getElementById('button2')
var divlab = document.createElement('a')
divlab.setAttribute('href', 'SMTLine.aspx?guid=' + SMT.Data[i].GUID)
divlab.innerText = '详情'
div10.appendChild(divlab)
var br = document.createElement('br')
div10.appendChild(br)
}
})
}
}
}程序截图
基本实现了分页的功能
涉及的技术要点。js对元素的获取与赋值
document.querySelectorAll("li.pagination");对类pagination中的所有li的获取
var div5 = document.getElementById('engineerdate')
var divlab = document.createElement('label')
divlab.innerText = Visual.Data[i].PannelDesc
div5.appendChild(divlab)
var br = document.createElement('br')
div5.appendChild(br)对现有的名为engineerdate的id获取元素，在其基础上进行动态添加列
对json中的数据的取值也是重点。还有就是float: left;进行浮点布局也很重要。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
