html表格可以包含多个tbody,使用Ajax呈现具有多个tbody元素的HTML表格

我想在使用Ajax数据有效载荷的html中呈现表格。 AJAX的数据结构如下: -使用Ajax呈现具有多个tbody元素的HTML表格

{"id":733,

"lastUpdatedBy":"4",

"lastUpdatedTime":"2013-11-24 03:00:03PM",

"jobName":"jobnameA",

"accountName":"accountname1A"

}

的HTML要呈现的表如下: -

Column1Column2Column3

Test Account 19 item iditem jobNameitem accountNameitem 121item 122item 123item 124item 131item 132item 133item 134 Section 2 item 211item 212item 213item 214item 221item 222item 223item 224item 231item 232item 233item 234

正在使用jQuery库。我的jquery是

$.each(data, function(key, val) {

$('

ID: '+key+''+val+'').appendTo('#main_table');

});

任何帮助表示赞赏。感谢您的期待。

2013-11-26

Vivek

+1

看起来你错过了HTML部分顶部的一些标记。你有任何JavaScript代码发布?你有什么尝试?你使用什么框架/库,如果有的话? –

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,这里提供一个示例的HTML页面代码,它可以使用Ajax请求访问Servlet,并将响应数据展示在dataTable表格tbody中。 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DataTable Example</title> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.css"/> <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#userTable').DataTable({ "ajax": "UserServlet", "columns": [ { "data": "id" }, { "data": "username" }, { "data": "password" }, { "data": "email" }, { "data": "gender" } ] }); }); </script> </head> <body> <table id="userTable" class="display" style="width:100%"> <thead> <tr> <th>ID</th> <th>Username</th> <th>Password</th> <th>Email</th> <th>Gender</th> </tr> </thead> <tbody></tbody> </table> </body> </html> ``` 在这个示例中,我们使用了jQuery和DataTables插件来实现Ajax请求和表格展示。在文档准备就绪时,我们通过DataTable初始化一个表格,并使用ajax属性指定Ajax请求的URL。响应数据将自动填充到表格tbody中。 需要注意的是,这个示例中我们假设Servlet返回的数据是一个包含多个用户信息的JSON数组,每个用户信息包含id、username、password、email和gender字段。在初始化DataTable时,我们使用columns属性指定每列数据对应的JSON字段。你需要根据自己的需求修改这个示例代码。 希望这个示例能够帮到你。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值