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('
首页
');    if (pageNum < 7) {        for (var i = 1; i <= pageNum; i++) {            if (i === curPageNum) {                pageNumElms.push('
' + i + '
');            } else {                pageNumElms.push('
' + i + '
');            }        }    } 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('
' + i + '
');            } else {                pageNumElms.push('
' + i + '
');            }        }    }    pageNumElms.push('
尾页
');    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;