helloflask / bootstrap-flask

Bootstrap 4 & 5 helper for your Flask projects.

Home Page:https://bootstrap-flask.readthedocs.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

adding datatables functionality

WolfgangFahl opened this issue · comments

For datatables to work as requested in WolfgangFahl/pyFlaskBootstrap4#12
and describe in https://datatables.net/examples/basic_init/zero_configuration.html I tried the template below. It doesn't seem to work see
http://fb4demo.bitplan.com/datatable
grafik

What is needed to get this working?

{% extends 'base.html' %}
{% from 'bootstrap/table.html' import render_table %}
{% block content %}
{{ render_table(listOfDicts) }}
{% endblock %}
{% block scripts %}
    {{ super() }}
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    	$('.table').DataTable();
	}
    </script>
{% endblock %}

There was just a typo.

% block scripts %}
    {{ super() }}
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    	$('.table').DataTable();
	});
    </script>
{% endblock %}

seems to work