UIkit 分页组件动态加载简单实现

// 改变页码
// obj: 页码ul对象, items: 记录总数量, itemsOnePage: 每页展示的数量, curPageNum: 当前所在页数
function changePagination(obj, items, itemsOnePage, curPageNum) {
    var pageNum = Math.ceil(items/itemsOnePage);
    var elms = getPageNthElms(pageNum, curPageNum);
    $(obj).find('li').remove();
    elms.forEach(function (elm) {
        $(obj).append(elm);
    });
}

// 获取要显示的页码元素
function getPageNthElms(pageNum, curPageNum) {
    var pageNumElms = [];
    pageNumElms.push('<li page_num="1" class="first-page"><a href="#">首页</a></li>');
    if (pageNum < 7) {
        for (var i = 1; i <= pageNum; i++) {
            if (i === curPageNum) {
                pageNumElms.push('<li class="uk-active" page_num="' + i + '"><span>' + i + '</span></li>');
            } else {
                pageNumElms.push('<li page_num="' + i + '"><a href="javascript:;">' + i + '</a></li>');
            }
        }
    } else {
        var middlePage;
        if (curPageNum <= 4) {
            middlePage = 4;
        } else if (curPageNum >= pageNum-3) {
            middlePage = pageNum-3;
        } else {
            middlePage = curPageNum;
        }
        for (var i = middlePage-3; i <= middlePage+3; i++) {
            if (i === curPageNum) {
                pageNumElms.push('<li class="uk-active" page_num="' + i + '"><span>' + i + '</span></li>');
            } else {
                pageNumElms.push('<li page_num="' + i + '"><a href="javascript:;">' + i + '</a></li>');
            }
        }
    }
    pageNumElms.push('<li page_num="' + pageNum + '" class="last-page"><a href="javascript:;">尾页</a></li>');
    return pageNumElms;
}

// 获取总记录条数
var count = getAdminCount();
// 根据总记录条数，每个页面的记录条数以及当前页码修改页码插件的显示
changePagination($('#admin-pagination'), count, limit, curPageNum);
// 根据当前页码以及每个页面记录条数获取相应数据
var adminList = getLimitAdmin((curPageNum-1)*limit, limit);
// 渲染页面
renderUserAdmin(adminList);