Django模板使用带pandas df的引导表

继承自 this 从我所知道的来看,对于一个可行的代码解决方案来说,没有完成的问题。

我想得到一个非常简单的 wenzhixin/bootstrap-table 去工作。我可以打印 columns 和 data 对象到控制台-所以它们可以工作。以下是代码段:

#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>

视图中还有其他使用bootstrap的元素——其他的都可以——只是最后一行 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 Post中,答案是市场认可的,但是下面的注释表明它需要对JS文件进行一些额外的修改-我已经尝试了这两种方法。

我错过了什么有什么想法吗?