Flask: Render Template and Populate HTML Table

Based on the information above I think you need to either:

1. submit the actual form data to the Flask backend, or
2. modify your async call to modify the actual DOM table

Currently your $.getJSON call is calling your Flask function but you haven't included a method to update the actual HTML page. It's just returning a set of HTML to the browser but not telling the browser to do anything with it. The server side script will run on a GET or POST request, but making this request via XHR does nothing to tell your browser to refresh. The JQuery $.getJSON() call is a way to asynchronously get data from the Flask backend, but to use this functionality you also need to handle the resulting DOM manipulation in Javascript (e.g. to do this without the page reloading).

DataTables is a great tool. I'm going to ignore it in the first 2 scenarios here and explain how you'd implement this in my third.

So, I think you have 3 options:

1) Have you form POST the data to your Flask application, in this case you'd need to change your view function to accept both GET and POST responses:

@application.route("/ms_bulletins", methods=['GET', 'POST'])

And change your form action to

<form method="POST" action="">

Then remove the Javascript function entirely. This should work, the page will reload on each call.

2) To go the async route would require adding a second Flask function:

from Flask import jsonify@application.route("/_get_bulletins")def _get_bulletins():    date = request.args.get('date', None, type=str)    session = Session()    data = session.query(MsBulletins).filter(MsBulletins.date==date)    bulletins = data.all()    return jsonify(bulletins)

Then, modify your javascript function to incorporate the results into the DOM:

function dateClick(date){    var dropdown = document.getElementById("date");    var date = dropdown.options[dropdown.selectedIndex].value;    var table = $('#bulletin_table').find('tbody');    table.empty();    console.log( "Date: " + date );    $.getJSON('{{ url_for('._get_bulletins') }}', date,         function (data ){            console.log(data);            for (var x = 0; x < data.length; x++) {                var row = $('<tr>');                row.append($('<td>').text(data[x][0]));                row.append($('<td>').text(data[x][1]));                table.append(row);            }    });}

3) Go the Async route and use DataTables. To use this I would recommend passing a more detailed configuration to the DataTables API. It's well documented and powerful. The core functionality to get this to work would be.

Store the DataTable reference in a variable.

var dt = $('#bulletin_table').DataTable();

Change your javascript function to manipulate the DataTable, not the DOM:

function dateClick(date){    var dropdown = document.getElementById("date");    var date = dropdown.options[dropdown.selectedIndex].value;    console.log( "Date: " + date );    $.getJSON('{{ url_for('._get_bulletins') }}', date,         function (data ){            console.log(data);            dt.empty();            dt.rows.add(data).draw();    });}