请构建html前端页面代码,要求如下:1.使用bootstraptable制作表格 2.页面中有从后端返回的ModelMap为List数据,将数据展示在表格中
时间: 2024-03-21 18:38:21 浏览: 68
php 接口与前端数据交互实现示例代码
3星 · 编辑精心推荐
好的,下面是一个使用BootstrapTable制作表格的HTML页面代码,可以将后端返回的ModelMap转换为JSON数据,并将数据展示在表格中:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap Table Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.15.4/bootstrap-table.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.15.4/bootstrap-table.min.css">
</head>
<body>
<div class="container">
<h2>Bootstrap Table Example</h2>
<table id="table" data-toggle="table" data-pagination="true" data-search="true">
<thead>
<tr>
<th data-sortable="true">Name</th>
<th data-sortable="true">Age</th>
<th data-sortable="true">Email</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script>
$(function () {
$.ajax({
url: "/your-backend-url",
success: function (data) {
var jsonData = JSON.parse(data); // 将ModelMap转换为JSON数据
var tbodyHtml = "";
for (var i = 0; i < jsonData.length; i++) {
var item = jsonData[i];
tbodyHtml += "<tr>" +
"<td>" + item.name + "</td>" +
"<td>" + item.age + "</td>" +
"<td>" + item.email + "</td>" +
"</tr>";
}
$("#table tbody").html(tbodyHtml); // 将数据展示在表格中
}
});
});
</script>
</body>
</html>
```
在这个HTML页面中,我们使用了BootstrapTable插件来制作表格,并且使用了jQuery来进行AJAX请求,将后端返回的ModelMap转换为JSON数据,并将数据展示在表格中。请注意,你需要将`/your-backend-url`替换为你自己的后端API接口地址。
阅读全文