DataTable is not working with Flask and MongoDB with basic setting
DataTable is not working with Flask and MongoDB with basic setting
wk14
Posts: 2Questions: 1Answers: 0
Hi! I'm very new to web development and have looked up many discussions here or on stackoverflow, but still couldn't figure out why it isn't working with my setup.
I'm using MongoDB with Flask. Goal is to have a main page showing the website purpose and then links to different pages with their own tables with data grabbed from the same mongoDB collection with some IF conditions applied.
It would be a nice feature to be able to sort by some columns and later on be able to hide selected columns so I came upon what DataTables offers...but I couldn't even get it to work with the basic setting. It shows the table but none of the sort/search features ever show up. I would really appreciate any help. Thank you!!
Below is my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<!-- {title} is the location -->
{% if title %}
<title>Live Update - {{title}}</title>
{% else %}
<title>Live Update</title>
{% endif %}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
<link href="{{ url_for('static', filename='main.css') }}" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type = "text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script type = "text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type = "text/javascript" src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js"></script>
</head>
<body>
{% include '_navbar.html' %}
{% block body %}
{% endblock %}
</body>
{% block scripts %}
{% endblock scripts %}
</html>
And below is one of the htmls that user can navigate to. In this example it's taiwan.html
{% extends 'index.html' %}
{% block body %}
<h1 style="margin-top: 60px; margin-left: 60px;">{{title}}</h1>
<div class="container">
<table id="example" class="table display" style="width: 100%;">
<thread>
<th>Name</th>
<th>Description</th>
</thread>
<tbody>
<tr>
<td>Pie</td>
<td>Yummy</td>
</tr>
<tr>
<td>Apple</td>
<td>sweet</td>
</tr>
<tr>
<td>Orange</td>
<td>sour</td>
</tr>
<!--
{% for r in results %}
{% if (r.location == "Taiwan") %}
<tr>
<td>{{r.name}}</td>
<td>{{r.description}}</td>
</tr>
{% endif %}
{% endfor %}
-->
</tbody>
</table>
</div>
{% endblock %}
{% block scripts %}
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable()});
</script>
{% endblock scripts %}
I commented out the for loop where I got the mongo collection and tried out a dummy table, but DataTable isn't even working for me.
I checked the console and see the following errors:
jquery.min.js:2 jQuery.Deferred exception: Cannot read property 'mData' of undefined TypeError: Cannot read property 'mData' of undefined
at HTMLTableCellElement.<anonymous> (https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js:103:363)
at Function.each (https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js:2:2976)
at S.fn.init.each (https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js:2:1454)
at HTMLTableElement.<anonymous> (https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js:103:318)
at Function.each (https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js:2:2976)
at S.fn.init.each (https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js:2:1454)
at S.fn.init.q [as dataTable] (https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js:96:388)
at S.fn.init.f.fn.DataTable (https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js:179:488)
at HTMLDocument.<anonymous> (http://localhost:5000/Austin/:92:23)
at e (https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js:2:30005) undefined
S.Deferred.exceptionHook @ jquery.min.js:2
jquery.min.js:2 Uncaught TypeError: Cannot read property 'mData' of undefined
at HTMLTableCellElement.<anonymous> (jquery.dataTables.min.js:103)
at Function.each (jquery.min.js:2)
at S.fn.init.each (jquery.min.js:2)
at HTMLTableElement.<anonymous> (jquery.dataTables.min.js:103)
at Function.each (jquery.min.js:2)
at S.fn.init.each (jquery.min.js:2)
at S.fn.init.q [as dataTable] (jquery.dataTables.min.js:96)
at S.fn.init.f.fn.DataTable (jquery.dataTables.min.js:179)
at HTMLDocument.<anonymous> (localhost/:92)
at e (jquery.min.js:2)
But most of the posts I could find related to this mData error was due to different counts of <th> and <td> or <thread>and<tbody> weren't used. But I don't see those issues with my table.
Here are some parts from app.py:
from flask import Flask, jsonify, render_template, url_for, request, redirect, flash, make_response
import datetime as DT
from mongo_datatables import DataTables
import json
import pymongo
import collections, re
from flask_table import Table, Col
app = Flask(__name__)
app.config["MONGO_URI"] = "mongodb://localhost:27017/my_database"
# Database
connection = pymongo.MongoClient('mongodb://localhost:27017/')
mydb = connection["my_database"]
systems = mydb.my_systems
@app.route('/Taiwan/')
def taiwan():
results = list(systems.find({}))
return render_template('taiwan.html', results = results, title = 'Taiwan')
if __name__ == "__main__":
app.run(debug=True)
This question has an accepted answers - jump to answer
Answers
Generally this is a mismatch with the number of columns and table data. It doesn't look like you are generating a proper HTML
table. You have<thread>. It should be<thead>. Basically there are no headers so its causing the error you are seeing. Your HTMLtableneeds to meet the requirements documented here.Kevin
How could I not see the typo...now I feel stupid
...
Thanks so much for the quick reply