前端分页小组件的实现，可分页前端数据

<!--展示数据-->
<table id="show" border="1px" cellpadding="10px">
</table>
<div class="page">
    </div>

var  outshow ="";
let itableEl = document.querySelector("#show");
function gopage(pno, psize) {  //翻页
$.ajax({
        url: "http://localhost:【端口】/search/all",
        type: "get",
        dataType: "json",
        contentType: "application/json;charset=UTF-8",  //设置请求为json格式，中文的为utf-8
        success: function (result){   //后端返回的数据
           itableEl.innerHTML=result;
         },
         Error: function () {
            window.alert("查询发生错误~");
        }
         })
    /**
    分页组件的实现
    */
    //计算行数
    let rowsNumber = itableEl.rows.length;
    //计算分多少页
    let pages = (rowsNumber / psize) > parseInt(rowsNumber / psize) ? parseInt(((rowsNumber / psize) + 1)) : parseInt(rowsNumber / psize);
    //当前显示的数据(数据显示的第一行，最后一行所在的位置)
    let startRow = (pno - 1) * psize + 1;
    let endRow = pno * psize > rowsNumber ? rowsNumber : pno * psize;
    //分页框
    let pageBoxEl = document.querySelector(".page");
    //遍历，如果数据在当前页，否则就隐藏
    for (let i = 1; i <= rowsNumber; i++) {
        if (i >= startRow && i <= endRow) {
            itableEl.rows[i - 1].style.display = 'block'; //行的展示
        } else {
            itableEl.rows[i - 1].style.display = 'none';// 行的隐藏
        }
    }
    //分页按钮
    //如果当前在第一页，则第一页和首页将以链接形式显示(可以提供给用户进行点击，并可切换页数),
    // 否则只能进行文本形式显示
    let temStr = "当前共" + rowsNumber + "条数据,分" + pages + "页显示，当前在第" + pno + "页";
    if (pno > 1) {
        temStr += '<a href="#" onClick="gopage(' + 1 + ',' + psize + ')">首页</a><a href="#" onClick="gopage(' + (pno - 1) + ',' + psize + ')">第一页</a>'
    } else {
        temStr += '首页 <第一页';
    }
    if (pno < pages) {
        temStr += ',<a href="#" onClick="gopage(' + (pno + 1) + ',' + psize + ')">下一页 ></a><a href="#" onClick="gopage(' + pages + ',' + psize + ')">尾页</a>'
    } else {
        temStr += '第一页> 尾页';
    }
    pageBoxEl.innerHTML = temStr;
}
//开始情况时，初定值显示第一页，每页设置为5条数据
function enter () {
    gopage(1, 5);
}