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

2019独角兽企业重金招聘Python工程师标准>>>

1. 问题描述

---

• 使用过UIkit分页组件的都清楚，UIkit的分页不能动态刷新数据，也就是不能在点击下一页的时候，动态从后台加载数据，并且刷新页数以及该页数上的数据，下面是一个简单实现，没有做任何优化，可以参考一下。

2. pagination.js

---

• 动态修改页码的实现

// 改变页码
// 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;
}

3. 页面实现大概过程

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

3. 后台分页实现

---

• 可以根据页码的数字以及每页存放记录的条数，通过mysql的limit实现，语句类似如下：

  select * from admin where state = 1 limit 10, 10;
  

转载于:https://my.oschina.net/shadowolf/blog/1833327