分页(laypage)加模版引擎laytpl

提问 未结
1 416
张Sara
张Sara 2017-6-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-6-19
    分页没有效果,请大神指教
    0 回复