前端渲染原理分析

一、需要引入的包

simplePagination.css simplePagination.js paging.js paging.css

地址：common\mior-lib\paging\ common版本：page-20170323

二、调用组件

组件提供两个接口

pageUtils.init(obj, options, renderback, callback[,arraySelect]):初始化要渲染的dom

pageUtils.renderPage(options, renderback):分页按钮的局部刷新

三、参数说明

obj: 组件要渲染的位置(jquery对象)

options: 渲染分页的初始化参数

{
    totalItems:'',    // 参与分页的项目总数，必传
    currentPage:'',   // 页面初始化渲染后高亮的页码，从1开始，默认值为1
    itemsOnPage:''   // 每页上显示的项目数，默认为50
}

renderback: 点击页码的回调

callback: 选择每页项目数的下拉框、输入页码点击确定的回调

arraySelect: 可选参数，选择框可选的每页项目数，长度为3的数组

currentPage: 当前页码

itemsOnPage: 每页上显示的项目数

四、示例用法：

/**
 * currentPage --- 当前点击的页码
 * itemsOnPage --- 每页上显示的项目数
 */
pageUtils.init(obj, options, function (currentPage, itemsOnPage) {
    // 1.获取新数据
    
}, function (currentPage, itemsOnPage) {
    // 1.获取新数据
    
    // 2.重新渲染
    options.currentPage = currentPage;
    options.itemsOnPage = itemsOnPage;
    pageUtils.renderPage(options, function (currentPage, itemsOnPage) {
        // 1.获取新数据
    })
})

五、应用示例

代码效果：
[图片上传失败...(image-294d8e-1555904530872)]

示例：

initPagination:function () {
    var self = this;
    //var array = [25,50,100]
    var options = {
        totalItems:self.pageInfo.totalCount,
        currentPage:self.pageInfo.pageNo,
        itemsOnPage:self.pageInfo.pageSize
    }
    //初始化组件
    pageUtils.init(this.$("#paginationBlock"), options, function (currentPage, itemsOnPage){
        self.pageInfo.pageNo = currentPage - 1;
        self.pageInfo.pageSize = newItems;
        self.reQuery();
    },function(currentPage,itemsOnPage) {
        //当查询或者选择每页呈现项目数后重新查询
        self.pageInfo.pageNo = currentPage - 1;
        self.pageInfo.pageSize = itemsOnPage;
        options.currentPage = currentPage ;
        options.itemsOnPage = itemsOnPage;
        self.reQuery();
        //发生改变重新渲染分页组件
        pageUtils.renderPage(options,function (currentPage, itemsOnPage) {
            self.pageInfo.pageNo = currentPage -1 ;
            self.pageInfo.pageSize = newItems;
            self.reQuery();
        })
    }/*,array*/)
}

五、使用注意

1.后台存储页面的数组一般从0开始，函数向后台取数据时注意传当前页面时应该做减1处理。

2.整个条宽度由传入的obj决定。