JavaScript实现后端动态数据分页显示

 MyBatis后端响应过来的数据详情：

{
    state: 2000,
    data: {
        total: 13,
        list: [],
        pageNum: 2,
        pageSize: 6,
        size: 6,
        startRow: 7,
        endRow: 12,
        pages: 3,
        prePage: 1,
        nextPage: 3,
        isFirstPage: false,
        isLastPage: false,
        hasPreviousPage: true,
        hasNextPage: true,
        navigatePages: 8,
        navigatepageNums: [
            1,
            2,
            3
        ],
        navigateFirstPage: 1,
        navigateLastPage: 3
    }
}

按照响应的数据详情，进行分页数据的展示，前端分页效果 ：

HTML代码(使用bootStrap框架的分页插件)如下：

<nav align="center">
	<ul class="pagination" id="pageInfo">
	    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
	    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
	    <li class=""><a href="#">2 <span class="sr-only">(current)</span></a></li>
	    <li class=""><a href="#">3 <span class="sr-only">(current)</span></a></li>
	    <li class=""><a href="#" aria-label="Previous"><span aria-hidden="true">&raquo;</span></a></li>
	</ul>
</nav>

JS核心代码实现过程：

// 其中 result.data 是从后端响应回来的数据对象
$("#pageInfo").empty();
let pageInfo = result.data.data
let nums = pageInfo.navigatepageNums;
let pageNum = pageInfo.pageNum;
// 分页处理
let li = `<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
		${nums.map((item)=>{
			return `<li class="${item==pageNum?'active':""}">
					    <a onclick="getFavorites(${pageNum})">
						    <span className="sr-only">${item}</span>
					    </a>
					</li>`
		    }).join('')}
		<li class=""><a href="#" aria-label="Previous"><span aria-hidden="true">&raquo;</span></a></li>`
$("#pageInfo").append(li);