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

前言

如果你使用html" class="superseo">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>
                <th data-field="account" data-footer-formatter="priceFormatter">消费金额</th>
                <th data-field="payment">支付方式</th>
                <th data-field="lave_money">账户余额</th>
                <th data-field="photo_method">拍摄模式</th>
                <th data-field="photo_pgm">拍摄内容</th>
                <th data-field="remark">备注</th>
                <th data-field="date_sale">拍摄时间</th>
            </tr>
            </thead>
        </table>

稍微备注一下几个主要的参数：

二、如何通过ajax把后台数据显示到前端网页中？

1、前端页面的JS内容

               

$.ajax({
   url: "/order/listDateTask/", //后台接收数据的地址
   type: "post", //数据请求方式
   data: {
   phone: $("#search_order").val() //需要提交到后台的数据
                       },
   dataType: "JSON",
   success: function (res) {
       if (res.status) {
         var data = res.data; //定义一下数据
         $('#order_table').bootstrapTable('destroy');   //动态加载表格之前，先销毁表格
         $('#order_table').bootstrapTable({ //表格初始化'#order_table'要和html页面的ID一致
         data: data, //通过ajax返回的数据
         width: 0, //设置0 就不显示滚动条
         height: 0, //设置0 就不显示滚动条
         method: 'get', 
         pageSize: 10, //每页显示的数据条数
         pageNumber: 1,
         pageList: [],
         cache: false,
         striped: false, 是否显示行间隔色
         pagination: true, // 是否分页
         sidePagination: 'client',
         search: false,
         showRefresh: false,
         showExport: false,
         showFooter: true,
         footerStyle: 'footerStyle',
         sortName: 'date_sale', //排序的列名称(和数据库字段名一致)
         sortOrder: 'desc',
         // exportTypes: ['csv', 'txt', 'xml'],
         clickToSelect: true,   
      });
         {#显示轻量d窗#}
         $('.toast').toast('show')
       } else {
         $('.toast').toast('show')
         $("#error_tip").text(res.error)
      })
     }
    }
  }
)

2、后台代码：

from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt

@csrf_exempt
def order_listDate_task(request):
	//获取前端传过来的手机号码
    phone = request.POST.get('phone', "")
    if request.method == "POST":
    	//获取数据库内的数据
        info = models.SalesListDetail.objects.filter(phone=phone).values()
        if not info:
            return JsonResponse({"status": False, 'error': "没有找到相关数据，请确认后再试~！"})
        result = {
                "status": True,
                "data": list(info)
        }
        return JsonResponse(result)

到这里，前端已经可以显示表格内容了。

如果需要显示如上图的页脚部分的内容，请看下面的 *** 作

三、如何把某些需要计算总量的字段显示到页脚上？

把下面的代码也插入到JS里面就可以了。

       {#页脚第一列添加名称#}
        function idFormatter() {
            return '合计'
        }
        {#计算总的金额 注意priceFormatter，要和前面html中的表头列参数一致#}
        function priceFormatter(data) {
        //内部代码不用修改，直接拷贝过去用就可以了
            var field = this.field
            return data.map(function (row) {
                return +row[field].substring(0)
            }).reduce(function (sum, i) {
                return sum + i
            }, 0) + '元'
        }

        {#改变页脚的颜色和样式#}
        function footerStyle(column) {
            return {
                id: {
                    classes: 'uppercase'
                },
                //注意account是你要显示的那一列的对应的数据库字段名
                account: {
                    css: {color: '#dc3545'}
                }
            }[column.field]
        }

---

总结

以上就是今天要讲的内容，本文仅仅简单介绍了bootstrap table的基本使用，而官网还会提供大量能使我们快速便捷地处理数据的函数和方法。