后台JS数据怎么传入table

已采纳
10 643
后台JS数据怎么传入table,跪谢
空闲广告位,联系:xianxin@layui.com
  • 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 回复
  • 猪头哥 猪头哥
    2017-02-05 15:45:13
    @luoye [微笑] 感谢感谢
    0 回复
最近热帖
完全基于 layui 开发的后台管理模板 2608
三层导航怎么做? 615
「源码市场」 正式版本上线 基于layui开发 546
2.0啥时候出啊,新项目要启动了 485
给2.0一些期待 416
麻烦朋友们投个票呗,FLY社区模板+thinkphp5驱动+个人DIY 367
layui整合datatable了么 301
ajax修改资料成功后 怎么进行初始化 页面刷新还是调用登录时的缓存 258
form.render('select') 更新渲染问题 229
select 动态操作不起作用,求助 195
近期热议
完全基于 layui 开发的后台管理模板 35
layui富文本编辑器图片上传无法回显 15
表单校验无效,找了好长时间找不到原因,求大神看下 14
select 动态操作不起作用,求助 10
ajax修改资料成功后 怎么进行初始化 页面刷新还是调用登录时的缓存 10
给2.0一些期待 9
如何给弹出层传参数? 8
文本编辑器出不来 8
laytpl不解析 8
content: 如果是调用本地的html,怎么写 7