前端数据分页

最新推荐文章于 2024-05-16 14:12:36 发布
最新推荐文章于 2024-05-16 14:12:36 发布
阅读量785 收藏 1
点赞数
分类专栏： 前端 开发 文章标签： html css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42145499/article/details/120232293
版权
本文介绍了一个前端报表项目的分页实现，涉及到两个数据表的独立展示和分页功能。通过JavaScript处理数据，动态生成表格内容，并实现上一页、下一页功能。同时，文章讨论了如何利用CSS进行页面样式设置，以及如何根据用户点击事件更新页面数据。
摘要由CSDN通过智能技术生成

        最近在做报表项目的时候，涉及到前端数据分页。在网上查找了好多方案，在这里做一个总结。首先说一下业务场景，目前有两张表的数据，使用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">&laquo;</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">&laquo;</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">&raquo;</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">&raquo;</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;进行浮点布局也很重要。

沧.海
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html前端动态获取后端数据显示到表格，实现分页显示
04-14
html前端获取后端js的数据，实现到html表格，并且实现表格分页显示，分页显示原理是要显示那一页数据就从后端获取需要显示页的数据，不会一次性获取全部数据，减小流前端的压力。后端使用js+express，读取csv文件存储到内存，前端需要那一段的数据，后端就给前端那一页的数据。非常适合前端新手。同时分为两个文件serverImage和clientImage，其中包含项目源码,一些配置文件，以及后端需要处理的两个csv文件，同时包含生成docker镜像的Dockerfile，可直接在serverImage和clientImage目录先直接build客户端镜像和服务端镜像。
VUE,路由，前端数据分页浏览
05-25
VUE,路由，前端数据分页浏览
前端数据分页——table表数据分页方法(1)
AI量化交易实验室
07-13 5467
我们在页面展示一个table表格的时候，当数据量较大时，常常会考虑到数据分页的问题，数据分页一般有三种方式，分别是前端数据分页，后端数据分页，数据库分页。 前端数据分页：是把所有数据加载到前端，然后在前端用js实现数据的分页，这种分页方式是最方便简单的，但是也是效果最差的。因为当数据量很大时，前端加载数据耗时很久，页面会因为加载数据而无法正常显示，体验很差。并且因为数据是一次性加载到前端，当数据...
前端如何实现分页
最新发布
zhangyao940330的博客
05-16 214
分页的思路：把所有的数据请求回来后，通过arr.slice(开始索引，结束索引)来进行截取每一页的数据；假设当前页是currentPage = 1，pageSize = 5，那么应该从(currentPage-1)先定义分页中需要用的三个值：currentPage（当前页码）、total（总条数）、pageSize（每页展示的数据量）pageSize结束，自己验证下，找到这样的规律后，就可以截取每一页的数据了；pageSize开始截取，到currentPage。
前端分页处理
m0_71349739的博客
08-28 1110
如data:[1,2,3,4,5,6,7,8]，那么data.splice(0,3)就是从第0位开始，删除3个元素，即删除的元素为[1,2,3]，剩余元素为data:[4,5,6,7,8]，此方法会改变原数组。如data:[1,2,3,4,5,6,7,8]，那么data.slice(0,3)就为下标为0，1，2,不包括下标为3的数，即[1,2,3]，可以看成数学中的[0,3)比如：data=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19]
前端分页方法
weixin_30621711的博客
04-14 137
vue或element-ui有的时候tab列表里需要编辑一些东西，使用后台分页是需要调接口的，这个时候你编辑的东西翻页后就不存在了，就需要拿到所有数据后在前端进行分页，数据就不会丢失了,这个时候就可以把编辑后的数据一起传给后台。 this.settlementData这里是接口拿回来的所有数据， 然后table 里data 绑定的值这么写 data 绑定的值 = this.paging...
前端处理分页
hello917的博客
11-07 536
//后端统一把所有数据以json串 传给前端 item.total = 数据的length //数据的总数量 item.totalPage = Math.ceil(item.total/每页展示的数量) //取整数量除每页展示的数量 分页大小 item.current = 1 //默认展示页码 let list = {} //以对象的格式来保存数据 //for循环 分页大小size for(var i = 0;i < item.totalPage;i++){ list['page'+(i
前端Javaweb分页实现
03-19
在前端JavaWeb开发中，分页是一个非常常见的需求，它能有效地管理大量数据，提高用户体验。本示例提供了一个可复用的分页代码，旨在帮助开发者快速集成到自己的项目中。下面将详细介绍如何实现前端JavaWeb的分页功能...
纯前端分页
06-28
纯前端分页是一种在网页上实现数据展示时的常见技术，尤其在大数据量的情况下，它能够有效地提升用户体验，避免一次性加载过多数据导致页面卡顿。本文将深入探讨纯前端分页的实现原理、相关技术以及如何运用到实际...
纯JS前端实现分页代码
11-25
在前端开发中，分页是一种常见的功能，用于处理大量数据的显示，避免一次性加载过多内容导致页面卡顿或用户浏览不便。在这个场景中，我们讨论的是如何使用纯JavaScript实现前端分页，不依赖任何第三方库或插件。下面...
layUI实现前端分页和后端分页
10-16
总结来说，layUI的前端分页适合数据量较小的情况，而后端分页则更适合大数据量的场景，通过服务器端处理可以有效减轻前端的压力。两种方式结合使用，可以根据项目需求灵活调整，为用户提供更优质的浏览体验。
新手学习可前端分页，前端分页，简单的前端分页，html分页，html前端分页
07-13
新手学习可前端分页，里面注释详细，详细到你会觉得啰嗦，很好理解，代码简单，理解透彻之后自己也可以手写分页，对新手，对想学习前端分页的童鞋，有很大帮助，大神勿喷，这个过于简单，谢谢。
JavaScrip实现前端列表分页
热门推荐
qq_31258245的博客
12-25 2万+
在一些网站的管理系统中，通常的查询功能会有很多信息，这时候前端如果不分页显示，那么浏览器的长度就会很长。所以通常要进行分页处理。     对于分页主要有两种方法，第一种方法有后台来进行分页，前端通过请求后台传入分页所需的参数来使后台返回响应的分页结果。第二种方法是有前台来进行分页，后台一次性返回全部结果，前端对这些结果进行分页显示处理。     下面主要是实现的一个前端分页的效果，先上几张效果图
前端js数据分页处理
weixin_51697449的博客
10-20 2700
大部分时候分页处理后端会处理好，前端直接拿到数据渲染就可以。 但是但是~有时候也会遇到个别不给你处理分页的后端… 这个时候就需要我们拿到数据后自己去吧数据做分页处理，然后再渲染了 代码如下： let data=[{//模拟数据（假设这就是从后台请求过来的数据） name: "沈阳市", value: ["123.429092", "41.796768"], }, { name: "长春市", value: ["125.324501", "43.886841"],
前端对数据进行分页查询处理
frewtyh的博客
07-06 442
由于数据特殊，后端做不了分页查询功能，只能由前端对数据进行分页，查询，排序，处理数据。3.修改数据根据row所传id来改变data数据的相应的值。这边的查询时名称和类型查询，然后分页用的ivew分页。1.将数据使用计算属性computed()进行处理。2.将计算属性渲染到table表格中。这样子一个前端分页查询的数据就写好了。
前端实现分页
sunnyboysix的博客
08-11 170
data() { return { paginationData: [], tableData: [], currentPage: 1, pageSize: 3, total: 0, } }, dealList() { this.paginationData = [] // 分页数组 tableData 所有的数据 for (let j = this.pageSize * (this.cur.
数据在前端显示的分页技术
weixin_30355437的博客
06-24 203
1.实体工具类 /** * 分页工具类.泛型类 */ public class PageUtil<T> { //属性 private int pageNumber;//总记录数 private int pageCount;//总页数 private int pageIndex;//当前页 private int page...
vue+elemeng ui 前端处理数据做分页
Ms_alinda的博客
08-17 1099
需求点： 页面数据为前端本地数据，做分页处理。
通用分页详解（前端）
m0_74915426的博客
06-29 5776
首页
前端接口数据分页加载数据
05-05
前端接口数据分页加载数据通常需要以下步骤： 1. 在后端编写分页查询接口，接口需要接收当前页码和每页显示的数据条数作为参数，并返回对应页码的数据。 2. 在前端编写分页组件，组件需要显示当前页码和总页数，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值