(Flask) Ajax JSON with Jquery-Datatable

Asked

Viewed 427 times

0

Good tarrde.

I am trying to show my data (JSON) in a Datatable via Ajax. The HTML is:

        <div class="x_content">
            <table id="exemplo" name="exemplo" class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>Data</th>
                        <th>Cred</th>
                        <th>Deb</th>
                        <th>Dsc</th>
                        <th>Valor</th>
                    </tr>
                </thead>
            </table>
        </div>

With the following script running within HTML:

<script>
    $(document).ready(function(){ 
        $('#exemplo').DataTable({
            "ajax" : '../files/data.json'
            "columns" : [
                { "data" = "data" }
                { "data" = "cred" }
                { "data" = "deb" }
                { "data" = "dsc" }
                { "data" = "valor" } 
            ]
        })
    }   
</script>

Since I’m using Flask with the templates heritage properties, I use the

{% block content %}
{% endblock %}

That pulls the rest of the page from a base.html file. In the base.html file I load the following scripts:

<script src="static/vendors/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="static/vendors/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script src="static/vendors/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="static/vendors/datatables.net-buttons-bs/js/buttons.bootstrap.min.js"></script>
<script src="static/vendors/datatables.net-buttons/js/buttons.flash.min.js"></script>
<script src="static/vendors/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="static/vendors/datatables.net-buttons/js/buttons.print.min.js"></script>
<script src="static/vendors/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js"></script>
<script src="static/vendors/datatables.net-keytable/js/dataTables.keyTable.min.js"></script>
<script src="static/vendors/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="static/vendors/datatables.net-responsive-bs/js/responsive.bootstrap.js"></script>
<script src="static/vendors/datatables.net-scroller/js/dataTables.scroller.min.js"></script>

However, nothing appears on my chart, only the title. Does anyone have any idea what I might be doing wrong? I’ve read everything I can find on the Internet, but I can’t get the code to work...

I’ve tried every code in the Datatable documentation (link), and nothing.

HTML is inside app/templates, and JSON is in app/files

  • The reference to jQuery is initialized before the Datatables dependencies ? Another possibility is that your json is not correct. Another question, this table is inserted in the DOM of loading or is inserted after loading ?

  • Thank you! In fact one of the problems was that the script was being loaded at the end of the page, so it was an error... I changed it, but I still couldn’t display... Now I’m trying to work on a Python script that returns a JSON (without necessarily saving a file) data.json to run the Jquery that pulls this script on the server-side processing line (and then displays the inputs in a table and/or graph)... still a little lost on how to do this, but I need to read more to understand which is the best way...

  • you cannot know the json format or how to generate with python ? you can ask another question if you think it is necessary

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.