文档

render 用于渲染 DOM ，如果你用到是 React 请使用 paging.react 他们都是 onface 的作品

如果你想完全自行封装，请使用 paging.createData

自定义样式： 下载lib/less 中的文件，并在修改后加载自定义样式。并修改 paging.render(pageData, style) 中的 style.prefixClassName 比如： {prefixClassName: 'my-paging'}

render

因为配置参数比较多，请根据界面效果，找到对应示例代码。

渲染DOM

paging.render(createDataSettings, styleSettings, dom) 函数返回值是渲染的HTML

var paging = require('paging')
var node = document.getElementById('renderNode')
require('face-icon/lib/index.css')
var title = document.createElement('h2')
title.innerHTML = '默认'
node.appendChild(title)
var dom = document.createElement('div')
paging.render(
    {
        page: 9,
        pageSize: 10,
        pageCount: 20,
        dataTotal: 200
    },
    {
        link: "p=",
        goto: true
    },
    dom
)
node.appendChild(dom)

var title = document.createElement('h2')
title.innerHTML = 'group 风格'
node.appendChild(title)
var dom = document.createElement('div')
paging.render(
    {
        page: 1,
        pageSize: 10,
        pageCount: 20
    },
    {
        link: "p=",
        themes: 'group'
    },
    dom
)
node.appendChild(dom)


var title = document.createElement('h2')
title.innerHTML = 'group group-solid 风格'
node.appendChild(title)
var dom = document.createElement('div')
paging.render(
    {
        page: 1,
        pageSize: 10,
        pageCount: 20
    },
    {
        link: "p=",
        themes: 'group group-solid'
    },
    dom
)
node.appendChild(dom)


var title = document.createElement('h2')
title.innerHTML = 'solid 风格'
node.appendChild(title)
var dom = document.createElement('div')
paging.render(
    {
        page: 8,
        pageSize: 10,
        pageCount: 20
    },
    {
        link: "p=",
        themes: 'solid'
    },
    dom
)
node.appendChild(dom)

var title = document.createElement('h2')
title.innerHTML = 'full 风格'
node.appendChild(title)
var dom = document.createElement('div')
paging.render(
    {
        page: 8,
        pageSize: 10,
        pageCount: 20,
        dataTotal: 201
    },
    {
        link: "p=",
        themes: 'full',
        goto: true
    },
    dom
)
node.appendChild(dom)

var title = document.createElement('h2')
title.innerHTML = 'mini 风格'
node.appendChild(title)
var dom = document.createElement('div')
paging.render(
    {
        page: 1,
        pageSize: 10,
        pageCount: 20
    },
    {
        link: "p=",
        themes: 'simple',
        mini: true
    },
    dom
)
node.appendChild(dom)

var title = document.createElement('h2')
title.innerHTML = 'goto'
node.appendChild(title)
var dom = document.createElement('div')
paging.render(
    {
        page: 1,
        pageSize: 10,
        dataTotal: 100,
        pageCount: 20
    },
    {
        link: "p=",
        text: {
            prev: '<span class="fi fi-double-left"></span>',
            next: '<span class="fi fi-double-right"></span>'
        },
        goto: true
    },
    dom
)
node.appendChild(dom)

var title = document.createElement('h2')
title.innerHTML = 'text'
node.appendChild(title)
var dom = document.createElement('div')
paging.render(
    {
        page: 1,
        pageSize: 10,
        dataTotal: 100,
        pageCount: 20
    },
    {
        link: "p=",
        themes: 'solid',
        text: {
            prev: '<',
            next: '>',
            dataTotal: {
                before: 'Total:',
                after: 'items.'
            },
            goto: {
                before : 'Go to',
                after: 'page.'
            }
        },
        goto: true
    },
    dom
)
node.appendChild(dom)

var title = document.createElement('h2')
title.innerHTML = '自定义查询条件'
node.appendChild(title)
    var title = document.createElement('h4')
    title.innerHTML = 'string'
    node.appendChild(title)
var dom = document.createElement('div')
paging.render(
    {
        page: 1,
        pageCount: 20
    },
    {
        link: "p=",
        query: 'demo=1'
    },
    dom
)
node.appendChild(dom)

var title = document.createElement('h4')
title.innerHTML = 'object'
node.appendChild(title)

var dom = document.createElement('div')
paging.render(
    {
        page: 1,
        pageCount: 20
    },
    {
        link: "p=",
        query: {
            demo: 2
        }
    },
    dom
)
node.appendChild(dom)

var title = document.createElement('h2')
title.innerHTML = 'onChange'
node.appendChild(title)
var dom = document.createElement('div')
paging.render(
    {
        page: 1,
        pageSize: 10,
        dataTotal: 100,
        pageCount: 20
    },
    {
        link: "p=",
        text: {
            prev: '<',
            next: '>'
        },
        goto: true,
        onChange: function (page, data) {
            location.href = data.$link + page
        }
    },
    dom
)
node.appendChild(dom)


var title = document.createElement('h2')
title.innerHTML = 'mini onChange'
node.appendChild(title)
var dom = document.createElement('div')
paging.render(
    {
        page: 1,
        pageSize: 10,
        dataTotal: 100,
        pageCount: 20
    },
    {
        mini: true,
        goto: false,
        onChange: function (page, data) {
            location.href = data.$link + page
        }
    },
    dom
)
node.appendChild(dom)

createData

获取渲染数据

渲染数据的作用请参考：Paging solution

var paging = require('paging')
var jsonFormat = require('json-format')
document.getElementById('dataNode').innerHTML = jsonFormat(
    paging.createData({
        page: 1,
        pageCount: 20
    })
)

template

渲染模板

paging.render() 的渲染模板,一般情况下不需要修改，但是要完全自定义样式时候，可参考此模板修改。 模板语法参考mustache

var paging = require('paging')
paging.render(
    {
        page: 1,
        pageCount: 20
    },
    {
        template: ''+
        '<a href="{{$link}}{{prevPage}}">上一页</a>' +
        '{{page}}/{{pageCount}}'+
        '<a href="{{$link}}{{nextPage}}">下一页</a>'
    },
    document.getElementById('tempalteRenderNode')
)

document.getElementById('templateNode').innerHTML = paging.template()