分页(laypage)加模版引擎laytpl

未结贴
1 106
数据格式
var dataForm={
"list":[{"name":"张嫌心","national":"汉族","Brithday":"1988-07-23","word":"于千万人之中遇见你所"},
{"name":"乔治","national":"华裔","Brithday":"1988-07-23","word":"呀拉锁那就是青藏高原"},
{"name":"德刚","national":"汉族","Brithday":"1888-08-12","word":"文能提笔安天下"},
{"name":"混凝土","national":"汉族","Brithday":"2007-08-12","word":"我能成为大桥的一部分"},
{"name":"立夏","national":"汉族","Brithday":"1992-08-12","word":"夏至未至"},
{"name":"坑货","national":"汉族","Brithday":"1333-08-12","word":"Json格式错了写个毛线"},
{"name":"mmbee","national":"汉族","Brithday":"00000-08-12","word":"哈哈哈哈哈"},
{"name":"分页啦","national":"分页啦","Brithday":"1333-08-12","word":"差点不知道"},
{"name":"分页真麻烦","national":"分页啦","Brithday":"1333-08-12","word":"造这么多数据"},
{"name":"以后是什么时候","national":"分页啦","Brithday":"1333-08-12","word":"what are you doing?"},
{"name":"微信我点赞了呀","national":"哈哈","Brithday":"1333-08-12","word":"才发现这些功能一点都不难"},
{"name":"朱亚文","national":"哈哈","Brithday":"1222-08-12","word":"拌合站修好了"},
{"name":"还要多写点","national":"就是麻烦","Brithday":"嗷嗷嗷啊","word":"拌合站修好了"},
{"name":"不能重复","national":"就是麻烦","Brithday":"嗷嗷嗷啊","word":"一样一样"}

]
}
localStorage.setItem('formJson',JSON.stringify(dataForm));

html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/css/layui.css" media="all">
<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
<link rel="stylesheet" href="../css/commen.css"/>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>默认表格</legend>
</fieldset>

<div class="layui-form">
<table class="layui-table">
<colgroup>
<col width="50">
<col width="150">
<col width="150">
<col width="200">
<col>
</colgroup>
<thead>
<tr>
<th><input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose"></th>
<th>人物</th>
<th>民族</th>
<th>出场时间</th>
<th>格言</th>
<th>操作</th>
</tr>
</thead>
<tbody id="view">
</tbody>
</table>
<ul id="pageDate"></ul>
</div>
</body>
<script src="../plugins/jquery-1.7.2.min.js"></script>
<script src="../css/lay/dest/layui.all.js" charset="utf-8"></script>
<script type="text/javascript" src="../plugins/layui/layui.js"></script>
<script src="../plugins/common/common.js"></script>
<script src="../js/laytpl.js"></script>
<script type="text/javascript" id="dataDemo">
{{# layui.each(d.list, function(index, item){ }}
<tr>
<td><input type="checkbox" name="" lay-skin="primary"></td>
<td>{{ item.name }}</td>
<td>{{ item.national }}</td>
<td>{{ item.Brithday }}</td>
<td>{{ item.word }}</td>
<td><div>
<button class="layui-btn layui-btn-warm layui-btn-small">增加</button>
<button class="layui-btn layui-btn-small">编辑</button>
<button class="layui-btn layui-btn-danger layui-btn-small">删除</button>
</div></td>
</tr>
{{# } ); }}
</script>


<script type="text/javascript">
layui.config({
base: 'js/'
});
var userJsonStr =localStorage.getItem('formJson');
var dataForm= JSON.parse(userJsonStr);

layui.use(['laytpl','laypage', 'layer'], function(){
var laytpl = layui.laytpl,
laypage = layui.laypage,
layer = layui.layer;



var num=5;
laypage({
cont: 'pageDate'
,pages: 2 //ajax 总页数
,groups: 3
,skip:true
,curr:1
,jump: function(obj, first){
var curr = obj.curr-1;//当前页传后台,这里只是做的静态demo
tor(curr);
}
});

function tor(curr){

var gettpl = document.getElementById('dataDemo').innerHTML;
laytpl(gettpl).render(dataForm.list[curr], function(html){
document.getElementById('view').innerHTML = html;
layui.use(['form'],function(){
var form = layui.form();
form.render(); //checkbox刷新样式
})
});
}







});
</script>
</html>

空闲广告位,联系:xianxin@layui.com
  • 张Sara 张Sara
    6天前
    分页没有效果,请大神指教
    0 回复
最近热帖
完全基于 layui 开发的后台管理模板 2726
三层导航怎么做? 637
「源码市场」 正式版本上线 基于layui开发 571
2.0啥时候出啊,新项目要启动了 516
给2.0一些期待 448
麻烦朋友们投个票呗,FLY社区模板+thinkphp5驱动+个人DIY 373
layui整合datatable了么 314
ajax修改资料成功后 怎么进行初始化 页面刷新还是调用登录时的缓存 273
form.render('select') 更新渲染问题 240
select 动态操作不起作用,求助 202
近期热议
完全基于 layui 开发的后台管理模板 35
layui富文本编辑器图片上传无法回显 15
表单校验无效,找了好长时间找不到原因,求大神看下 14
这个社区的完整源码能不能共享 13
ajax修改资料成功后 怎么进行初始化 页面刷新还是调用登录时的缓存 10
select 动态操作不起作用,求助 10
给2.0一些期待 9
laytpl不解析 8
如何给弹出层传参数? 8
文本编辑器出不来 8