Server side processing with datatables and flask

Question

I'm trying to implement server side processing with data from sqlite on my Flask app. I am a newbie, so I can't figure out what's wrong. So far I have come to this:

HTML:

<table id="myTable" class="table table-striped" style="width:100%" >
    <thead>  
        <tr>
            <th>Time</th>
            <th>Mean Current</th>
            <th>Vapour Pressure</th>
            <th>Mean Voltage</th>
            <th>Temperature</th>
            <th>Humidity</th>
            <th>Bar Pressure</th>
            <th>RPM</th>
            <th>Wind Sector</th>
            <th>Wind Speed</th>
            <th>Air Density</th>
            <th>DC Voltage</th>
            <th>Power Sector</th>
            <th>Furling Angle</th>
            <th>Yaw angle</th>
        </tr>
    </thead> 
</table>

Javascript:

$(document).ready(function() {
    $('#myTable').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "/page_test"
    } );
});

View function:

@app.route('/page_test')
def page_test():
    data = json.dumps(meas[2])
    print data
    return data

meas[2] is my dict:

[dict((c.description[i][0], value) \
        for i, value in enumerate(row)) for row in c.fetchall()]

In "print data" everything is printed fine, like this:

{"MeanCurrent": 0.05933, "Temperature": 15.095, "YawAngle": 0.0, "MeanVoltage": 0.67367, "VoltageDC": 3.18309, "PowerSec": 0.06923, "FurlingAngle": -0.2266828184, "WindSpeed": 1.884, "VapourPressure": 1649.25948, "Humidity": 0.4266, "WindSector": 0, "AirDensity": 1.23051, "BarPressure": 1020.259, "time": "2015-04-22 20:58:28", "RPM": 0.0, "ID": 1357}

This is multiplied by the number of rows.

However, when I run the app and insert the query, the table is displayed with only the <th> tags and there is "Processing..." written on top of the table with no data displayed. At the terminal of my flask app, a huge string is displayed, and this is a small sample:

/page_test?draw=2&columns%5B0%5D%5Bdata%5D=0&columns%5B0%5D%5Bname%5D=&columns%5B0%5D%5Bsearchable%5D=true&columns%5B0%5D%5Borderable%5D=true&columns%5B0%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B0%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B1%5D%5Bdata%5D=1&columns%5B1%5D%5Bname%5D=&columns%5B1%5D%5Bsearchable%5

And here is a screenshot:

Every time I click on the th tags, the same string comes again. It seems like I'm missing something important but as this is my first app, I can't figure out what it is. Any suggestion for modification of the code would be appreciated.

I have exactly the same problem. Did you solve it? – culter Aug 15 '18 at 15:47 — culter, Aug 15 '18 at 15:47

score 3 · Answer 1 · answered Feb 25 '17 at 23:38

Server-side processing is a setting that requires you to have a database script capable of replicating a lot of the core functionality of DataTables on your own server/database to manage very large sets of data.

All the information that is being passed to your script (e.g. that long string of info) are the inputs you need to use to query the database to return a result for DataTables to render.

If you would prefer DataTables to load the data from your Flask endpoint and then manage all the processing internally make these modifications: remove the serverSide setting and add column configurations so your data ends up in the right place:

Javascript:

$(document).ready(function() {
    $('#myTable').DataTable( {
        "processing": true,
        "ajax": "/page_test",
        // add column definitions to map your json to the table
        "columns": [
            {data: "time"},
            {data: "MeanCurrent"},
            ...
        ]
    } );
});

DataTable Initialization Options: if you click the "columns" button it shows you the various configurations each "column" accepts, whether it is sortable, orderable, custom rendering, etc...

Python:

from flask import jsonify

@app.route('/page_test')
def page_test():
    return jsonify(meas[2])

If I remove the serverside setting it won't run the view function at all. So I left it to True and added the columns as you suggested. The same thing persists. I think that I should do something more than that like sending the number of displays per page or something like that. Also it displays "cannot read property length of undefined". — tzoukritzou, Feb 27 '17 at 12:20

score 0 · Answer 2 · answered Sep 08 '18 at 22:13

2 potential issues:

1) Make sure you are not using the slim jQuery version. Slim jQuery doesn't have ajax, so if you inspect in the browser, you will see some error message like "h.ajax if not a function". This will just show "processing..." indefinitely. This had me stumped for awhile, because bootstrap uses the slim version of jQuery by default, and I was using bootstrap.

2) I am not an expert on datatables by any means, but I am playing around with it. To get data to show using server side, the data had to be formatted like this:

return_me = json.dumps({"data": [[1, 1.3478, 23.2223, ...]]})

i.e., I couldn't get it to work when returning a dictionary of column names...I had to specifically call it the dictionary field "data" and then give that all the values. It's possible I have gotten something incorrect here myself, but this is what worked.

score 0 · Answer 3 · edited Apr 08 '19 at 06:55

0

Using flask, you will get a faster response than using C#.In Server Side Processing, You can send sorted/searched/header value via form in flask.

In Flask, You can get datatable values using:

Datatabledata= request.form

In SSP,You can send additional data to flask using:

"data":function(data){ 
data.input="Text"
}

edited Apr 08 '19 at 06:55

zmag

6,257
12
26
33

answered Apr 08 '19 at 06:38

sam ruben

327
1
6

Server side processing with datatables and flask

3 Answers3