后台JS数据怎么传入table

提问 已结
10 1396
石头人
石头人 2017-1-5
悬赏:5飞吻
后台JS数据怎么传入table,跪谢
回帖
  • luoye
    2017-1-11
    layui.use([,'jquery','element','laypage','laytpl'], function(){
    var element = layui.element()
    ,laypage=layui.laypage
    ,laytpl = layui.laytpl
    ,$=layui.jquery;
    //分页及模板代码放这里
    });
    0 回复
  • luoye
    2017-1-6
    后台传json数据,进行解析
    1 回复
  • luoye
    2017-1-7
    <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
    2017-1-8
    此例中 后台返回的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-1-6
    @luoye 大腿,能给事例子吗,感谢[亲亲]
    0 回复
  • 石头人
    2017-1-8
    @luoye layui.each(d.articlelist, function(index, item) 这个方法里d.articlelist参数是从哪里传过来的呀,能说明下吗,谢谢,本人是菜鸟上路,希望大神提点下,有劳了[害羞]
    0 回复
  • luoye
    2017-1-8
    关于模板的应用,可以访问 http://laytpl.layui.com/
    0 回复
  • ajian
    2017-1-9
    模板能够实现分页吗?如何实现
    0 回复
  • 石头人
    2017-1-10
    @luoye 不好意思,根据你的方法,我这边有报错,我的项目框架是MVC4,跪求大神提点,谢谢
    1.html部分


    2.js部分


    3.后台控制器


    感谢,感谢[给力] [给力] [给力]
    0 回复
  • 石头人
    2017-2-5
    @luoye [微笑] 感谢感谢
    0 回复