Datatable basic configuration is not working

Datatable basic configuration is not working

VinuraDVinuraD Posts: 7Questions: 1Answers: 0

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>

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 8,661Questions: 0Answers: 1,449

    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

  • VinuraDVinuraD Posts: 7Questions: 1Answers: 0
    edited April 6

    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

  • tangerinetangerine Posts: 2,563Questions: 21Answers: 288

    <title>MyTitle/title>

    Your closing tag is badly formed.

  • colincolin Posts: 8,661Questions: 0Answers: 1,449

    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

  • VinuraDVinuraD Posts: 7Questions: 1Answers: 0

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

  • VinuraDVinuraD Posts: 7Questions: 1Answers: 0

    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

  • kthorngrenkthorngren Posts: 8,931Questions: 25Answers: 2,040

    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

  • VinuraDVinuraD Posts: 7Questions: 1Answers: 0
    edited April 6

    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)

  • kthorngrenkthorngren Posts: 8,931Questions: 25Answers: 2,040

    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

  • VinuraDVinuraD Posts: 7Questions: 1Answers: 0
    edited April 7

    https://jsfiddle.net/wcfx82ts/

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

  • colincolin Posts: 8,661Questions: 0Answers: 1,449
    edited April 7 Answer ✓

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

    1. each <tr> is wrapped within a <tbody>, this is wrong. The <tbody> should contain all the rows
    2. you initialise DataTables with:
                  $('#example').DataTable()({
                    "ordering": true
                  });
    

    This should be

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

    See updated example here.

    Colin

  • tangerinetangerine Posts: 2,563Questions: 21Answers: 288

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

  • VinuraDVinuraD Posts: 7Questions: 1Answers: 0

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

Sign In or Register to comment.