BootstrapTable简单的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Demo</title>
<link rel="stylesheet" href="static/css/bootstrap.min.css">
<link rel="stylesheet" href="static/css/bootstrap-table.min.css">
<script src="static/js/jquery-3.5.1.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/bootstrap-table.min.js"></script>
<script src="static/js/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<table id="mytab" class="table "></table>
<script>
$('#mytab').bootstrapTable({
url: 'data1.json',
dataType:"json",//服务器返回的数据类型
striped:true,//显示行间间隔颜色
cache:true,//是否使用缓存//
queryParams: "queryParams",//参数
toolbar: "#toolbar",
sidePagination: "true",
striped: true, // 是否显示行间隔色
search : "true",//是否显示搜索框
uniqueId: "ID",
pageSize: "7",//分页大小
pagination: "true", // 是否分页
sortable: "true", // 是否启用排序
columns: [{
field: 'id',//该列映射的data的参数名
title: '登录名'
},
{
field: 'name',
title: '昵称',
align: "center",//水平对齐方式，
valign: "middle" //垂直对齐方式
},
{
field: 'price',
title: '角色'
},
{
field: 'price',
title: '操作',
width: 120,
align: 'center',
valign: 'middle',
formatter: actionFormatter,
},
]
});
//操作栏的格式化
function actionFormatter(value, row, index) {
var id = value;
var result = "<button class="btn btn-warning">查看</button>";
return result;
}
</script>
</body>
</html>
在这里插入代码片
1173
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
