#!/usr/bin/env python
# coding: utf-8

# In[5]:


# DataTable class modified from 
# http://blog.dornea.nu/2014/08/28/using-jquery-datatables-with-ipython/

import uuid
from IPython.display import HTML

def DataTable(df):
    """Display a pandas.DataFrame as jQuery DataTables"""
    # Generate random container name
    id_container = uuid.uuid1()
    output = """
<div id="datatable-container-{id_container}">
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/u/dt/dt-1.10.12/datatables.min.css"/>
  <script type="text/javascript" src="https://cdn.datatables.net/u/dt/dt-1.10.12/datatables.min.js"></script>
  <script type="text/javascript">
    (function () {{
      function tablify() {{
        if ( $().dataTable === undefined ) {{
          setTimeout(tablify, 100);
          return;
        }}
      $('#datatable-container-{id_container} table.datatable').dataTable();
      }}
      tablify();
    }})();
  </script>
  <!-- Insert table below -->
  {table}
</div>
    """.format(
        id_container=id_container,
        table=df.to_html(index=False, classes="datatable dataframe"))
    return HTML(output)


# In[6]:


import pandas as pd
x = np.random.random((20,4)).cumsum(axis=0)
df = pd.DataFrame(x)
DataTable(df)


# In[ ]: