<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)
})
})
}
即是在html的body标签内部写一个div标签表明表格要添加到此div的内部。碧键如下
<div id="tdl"><div>
2、在javascript中写添加表格的语句
若在当前html文件中,则写在<script>标签内部,如郑锋
<script type="text/javascript" >document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>" //此处添加的表格可根据自己需要创建喊慧晌
</script>
在使用Jquery+Ajax 往返大Table 中Td 添加入数据的方法如下:
在数据少的情况下直接给id或class传值,多行数据要用循环,代码如下:
$.post("", "data:getType", function (res) {
var date = Pase(res)
var str = ""
$.each(data.result, function (i, j) {
str += "<tr>"
str += "<td></td>"
str += "</tr>"
})
document.getElementById("tbody").add(str)
})
<table><tbody id="tbody">孝含</tbody></table>
jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等巧世笑。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接 *** 作该函数,除非你需要 *** 作不常用的选项,以获得更多的灵活性。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)