title: How to display a pandas dataframe as datatable?
body: <p>I want to display a table - which is a pandas dataframe - as a <a href="https://datatables.net/examples/data_sources/dom.html" rel="noreferrer">DataTable</a>. In the simplified example below, I read two numbers provided by a user, that determine the row and column number of the table. The number of elements of this table is then displayed correctly, however, the table does not appear.</p>
  
  <p>The problem is, I think, that I pass the table in the wrong way. When I try</p>
  
  <pre><code>return jsonify(number_elements=a * b,
                     my_table=df)
  </code></pre>
  
  <p>I get the error</p>
  
  <blockquote>
    <p>anaconda2/lib/python2.7/json/encoder.py", line 184, in default
        raise TypeError(repr(o) + " is not JSON serializable") </p>
    
    <p>TypeError:     0   1   2   3 0  51  35  10  84 1  30  60  79  24 is not JSON
    serializable</p>
  </blockquote>
  
  <p>if I use</p>
  
  <pre><code>return jsonify(number_elements=a * b,
                     my_table=df.to_json())
  </code></pre>
  
  <p>then there is no error but the table is still not displayed.</p>
  
  <p>How would I do this correctly?</p>
  
  <p>My <code>index.html</code> file looks like this:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"
            rel="stylesheet"&gt;
       &lt;link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"
             rel="stylesheet"&gt;
    &lt;script type=text/javascript&gt;
      $(function() {
        $('a#calculate').bind('click', function() {
          $.getJSON('/_get_table', {
            a: $('input[name="a"]').val(),
            b: $('input[name="b"]').val()
          }, function(data) {
            $("#elements").text(data.number_elements);
            $("#a_nice_table").DataTable(data.my_table);
          });
          return false;
        });
      });
    &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="container"&gt;
        &lt;div class="header"&gt;
          &lt;h3 class="text-muted"&gt;Create a pretty table&lt;/h3&gt;
        &lt;/div&gt;
  
        &lt;div&gt;
          &lt;p&gt;Number of rows&lt;/p&gt;
          &lt;input type="text" size="5" name="a" value="2"&gt;
          &lt;p&gt;Number of columns&lt;/p&gt;
          &lt;input type="text" size="5" name="b" value="4"&gt;
  
          &lt;p&gt;&lt;a href="javascript:void();" id="calculate"&gt;get a pretty table&lt;/a&gt;&lt;/p&gt;
           &lt;p&gt;Result&lt;/p&gt;
          &lt;p&gt;Number of elements:&lt;/p&gt;
            &lt;span id="elements"&gt;Hallo&lt;/span&gt;&lt;br&gt;
            &lt;span id="a_nice_table"&gt;Here should be a table&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And my file <code>app.py</code> looks like this:</p>
  
  <pre><code>from flask import Flask, render_template, request, jsonify
  import pandas as pd
  import numpy as np
  
  # Initialize the Flask application
  app = Flask(__name__)
  
  
  @app.route('/')
  def index():
      return render_template('index.html')
  
  
  @app.route('/_get_table')
  def get_table():
      a = request.args.get('a', type=int)
      b = request.args.get('b', type=int)
  
      df = pd.DataFrame(np.random.randint(0, 100, size=(a, b)))
  
      return jsonify(number_elements=a * b,
                     my_table=df)
  
  
  if __name__ == '__main__':
      app.run(debug=True)
  </code></pre>