用纯js实现列表分页

提供一种纯 js 分页思路。

由于该需求获取到的数据量较少，所有选择直接请求后端，一次性接了所有的数据，然后拼接html代码来展示数据。

var pageSize = 5;   // 每页数据条数
var pageNum = 0;    // 总页数
var allData;   // 接收到的所有数据
$(function () {
    $.ajax({
        type: 'POST',
        crossDomain: true,
        async: false,
        url: '后端接口',
        data: {'参数'},
        success: function (data) {
            allData = data.key; // key为后端输出的key值
            toPage(1);
        }
    });
});

// 分页，跳转
function toPage(pno) { // pno：代表第几页，当前页
    // 总行数
    var num = allData.length;
    // 总页数
    pageNum = num / pageSize;
    pageNum = pageNum > parseInt(pageNum) ? parseInt(pageNum) + 1 : parseInt(pageNum);
    // 开始行
    var startRow = (pno - 1) * pageSize;
    // 结束行
    var endRow = pno * pageSize - 1;
    // 最后一页的结束行判断
    endRow = (endRow > num) ? num - 1 : endRow;
    // 拼接标题
    var htmlStr = '<tr class="title" height="40"><td style="text-align: left;" colspan="5"><span id="reportHead">标题</span></td></tr>';
    // 拼接表头
    htmlStr += '<tr class="header" nowrap="nowrap"><th>列1</th><th>列2</th><th>列3</th><th>列4</th><th>列5</th></tr>';
    // 列表
    for (var i = startRow; i <= endRow; i++) {
        // 拼接列表的html语句  逻辑判断等   略
        htmlStr += '~~~~~~~~~~';
    }
    // 页脚
    htmlStr += '<tr class="footer"><th colspan="5" id="footer"><div>'
        + '当前第 ' + pno + ' 页/共 ' + pageNum + ' 页  每页显示 ' + pageSize + ' 条记录，';
    // 判断是否为第一页，是则首页与上一页无点击事件
    if (pno == 1) {
        htmlStr += '首页 上一页 ';
    } else {
        htmlStr += '<a href="#" οnclick="toPage(1);">首页 </a>'
            + '<a href="#" οnclick=\"toPage(' + (pno - 1) + ');\">上一页 </a>';
    }
    // 判断是否为最后一页，是则下一页与尾页无点击事件
    if (pno == pageNum) {
        htmlStr += '下一页 尾页';
    } else {
        htmlStr += '<a href="#" οnclick=\"toPage(' + (pno + 1) + ');\">下一页 </a>'
            + '<a href="#" οnclick=\"toPage(' + pageNum + ');\">尾页</a></div></th></tr>';
    }
    $("#mainTab").html(htmlStr);
}

页脚展示：

                当前第 1 页/共 1 页 每页显示 5 条记录，首页 上一页 下一页 尾页