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  表格紧凑

 

posted @ 2022-04-18 15:16  空谷近心  阅读(376)  评论(0)    收藏  举报