后台JS数据怎么传入table

已采纳
10 240
后台JS数据怎么传入table,跪谢
  • luoye luoye
    2017-01-11 11:04:03
    layui.use([,'jquery','element','laypage','laytpl'], function(){
    var element = layui.element()
    ,laypage=layui.laypage
    ,laytpl = layui.laytpl
    ,$=layui.jquery;
    //分页及模板代码放这里
    });
    0 回复
  • luoye luoye
    2017-01-06 10:00:33
    后台传json数据,进行解析
    1 回复
  • luoye luoye
    2017-01-07 10:10:56
    <table class="layui-table">
    <caption>文章列表</caption>
    <thead>
    <tr>
    <th>
    <input type="checkbox" id="checkAll">
    </th>
    <th>ID</th>
    <th>标题</th>
    <th>录入者</th>
    <th data-OrderBy="UpdateTime">录入时间</th>
    <th style="text-align:center;">操作</td>
    </tr>
    </thead>
    <tbody id="view"></tbody>
    </table>
    <div id="pagebox"></div>
    <script id="demo" type="text/html">
    {{# layui.each(d.articlelist, function(index, item){ }}
    <tr data-channelid="{{ item.ChannelID }}">
    <td>
    <input type="checkbox" name="checkchild" class="checkchild" value="{{ item.ID }}">
    </td>
    <td>{{ item.ID }}</td>
    <td>
    {{ item.Title }}
    </td>
    <td>{{ item.Inputer }}</td>
    <td>{{ item.UpdateTime }}</td>
    <td class="doAction">
    <button class="layui-btn layui-btn-mini layui-btn-normal" data-id="edit"><i class="layui-icon"></i> 修改</button>
    </td>
    </tr>
    {{# }); }}

    {{# if(!d.articlelist || d.articlelist.length == 0){ }}
    <tr class="noArticle"><td colspan="6">{{ d.msg||"没找到相关记录" }}</td></tr>
    {{# } }}
    </script>
    下面是js代码
    		function demo(curr){
    $.getJSON('data.json', {"page":curr||1},function(data){
    //显示分页
    laypage({
    cont: 'pagebox' //容器。值支持id名、原生dom对象,jquery对象。【如该容器为】:<div id="page1"></div>
    ,pages: data.pages //通过后台拿到的总页数
    ,curr: curr || 1 //当前页
    ,jump: function(obj, first){ //触发分页后的回调
    if(!first){ //点击跳页触发函数自身,并传递当前页:obj.curr
    demo(obj.curr);
    }
    }
    });
    var getTpl = $("#demo").html();
    laytpl(getTpl).render(data, function(html){
    $("#view").html(html);
    });
    });
    }
    1 回复
  • luoye luoye
    2017-01-08 19:12:11
    此例中 后台返回的json为
    {
    "success":true,
    "pages":3,
    "articlelist":[{
    "ID":101,
    "ChannelID":3,
    "Title":"文章11111",
    "Inputer":"张三",
    "UpdateTime":"2016-9-2 18:21:30"
    },{
    "ID":102,
    "ChannelID":5,
    "Title":"文章2222",
    "Inputer":"李四",
    "UpdateTime":"2016-9-3 6:21:30"
    }]
    }
    1 回复
  • 猪头哥 猪头哥
    2017-01-06 16:38:04
    @luoye 大腿,能给事例子吗,感谢[亲亲]
    0 回复
  • 猪头哥 猪头哥
    2017-01-08 10:18:39
    @luoye layui.each(d.articlelist, function(index, item) 这个方法里d.articlelist参数是从哪里传过来的呀,能说明下吗,谢谢,本人是菜鸟上路,希望大神提点下,有劳了[害羞]
    0 回复
  • luoye luoye
    2017-01-08 19:15:02
    关于模板的应用,可以访问 http://laytpl.layui.com/
    0 回复
  • ajian ajian
    2017-01-09 11:40:05
    模板能够实现分页吗?如何实现
    0 回复
  • 猪头哥 猪头哥
    2017-01-10 11:34:25
    @luoye 不好意思,根据你的方法,我这边有报错,我的项目框架是MVC4,跪求大神提点,谢谢
    1.html部分


    2.js部分


    3.后台控制器


    感谢,感谢[给力] [给力] [给力]
    0 回复
  • 猪头哥 猪头哥
    19天前
    @luoye [微笑] 感谢感谢
    0 回复
最近热帖
layui 1.0.8 发布,一次用心的小版本升级 4877
LayIM 发布 3.0.3,增加音频消息支持及移动端联系人界面 1295
thinkphp5.0+layui个人博客源码分享,也可以做cms 1118
基于LayUI的后台管理模板BeginnerAdmin更新啦~~~~~~~~~~~~~~ 439
Layer真心好用,有了它,我作为一个phper终于有信心抛开二次开发 278
layui不好用啊,好复杂啊 255
layui 三级联动 245
有偿求助作者大大,我有一个opencart商城网站,想集成layui的问答系统 233
不得不承认,非常棒的一个富文本编辑器 189
ThinkPHP基于Layui无刷提交数据表单,亲测可用 181
layim下载
近期热议
layui 1.0.8 发布,一次用心的小版本升级 54
LayIM 发布 3.0.3,增加音频消息支持及移动端联系人界面 21
layui不好用啊,好复杂啊 13
通过ajax动态生成的新checkbox添加到table里面样式不存在了,怎么才能重新渲染? 13
基于LayUI的后台管理模板BeginnerAdmin更新啦~~~~~~~~~~~~~~ 12
layui的进度条总是无法显示 10
layer.confirm弹出之后的keydown事件 10
关于富文本框的内容清空问题 10
thinkphp5.0+layui个人博客源码分享,也可以做cms 9
请问layui的tab切换,防止页面刷新效果重置是怎么实现的? 8