分页(laypage)加模版引擎laytpl

未结贴
1 243
张Sara
张Sara 2017-06-19
悬赏:5飞吻
数据格式
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>

  • 张Sara
    2017-06-19
    分页没有效果,请大神指教
    0 回复
近期热议
layui 官网累计下载量突破 200000 69
(已结束)LayIM 3.x 标准版盛情巨惠,以最低门槛 加入 LayIM 会员群 56
很好奇社区里使用layui的程序员里面是前端的多还是后端的多 25
字体图标是不是有点少了 16
php多久能学会 15
建议LayUI永久免费,不要发布收费版本 14
有购买LayIm 整套的朋友吗?进来解答解答 14
按照社区的模版用了一周时间,仿照了个系统,献丑了,晒晒哈 14
关于动态TABLE 12
贤心你好,请教几个技术问题? 11
layui

微信扫码关注 layui 公众号