bootstrap3--table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 自适配手机屏幕 initial-scale=1 支持缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>表格</title>
<!-- 引入 css -->
<link rel="stylesheet" type="text/css" href="/static/bootstrap3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/static/bootstrap-table/dist/bootstrap-table.min.css">
<!-- 引入 js jquery必须先引入 -->
<script type="text/javascript" src="/static/jquery-3.2.1/jquery-3.2.1.js"></script>
<script type="text/javascript" src="/static/bootstrap3.4/js/bootstrap.min.js"></script>
<!-- 引入 bootstrap-table 2个 js -->
<script type="text/javascript" src="/static/bootstrap-table/dist/bootstrap-table.min.js"></script>
<script type="text/javascript" src="/static/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<div class="container">
<div id="toolbar" class="btn-group">
<button id=btn_add class="btn btn-default">
<span class="glyphicon glyphicon-play"></span>新增
</button>
</div>
<table id="table" class="table table-striped"></table>
</div>
</body>
<script>
//需要加载的数据
{#data = {#}
{# "total": 3,#}
{# "rows": [#}
{# {"id": 0, "name": "阿大", "tel": "15002222111"},#}
{# {"id": 1, "name": "阿二", "tel": "15002222111"},#}
{# {"id": 2, "name": "阿三", "tel": "15002222333"},#}
{# ]#}
// 定义显示的列
columns = [
{
checkbox: true,
visible: true
},
{
field: 'id',
title: 'ID'
},
{
field: 'name',
title: '姓名'
},
{
field: 'tel',
title: '手机号'
},
{
title: "操作按钮",
formatter: function () {
return '<div>' +
'<button class=\"btn btn-default\">删除</button>' +
'<button class="btn btn-default">修改</button> ' +
'<div>'
}
},
];
// 表格加载
$('#table').bootstrapTable({
toolbar: '#toolbar',
url: '/api/table/',
method: 'get',
pagination: true,
// 是否分页
columns: columns
})
</script>
</html>
在url上
path('/api/table/', views.table_data),
写视图函数
def table_data():
data = {
"total": 3,
"rows": [
{"id": 0, "name": "张三", "tel": "15002222111"},
{"id": 0, "name": "张三", "tel": "15002222111"},
{"id": 0, "name": "张三", "tel": "15002222111"},
]
}
return JsonResponse(data)
table 标签可以加的class属性
.table 自动生成自适配表格
.table-striped 增加斑马条纹样式
.table-bordered 为表格和其中的每个单元格增加边框
.table-hover 鼠标移过会有悬停效果
.table-condensed 表格紧凑
