Question

从我可以告诉的问题继承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？）< / p>

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

关于我错过的任何想法？

Answer 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'>

重新排序文件加载序列后，它就可以了。

Django模板使用Bootstrap-Table与Pandas DF

1 个答案: