在上一篇的表格数据流操作实践中，我们已经了解了在web后台是如何操作数据表格的，一个网站肯定还要有前端页面，接下来这篇就是前端的事情了，本篇结合常用的Bootstrap table插件，向大家展示如何将表格数据展示到页面上。

依赖

依赖项有Bootstrap3及其table插件的css和js文件，和jquery文件，具体导入的文件如下，基本都是现行对应的最新版本，大家可以搜索官网或者github仓库进行下载，table插件还增加了 中文语言包。

<link rel="stylesheet" href="/static/bootstrap-table/bootstrap-table.css">  
<link rel="stylesheet" href="/static/bootstrap-3.4.1-dist/css/bootstrap.min.css">  
<script src="/static/jquery/jquery-3.6.3.min.js"></script>  
<script src="/static/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>  
<script src="/static/bootstrap-table/bootstrap-table.js"></script>  
<script src="/static/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>

 

基本用法

页面模板文件

在django中将html文件称为模板文件，页面中一般只需要加上一个table标签和一个js导入即可。

<table id="my_table"></table>  
<script src="/static/main.js"></script>

后台

后台定义两个视图函数，一个用于渲染页面。

def page(request):
return render(request, 'main.html', locals())

另一个用于返回数据，返回的是json格式的数据，这种数据是bootstrap-table插件能够理解的。

def show(request):  
    data = [{  
        'a1': 123,  
        'a2': 1234  
    }]  
  
    return JsonResponse(data=data, safe=False, json_dumps_params={'ensure_ascii': False})

js文件定义表格样式

主要使用方式是jquery取得表格元素后绘制表。

$ ('#my_table').bootstrapTable({  
    method: 'get',  
    url: '/main/show',  
    columns: [{  
        field: 'a1',  
        title: 'A1'  
    }, {  
        field: 'a2',  
        title: 'A2'  
    }],

    其他选项省略。。。。

method和url的 组合可以理解为用一种方法访问这个链接的数据，一般是get或者post。

columns中的是表格的头标签，field是数据的名称，title是显示在 页面上的名称，还可以定义对其方式，自定义显示效果等，这里不做 展示。

还有些其他配置选项，可以设置一些显示效果什么的，一般填写的数量还是不少的，网上已经有很多资料了，这里的门道也比较多，不再赘述。

 

显示效果

---

将excel表格数据显示出来

还是上篇的表，先将表格的表头提取出来，放入js文件中，替换原先的A1，A2。

 

再在show的视图函数里将数据读出来，组装起来。

边观察上图边讲解。组装的时候，先在12行定义了一个表头，和js文件中的columns是对应的；再利用上一篇的知识，读取文件，转换成openpyxl可以读取的类型。接着就是循环表里的行，在21-26行，去除第一行表格数据，对其他数据用zip函数与表头进行字典组装。

达成的基本效果如下：