Datatable basic configuration is not working

VinuraD · April 2020

Hello! I am using datatables with a Python Flask application, but even the basic configuration is not working (sorting/searching/pagination). I have tried different versions of jquery/datatables as well. However, when I use one of the example html tables given on the site. It works!!! can it be an incompatibility jinja2 used...? I really appreciate some help (Below is the template file)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-device ,initial-scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
</head>

<body>    
    <title>MyTitle/title> 


<div class="container">
    <table id="example" class="display" style="width:100%">
    <thead>
        <tr>
        <th>Serial Number</th>
        <th>Model</th>
        <th>Vendor</th>
        <th>EOS</th>
        <th>Contract ID</th>
        <th>Start Date</th>
        <th>End date</th>            
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Serial Number</th>
            <th>Model</th>
            <th>Vendor</th>
            <th>EOS</th>
            <th>Contract ID</th>
            <th>Start Date</th>
            <th>End date</th>

            </tr>
    </tfoot>-->
    {% for record in records %}
    <tbody>
        <tr>
            <td>{{ record.sn_number }}</td>
            <td>{{ record.model }}</td>
            <td>{{ record.Vendor }}</td>
            <td>{{ record.eos }}</td>
            <td>test</td>
            <td>test</td>
            <td>test</td>

        </tr>
    </tbody>
    {% endfor %}
</table>
</div>

<script>
    $(document).ready(function() {
          $('#example').DataTable();
    });
</script>

</body>
</html>

colin · April 2020

If you're not seeing sorting/searching/etc it would suggest something failed to load. Are you seeing any errors in the browser's console?

Colin

VinuraD · April 2020

Hello Colin...console doesn't give any error. As I mentioned the sorting etc. works with example table given in tutorials (where table cell data are manually inserted). But doesn't apply to my html table. Actually I see sorting buttons, search bar and pagination options. But they do not work at all. Thanks

tangerine · April 2020

<title>MyTitle/title>

Your closing tag is badly formed.

colin · April 2020

And if tangerine's suggestion doesn't work, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

VinuraD · April 2020

Hello tangerine, please ignore it that was a mistake when I copied the template here. Otherwise my template is syntactically correct. Thank You

VinuraD · April 2020

Hello Colin, thanks for the reply, my web app has back-end running with Python Flask, and a Postgres DB. I think will be difficult to replicate the issue in the same way on a platform like jsfiddle etc. without those. Is there any other option that I can share the code (unable to provide a link as well). Otherwise I have created the below fiddle and It works for the hard coded data I have put. I get the same view when I include the data obtained from the back-end (commented table body in the fiddle), but the basic functions do not work.

P.S- I have checked the same setup with couple of other similar plugins available online and they work. However they do not have same capabilities as datatables.

fiddle: https://jsfiddle.net/m1grv2we/1/

Thank you

kthorngren · April 2020

Can you view the source of the Flask rendered page? If so maybe you can take the Jinja template version and put into a test case for us to look at.

Kevin

VinuraD · April 2020

Hello Kevin, Thanks for the reply, my Jinja2 version is 2.11.1. However I do not understand how to put jinja based template to get working on a platform such as jsfiddle etc. (I am relatively new to the stuff). However, do datatables always need ajax to retrieve data to a table unless data is hard coded in the html file (as in one of your previous answers; https://datatables.net/forums/discussion/50315/how-to-use-flask-framework-to-render-the-html-send-json-data-and-have-ajax-update-table) below is my python code where I put the query data on the html page. The variable "records" are set as the cell values of the html table as I put above.
Thank you. (Sorry I am not able to get a pleasant visible format for the code below)

=========================================================

from flask import Flask, render_template, url_for, request,redirect
from flask_sqlalchemy import SQLAlchemy

app = Flask("name")
app.config['SQLALCHEMY_DATABASE_URI']=
'postgresql://postgres:user@localhost/dashboard1'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS']=False

db = SQLAlchemy(app)

class inventory(db.Model):
id = db.Column(db.Integer, primary_key=True)
sn_number=db.Column(db.Integer,unique=True)
customer = db.Column(db.String(200))
Vendor = db.Column(db.String(150))
model = db.Column(db.String(200),nullable=False)
eos = db.Column(db.DateTime)

def __init__(self,id,sn_number,model,eos,Vendor):
    self.id=id
    self.sn_number=sn_number
    self.model=model
    self.eos=eos
    self.Vendor=Vendor

@app.route("/")
def index():
return render_template("index.html")

@app.route("/submit",methods=['POST'])
def submit():
action=request.form['act']
if request.method=='POST' and action=='search':
customer=request.form['customer']
vendor=request.form['vendor']
if vendor=='':
return render_template("index.html", message='Please specify a vendor')
else:
if customer=='':
#print(vendor)
dat=db.session.query(inventory).filter(inventory.Vendor==vendor)
if dat.count()==0:
return render_template("index.html", message='No matches found')
else:
#print(dat)
return render_template("displaytable3.html",records=dat)#"OK"

 else:
     return render_template("index.html", message='Please specify an action'

if name=="main":
app.run(debug=True)

kthorngren · April 2020

What I meant was to open the page in the browser then use the browser's View Source option. I think that should give you the rendered web page without the Jinja templates. If so then you should be able to create a fiddle from that.

Kevin

VinuraD · April 2020

https://jsfiddle.net/wcfx82ts/

Hello Kevin, Sorry for the misunderstanding...above is the link without jinja2 templates. Thank you

colin · April 2020

I spent way too long on that before seeing what was wrong. There are two things:

each <tr> is wrapped within a <tbody>, this is wrong. The <tbody> should contain all the rows
you initialise DataTables with:

              $('#example').DataTable()({
                "ordering": true
              });

This should be

              $('#example').DataTable({
                "ordering": true
              });

See updated example here.

Colin

tangerine · April 2020

Shame on me. Missing a tbody in a loop? I'm rubbish.

VinuraD · April 2020

Thanks very much for the help! I am new to these stuff and I could not figure it out. Thanks again!!!

Datatable basic configuration is not working

Datatable basic configuration is not working

Answers

Howdy, Stranger!

Categories

DataTables

Datatable basic configuration is not working

Datatable basic configuration is not working

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables