title: Server side processing with datatables and flask
body: <p>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:</p>
  
  <p><strong>HTML</strong>:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;table id="myTable" class="table table-striped" style="width:100%" &gt;
      &lt;thead&gt;  
          &lt;tr&gt;
              &lt;th&gt;Time&lt;/th&gt;
              &lt;th&gt;Mean Current&lt;/th&gt;
              &lt;th&gt;Vapour Pressure&lt;/th&gt;
              &lt;th&gt;Mean Voltage&lt;/th&gt;
              &lt;th&gt;Temperature&lt;/th&gt;
              &lt;th&gt;Humidity&lt;/th&gt;
              &lt;th&gt;Bar Pressure&lt;/th&gt;
              &lt;th&gt;RPM&lt;/th&gt;
              &lt;th&gt;Wind Sector&lt;/th&gt;
              &lt;th&gt;Wind Speed&lt;/th&gt;
              &lt;th&gt;Air Density&lt;/th&gt;
              &lt;th&gt;DC Voltage&lt;/th&gt;
              &lt;th&gt;Power Sector&lt;/th&gt;
              &lt;th&gt;Furling Angle&lt;/th&gt;
              &lt;th&gt;Yaw angle&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt; 
  &lt;/table&gt;  
  </code></pre>
  
  <p><strong>Javascript</strong>:</p>
  
  <pre class="lang-js prettyprint-override"><code>$(document).ready(function() {
      $('#myTable').DataTable( {
          "processing": true,
          "serverSide": true,
          "ajax": "/page_test"
      } );
  });
  </code></pre>
  
  <p><strong>View function</strong>:</p>
  
  <pre class="lang-py prettyprint-override"><code>@app.route('/page_test')
  def page_test():
      data = json.dumps(meas[2])
      print data
      return data
  </code></pre>
  
  <p><code>meas[2]</code> is my dict: </p>
  
  <pre class="lang-py prettyprint-override"><code>[dict((c.description[i][0], value) \
          for i, value in enumerate(row)) for row in c.fetchall()]
  </code></pre>
  
  <p>In "print data" everything is printed fine, like this:</p>
  
  <pre class="lang-py prettyprint-override"><code>{"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}
  </code></pre>
  
  <p>This is multiplied by the number of rows.</p>
  
  <p>However, when I run the app and insert the query, the table is displayed with only the <code>&lt;th&gt;</code> tags and there is <em>"Processing..."</em> 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:</p>
  
  <pre class="lang-html prettyprint-override"><code>/page_test?draw=2&amp;columns%5B0%5D%5Bdata%5D=0&amp;columns%5B0%5D%5Bname%5D=&amp;columns%5B0%5D%5Bsearchable%5D=true&amp;columns%5B0%5D%5Borderable%5D=true&amp;columns%5B0%5D%5Bsearch%5D%5Bvalue%5D=&amp;columns%5B0%5D%5Bsearch%5D%5Bregex%5D=false&amp;columns%5B1%5D%5Bdata%5D=1&amp;columns%5B1%5D%5Bname%5D=&amp;columns%5B1%5D%5Bsearchable%5
  </code></pre>
  
  <p>And here is a screenshot:</p>
  
  <p><a href="https://i.stack.imgur.com/xVknP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xVknP.png" alt="screenshot from web app"></a></p>
  
  <p>Every time I click on the <code>th</code> 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.</p>