Django template using Bootstrap-Table with Pandas DF

Question

Inheriting from this question which wasn't completed to a workable code solution from what I can tell.

I'm trying to get a very simple wenzhixin/bootstrap-table to work. I can print the columns and data objects to the console - so they work. Here are the code snippets:

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

There are other elements in the view using bootstrap - everything else works - just the last line where it has a table with id='datatable' isn't rendering.

The pandas_bootstrap_table.js is where I've spent my most time trying to get the function to call. I believe this is where the problem is.

#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 }},
    });
  });

I'm using VSCode for the editing and it is throwing errors on the django template tag references within the js file - but it either isn't hitting the js file or there isn't really an error (linting?)

In the above referenced SO post the answer is market accepted, but the comments below indicate that it required some additional modifications to the js file - I've tried both.

Any ideas on what I've missed?

Bill Armstrong · Accepted Answer · 2018-06-17 06:03:11Z

1

After stripping everything down to a bare minimum code - it was clear that the issue is the load order of js and css files. The order needs to be global files first, local files second.

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

After reordering the file load sequence it worked.

answered Jun 17, 2018 at 6:03

Bill Armstrong

1,7874 gold badges25 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Django template using Bootstrap-Table with Pandas DF

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related