后台JS数据怎么传入table

已采纳
10 427
后台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 回复
  • 猪头哥 猪头哥
    2017-02-05 15:45:13
    @luoye [微笑] 感谢感谢
    0 回复
最近热帖
vip-admin Html v1.6.0 更新了 - 基于layui的后台模板 1261
layui省市区三级联动数据库版 1222
基于thinkphp3.2.3+layui的超简洁企业网站后台管理模版 451
基于LayUI封装的一个简单表格.(好久没发贴了,发一下福利),用得上就拿去吧~~~ 396
layui渲染select或checkbox问题 319
重新修改了Fly社区模版,取消响应式,PC和移动独立分开 256
不依赖服务端渲染模板,前端实现模板渲染加载问题的一些思考。 255
贤心大大,我想改网址 252
百思不得其解的一个问题! 232
请问为什么layer中弹出层内容点击事件不起作用?? 231
近期热议
vip-admin Html v1.6.0 更新了 - 基于layui的后台模板 15
基于thinkphp3.2.3+layui的超简洁企业网站后台管理模版 13
百思不得其解的一个问题! 12
layui的use加载问题 11
范围的日历,怎么让第一个日历选中时间后,第二个立刻自动弹出 10
请问为什么layer中弹出层内容点击事件不起作用?? 10
jquery的layer弹出层框架,如果设置 iframe弹出一个页面里是表单提交,提交完怎么关闭 10
为什么select我不加selected他默认选中呀? 9
请问如何监听右上角的关闭事件 9
弹出层宽度高度自适应 7