使用 bootstrap-table-develop 插件j遍历接口数据到table
-
下载bootstrap-table-develop插件
http://download.csdn.net/download/Jie_1997/12054552 -
下载完成后解压缩
-
将bootstrap-table-develop复制到项目中
-
使用插件
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>ItemNewspaper</title>
<script src="~/Scripts/jquery-3.3.1.js"></script>
@*引入bootstrap-table-develop中的所需文件*@
<script src="~/bootstrap-table-develop/dist/bootstrap-table.js"></script>
<link href="~/bootstrap-table-develop/dist/bootstrap-table.css" rel="stylesheet" />
<script src="~/bootstrap-table-develop/dist/locale/bootstrap-table-zh-CN.js"></script>
</head>
<body>
<div>
<table id="table" style="background-color: azure;"></table>
</div>
<script>
window.onload = function () {
$('#table').bootstrapTable('destroy');
$('#table').bootstrapTable({
url: '', //请求后台的URL(*)
pagination: true, //是否显示分页(*)
sortable: true, //是否启用排序
sortOrder: "asc", //排序方式
pageNumber: 1, //初始化加载第一页,默认第一页,并记录
strictSearch: true,
queryParams: { //接口参数
},
/**
* columns:接受后台接口信息,放入table表中
* field:接口中接收的字段名
* title:table表的列名
* */
columns: [[
{ field: "id", title: "编号" },
{ field: "name", title: "名称" },
{ field: "sex", title: "性别" },
{ field: "address", title: "地址" },
{ field: "phone", title: "电话" }
]],
})
}
</script>
</body>
</html>