后台JS数据怎么传入table

已采纳
10 317
后台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.5.0 更新了 - 基于layui的后台模板 1309
meTools - 基于layui+vue的在线工具网站 916
基于layui的后台模板 - 反正我觉得我的界面是最漂亮的 800
你的案例或技术分享,将会被置顶推荐 758
一个为您省时省力的后台模板jqadmin 710
LayuiHelp,一个良心插件,为你的代码插上翅膀! 678
LayUI SELECT 多级级联实现,理论上是无限级的 565
Admin-Template 后台模板(开发中...) 465
基于TP5加Layui的轻社区系统,争取下个月上线 268
laypage分页模块扩展之pagesize.js(layui2.0不知道会不会有这个功能) 197
近期热议
基于layui的后台模板 - 反正我觉得我的界面是最漂亮的 20
一个为您省时省力的后台模板jqadmin 18
LayuiHelp,一个良心插件,为你的代码插上翅膀! 17
layer的使用,以前用的时候还没挺好的怎么现在layer的弹出框一直报错,求大神给指点一下 15
form表单提交,监听提交按钮,用ajax异步检测名称是否已存在,ajax 不执行! 14
vip-admin Html v1.5.0 更新了 - 基于layui的后台模板 14
layui点击左侧固定导航栏时,如何在右侧显示,而并不是打开新窗口呢 12
遮罩通过parent 可以全屏,但窗口不能传值了? 12
为什么layui分页只有一页的情况下不无法显示组件呢? 11
select联动初始化数据form.render();不能逐个渲染的问题。 11