Laytpl + Laypage结合动态渲染数据并分页

演示
姓名 年龄 创建时间 操作
Layui Beginner 2016-11-16 11:50 预览 编辑 删除 
						//示例代码
						layui.config({
    base: 'js/'
}).use(['paging', 'code'], function() {
    layui.code();
    var $ = layui.jquery,
        paging = layui.paging();
    paging.init({
        url: 'datas/laytpl_laypage_data.json', //地址
        elem: '#con', //内容容器
        params: { //发送到服务端的参数
            t: Math.random(),
            action: 'GetXxx'
        },
        tempElem: '#conTemp', //模块容器
        pageConfig: { //分页参数配置
            elem: '#paged', //分页容器
            pageSize: 3 //分页大小
        },
        success: function() { //渲染成功的回调
            //alert('渲染成功');
        },
        fail: function(msg) { //获取数据失败的回调
            //alert('获取数据失败')
        },
        complate: function() { //完成的回调
            //alert('处理完成');
        },
    });
});
//ps:服务端是永远可以获取到pageIndex  和 pageSize 这两个参数的
参数
属性名称 类型 默认值 描述
url string undefined

远程URL
type string POST

请求的方式，可选参数：GET、POST
elem string undefined

内容容器. 1/id选择器 : #id 2/类选择器：.class
params object null

请求附带的参数
tempElem string undefined

模板容器. 1/id选择器 : #id 2/类选择器：.class
tempElem string undefined

模板容器. 1/id选择器 : #id 2/类选择器：.class
tempType number 0

模版的获取方式：0为提供选择器给组件获取，1为直接提供模板字符串v1.0.2+
pageConfig object

参数说明

注意：参数 paged 为 true 时才生效

elem：分页容器. 1/id选择器 : #id 2/类选择器：.class

pageSize：分页大小. 默认为15

其他，与laypage组件一至，请参考： http://www.layui.com/doc/modules/laypage.html

success function undefined

渲染成功后的回调方法
fail function undefined

获取数据失败后的回调方法

fail:function(msg){}
complate function undefined

渲染完成后的回调方法（无论渲染成功与否，此回调都会执行）
serverError function undefined

服务器发生错误时的回调方法

serverError:function(xhr,status,error){}
renderBefore function undefined

数据渲染之前发生 v0.2.0+

serverError:renderBefore(html, function (formatHtml) {});
方法
名称 参数说明 描述
get

参数名：options

类型：object

要发送到服务端的参数

示例

										//调用get方法获取数据
										paging.get({
										    name: '张三', //获取输入的关键字。
										    date:'2016-11-11'
										});

数据结构

请严格按照以下数据结构设置数据

						{
    "rel": true,
    "msg": "获取成功",
    "list": [
        {
            "name": "张三",
            "age":21,
            "createtime": "2017-01-10 10:42:36"
        },
        {
            "name": "李四",
            "age":31,
            "createtime": "2017-01-10 10:42:36"
        },{
            "name": "王五",
            "age":23,
            "createtime": "2017-01-10 10:42:36"
        },{
            "name": "赵六",
            "age":18,
            "createtime": "2017-01-10 10:42:36"
        }
    ],
    "count": 57
}