使用带有 Pandas DF 的 Bootstrap-Table 的 Django 模板答案

【问题标题】：Django template using Bootstrap-Table with Pandas DF使用带有 Pandas DF 的 Bootstrap-Table 的 Django 模板
【发布时间】：2018-11-26 08:20:16
【问题描述】：

从this 未完成的问题继承到据我所知的可行的代码解决方案。

我正在尝试让一个非常简单的wenzhixin/bootstrap-table 工作。我可以将columns 和data 对象打印到控制台- 这样它们就可以工作了。这是sn-ps的代码：

#variables
qs = a django queryset
df = a pandas dataframe

#views.py
class MyView(generic.ListView):

    # some stuff to get qs = queryset

    df = read_frame(qs)
    json = df.to_json()
    columns = [{'field':f, 'title': f} for f in MyModel._meta.fields]

    context = {
        'columns': columns,
        'data': json,}

    return context

#MyView.html
<script src='/path/to/bootstrap-table.js'>
<script src='/path/to/pandas_bootstrap_table.js'>
<script src='/path/to/bootstrap-table.css'>
<script src='/path/to/pandas_bootstrap_table.js'>
<script src='/path/to/bootstrap.min.cs
<script src='/path/to/jquery-3.3.1.slim.min.js
<script src='/path/to/popper.min.js
<script src='/path/to/bootstrap.min.js
<script src='/path/to/jquery.min.js

<table id='datatable'></table>

使用引导程序的视图中还有其他元素 - 其他一切正常 - 只是最后一行有 table 和 id='datatable' 没有呈现。

pandas_bootstrap_table.js 是我花费最多时间尝试调用函数的地方。我相信这就是问题所在。

#pandas_bootstrap_table.js
$(function() {
    $('#datatable').bootstrapTable({
      striped: true,
      pagination: true,
      showColumns: true,
      showToggle: true,
      showExport: true,
      sortable: true,
      paginationVAlign: 'both',
      pageSize: 25,
      pageList: [10, 25, 50, 100, 'ALL'],
      columns: {{ columns|safe }},
      data: {{ data|safe }},
    });
  });

我正在使用 VSCode 进行编辑，它在 js 文件中的 django 模板标签引用上抛出错误 - 但它要么没有命中 js 文件，要么没有真正的错误（linting？）

在上面引用的 SO 帖子中，答案是市场接受的，但下面的 cmets 表明它需要对 js 文件进行一些额外的修改 - 我都试过了。

关于我错过了什么的任何想法？

【问题讨论】：

标签： javascript python django python-3.x pandas

【解决方案1】：

在将所有内容简化为最低限度的代码后 - 很明显，问题在于 js 和 css 文件的加载顺序。顺序需要先全局文件，后本地文件。

#global type
<script src='/path/to/bootstrap.min.cs
<script src='/path/to/jquery-3.3.1.slim.min.js
<script src='/path/to/popper.min.js
<script src='/path/to/bootstrap.min.js
<script src='/path/to/jquery.min.js

#local type
<script src='/path/to/bootstrap-table.js'>
<script src='/path/to/bootstrap-table.css'>

#table specific
<script src='/path/to/pandas_bootstrap_table.js'>

重新排序文件加载顺序后它起作用了。

【讨论】：