Bootstrap Table使用教程及页脚合计、总量、求和处理

前言

如果你使用Bootstrap创建网站，那么Bootstrap Table也是你将要使用的表格之一，这个表格使用起来非常简单，而且官网也有很详细的说明。

在这里，我分享一下这个表格的基本使用教程，能满足一般工作的需要。

• 如何把Bootstrap Table引入到你的网页中？
• 如何通过ajax把后台数据显示到前端网页中？
• 如何把某些需要计算总量的字段显示到页脚上？

---

一、如何把Bootstrap Table引入到你的网页中

1、下载table插件：
推荐官网下载：https://bootstrap-table.com/docs/getting-started/download/
2、把下载的插件拷贝到你项目的插件目录中：
下载下来后，会是一个完整的文件包，我们只需要部分内容即可，文件在dist目录

3、引入相关的CSS样式文件和JS文件，一共3个文件

01：CSS样式文件
<link rel="stylesheet" href="{% static 'plugins/bootstrap-table/bootstrap-table.css' %}">
02：JS文件
<script src="{% static '/plugins/bootstrap-table/bootstrap-table.js' %}"></script>
03：JS中文显示
<script src="{% static '/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.js' %}"></script>

4、HTML页面引入表头
网上很多教程是把表头写在了JS里面，这里建议把表头卸载HTML里面，便于后期控制

        <table class="table  table-bordered " id="order_table" data-show-footer="true"
               data-footer-style="footerStyle">
            <thead style="background-color: #e9ecef"> //定义表头的背景色
            <tr>
                <th data-field="oid" data-footer-formatter="idFormatter">订单号</th>
                <th data-field="name">姓名</th>
                <th data-field="phone">手机号码</th