update example (#2154)

holoviz · Apr 9, 2021 · 6d36858 · 6d36858
1 parent 2c14de9
commit 6d36858
Showing 1 changed file with 72 additions and 6 deletions.
diff --git a/examples/gallery/external/DataTable.ipynb b/examples/gallery/external/DataTable.ipynb
@@ -9,10 +9,19 @@
     "import panel as pn\n",
     "from bokeh.sampledata.autompg import autompg\n",
     "\n",
-    "css = ['https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css']\n",
+    "css = ['https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css',\n",
+    "       # Below: Needed for export buttons\n",
+    "       'https://cdn.datatables.net/buttons/1.7.0/css/buttons.dataTables.min.css'\n",
+    "]\n",
     "js = {\n",
-    "    '$': 'https://code.jquery.com/jquery-3.4.1.slim.min.js',\n",
-    "    'DataTable': 'https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js'\n",
+    "    '$': 'https://code.jquery.com/jquery-3.5.1.js',\n",
+    "    'DataTable': 'https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js',\n",
+    "    # Below: Needed for export buttons\n",
+    "    'buttons': 'https://cdn.datatables.net/buttons/1.7.0/js/dataTables.buttons.min.js',\n",
+    "    'jszip': 'https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js',\n",
+    "    'pdfmake': 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js',\n",
+    "    'vfsfonts': 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js',\n",
+    "    'html5buttons': 'https://cdn.datatables.net/buttons/1.7.0/js/buttons.html5.min.js',\n",
     "}\n",
     "\n",
     "pn.extension(css_files=css, js_files=js)"
@@ -22,6 +31,8 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
+    "## Panel - Datatable\n",
+    "\n",
     "This example demonstrates how to load the [jQuery DataTable extension](https://datatables.net/) and use it to render a pandas DataFrame."
    ]
   },
@@ -44,16 +55,71 @@
     "\"\"\"\n",
     "\n",
     "html = autompg.to_html(classes=['example', 'panel-df'])\n",
-    "pn.pane.HTML(html+script, sizing_mode='stretch_width').servable()"
+    "pn.pane.HTML(html+script, sizing_mode='stretch_width')"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Panel - Datatable with Export Buttons\n",
+    "\n",
+    "This example demonstrates how to add [export buttons](https://datatables.net/extensions/buttons/examples/html5/simple.html) as requested in [Discourse 2079](https://discourse.holoviz.org/t/adding-buttons-to-panel-datatable/2079)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "script = \"\"\"\n",
+    "<script>\n",
+    "function renderTable(){\n",
+    "  $('.example2').DataTable( {\n",
+    "    dom: 'Bfrtip',\n",
+    "    buttons: [\n",
+    "        'copyHtml5',\n",
+    "        'excelHtml5',\n",
+    "        'csvHtml5',\n",
+    "        'pdfHtml5'\n",
+    "    ]\n",
+    "} );\n",
+    "}\n",
+    "\n",
+    "if (document.readyState === \"complete\") {\n",
+    "  renderTable()\n",
+    "} else {\n",
+    "  $(document).ready(renderTable);\n",
+    "}\n",
+    "</script>\n",
+    "\"\"\"\n",
+    "\n",
+    "html = autompg.to_html(classes=['example2', 'panel-df'])\n",
+    "table_with_export_buttons = pn.pane.HTML(html+script, sizing_mode='stretch_width', margin=(10,5,35,5))\n",
+    "table_with_export_buttons"
    ]
   }
  ],
  "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
   "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
    "name": "python",
-   "pygments_lexer": "ipython3"
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.7.6"
   }
  },
  "nbformat": 4,
- "nbformat_minor": 2
+ "nbformat_minor": 4
 }