# 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)
import pandas as pd
x = np.random.random((20,4)).cumsum(axis=0)
df = pd.DataFrame(x)
DataTable(df)
0 | 1 | 2 | 3 |
---|---|---|---|
0.269563 | 0.857099 | 0.012625 | 0.861940 |
0.472143 | 1.417589 | 0.314961 | 1.348351 |
1.085225 | 1.747111 | 0.530985 | 1.550017 |
1.955550 | 1.956237 | 1.108751 | 1.906862 |
1.962902 | 2.851390 | 1.370837 | 2.631531 |
2.290004 | 3.548992 | 2.205544 | 2.646915 |
3.020287 | 4.157758 | 2.421019 | 3.402216 |
3.838068 | 4.191643 | 2.421228 | 3.999454 |
4.673325 | 4.584845 | 3.103580 | 4.554992 |
5.480314 | 4.647767 | 3.441587 | 5.363727 |
6.388988 | 5.281975 | 4.144320 | 5.541150 |
6.600918 | 5.638060 | 4.286170 | 5.546941 |
7.105912 | 6.464130 | 5.243080 | 5.642702 |
7.170534 | 7.330078 | 5.921271 | 6.567271 |
7.511950 | 7.436355 | 6.537315 | 6.762747 |
8.503881 | 7.684571 | 7.100216 | 7.366986 |
9.314965 | 7.709343 | 7.286372 | 7.692455 |
9.428944 | 7.887535 | 7.322013 | 8.335719 |
10.426352 | 8.796280 | 7.785562 | 8.562306 |
10.863998 | 9.148019 | 8.237815 | 9.227902 |