I was trying the Ajax data source (objects) example -- https://datatables.net/examples/ajax/objects.html. It worked as expected including running it via flask.
Rather than filling the table from a JSON file I would like to use flask to render the html and provide the JSON data to ajax to fill the table.
Flask starts to render the page except where the data is supposed to be it says loading. I also get a popup that says 127.0.0.1:5000 says DataTables warning: table id=example - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1 I tried the link but it didn't have any additional information. I tried various things but no change. Any ideas?
# flaskText.py
from flask import Flask, render_template, jsonify
import json
# Assume data comes from somewhere else
data = {
"data": [
{
"id": "1",
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"id": "2",
"name": "Garrett Winters",
"position": "Accountant",
"salary": "$170,750",
"start_date": "2011/07/25",
"office": "Tokyo",
"extn": "8422"
}]
}
app = Flask(__name__)
@app.route('/index')
@app.route('/')
def index():
# return render_template('index.html',data=data)
return render_template('index.html',data=json.dumps(data))
if __name__ == '__main__':
app.run(debug=True)
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Datatables Example</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.min.css"/>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
</head>
<body>
<h1>My First Heading</h1>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<script>
$(document).ready(function() {
$('#example').DataTable( {
"ajax": {
// "url": "static/objects2.txt", // This works for the static file
"url": "/index", // This doesn't work
"dataType": "json",
// "dataSrc": "data",
// "contentType":"application/json"
},
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "start_date" },
{ "data": "salary" }
]
} );
} );
</script>
</body>
</html>