first commit

This commit is contained in:
kicap
2024-05-29 11:18:12 +08:00
commit 9ac397356d
1407 changed files with 534170 additions and 0 deletions

View File

@ -0,0 +1,849 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Adding and removing buttons dynamically</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
var counter = 1;
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
text: 'Add new button',
action: function ( e, dt, node, config ) {
dt.button().add( 1, {
text: 'Button '+(counter++),
action: function () {
this.remove();
}
} );
}
}
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Adding and removing buttons dynamically</span></h1>
<div class="info">
<p>The <a href="//datatables.net/reference/api/button().add()"><code class="api" title="Buttons API method">button().add()</code></a> and <a href=
"//datatables.net/reference/api/button().remove()"><code class="api" title="Buttons API method">button().remove()</code></a> methods provide the ability to
dynamically add and remove buttons from the list. The <a href="//datatables.net/reference/api/button().add()"><code class="api" title=
"Buttons API method">button().add()</code></a> method takes two parameters: firstly the insertion point for where the new button should appear, and secondly a
button definition (which can be an object, a string or a function) and displays that button.</p>
<p>This example shows a button that when activated will add new buttons to the list. These buttons, when activated, will then be removed. Although this example
lacks practical utility, it does demonstrate the API methods.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
var counter = 1;
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
text: 'Add new button',
action: function ( e, dt, node, config ) {
dt.button().add( 1, {
text: 'Button '+(counter++),
action: function () {
this.remove();
}
} );
}
}
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="../html5/simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="../html5/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../html5/filename.html">File name</a>
</li>
<li>
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../html5/columns.html">Column selectors</a>
</li>
<li>
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="../html5/pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="../html5/pdfImage.html">PDF - image</a>
</li>
<li>
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="../html5/customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">API</a></h3>
<ul class="toc active">
<li>
<a href="./enable.html">Enable / disable</a>
</li>
<li>
<a href="./text.html">Dynamic text</a>
</li>
<li class="active">
<a href="./addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="./group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,892 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Enable / disable</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../Select/css/select.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="../../../Select/js/dataTables.select.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
var table = $('#example').DataTable( {
dom: 'Bfrtip',
select: true,
buttons: [
{
text: 'Row selected data',
action: function ( e, dt, node, config ) {
alert(
'Row data: '+
JSON.stringify( dt.row( { selected: true } ).data() )
);
},
enabled: false
},
{
text: 'Count rows selected',
action: function ( e, dt, node, config ) {
alert( 'Rows: '+ dt.rows( { selected: true } ).count() );
},
enabled: false
}
]
} );
table.on( 'select', function () {
var selectedRows = table.rows( { selected: true } ).count();
table.button( 0 ).enable( selectedRows === 1 );
table.button( 1 ).enable( selectedRows > 0 );
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Enable / disable</span></h1>
<div class="info">
<p>It can often be useful to be able to dynamically enable and disable buttons based on the document state and other components in the table. A typical example of
this is to enable a button that will take action on a selected row in the table, only when there is a row selected! If there is no row selected, the button should
not take any action when clicked upon (i.e. it is disabled).</p>
<p>This example makes use of the <a href="https://datatables.net/extensions/select">Select extension</a> for DataTables to provide row selection. The <a href=
"//datatables.net/reference/event/select"><code class="event" title="Select event">select</code></a> event it listened for to know when the row selection has
changed and then update the button's enabled / disabled state through the <a href="//datatables.net/reference/api/button().enable()"><code class="api" title=
"Buttons API method">button().enable()</code></a> method.</p>
<p>The <a href="//datatables.net/reference/api/button()"><code class="api" title="Buttons API method">button()</code></a> method is a selector method that will use
the information given to it to select the buttons that the subsequent methods will take action on. There is also a <a href=
"//datatables.net/reference/api/buttons()"><code class="api" title="Buttons API method">buttons()</code></a> method that can be used to select multiple buttons
(the DataTables API makes <a href="https://datatables.net/manual/api#Plural-/-Singular">significant use of this plural / singular distinction</a>).</p>
<p>The <a href="//datatables.net/reference/type/button-selector"><code class="type" title="Javascript parameter type">button-selector</code></a> used in this
example is a simple index selector - button 1 and button 2. Based on the number of rows selected the enablement state is adjusted. The first button is enabled when
there is only one row selected, the second when one or more rows are selected.</p>
<p>Note that the Select library provides a number of button types such as <a href="//datatables.net/reference/button/selected"><code class="button" title=
"Select button type">selected</code></a> and <a href="//datatables.net/reference/button/selectedSingle"><code class="button" title=
"Select button type">selectedSingle</code></a> that provide this enable / disabled option without the additional code shown in this example.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
var table = $('#example').DataTable( {
dom: 'Bfrtip',
select: true,
buttons: [
{
text: 'Row selected data',
action: function ( e, dt, node, config ) {
alert(
'Row data: '+
JSON.stringify( dt.row( { selected: true } ).data() )
);
},
enabled: false
},
{
text: 'Count rows selected',
action: function ( e, dt, node, config ) {
alert( 'Rows: '+ dt.rows( { selected: true } ).count() );
},
enabled: false
}
]
} );
table.on( 'select', function () {
var selectedRows = table.rows( { selected: true } ).count();
table.button( 0 ).enable( selectedRows === 1 );
table.button( 1 ).enable( selectedRows &gt; 0 );
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="../../../Select/js/dataTables.select.js">../../../Select/js/dataTables.select.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
<li>
<a href="../../../Select/css/select.dataTables.css">../../../Select/css/select.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="../html5/simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="../html5/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../html5/filename.html">File name</a>
</li>
<li>
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../html5/columns.html">Column selectors</a>
</li>
<li>
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="../html5/pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="../html5/pdfImage.html">PDF - image</a>
</li>
<li>
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="../html5/customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">API</a></h3>
<ul class="toc active">
<li class="active">
<a href="./enable.html">Enable / disable</a>
</li>
<li>
<a href="./text.html">Dynamic text</a>
</li>
<li>
<a href="./addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="./group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,867 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Group selection</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
var table = $('#example').DataTable();
new $.fn.dataTable.Buttons( table, {
buttons: [
{
text: 'Button 1',
action: function ( e, dt, node, conf ) {
console.log( 'Button 1 clicked on' );
}
},
{
text: 'Button 2',
action: function ( e, dt, node, conf ) {
console.log( 'Button 2 clicked on' );
}
}
]
} );
table.buttons( 0, null ).container().prependTo(
table.table().container()
);
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Group selection</span></h1>
<div class="info">
<p>Multiple button sets can coexist together sharing the same DataTable as a host. When using the API you need the ability to select one, or more, of those groups,
and thus the buttons in them to be able to take whatever action is required. This is provided through the <a href=
"//datatables.net/reference/type/button-group-selector"><code class="type" title="Javascript parameter type">button-group-selector</code></a> data type of the
<a href="//datatables.net/reference/api/button()"><code class="api" title="Buttons API method">button()</code></a> and <a href=
"//datatables.net/reference/api/buttons()"><code class="api" title="Buttons API method">buttons()</code></a> methods.</p>
<p>The group selector, and the individual button selector (<a href="//datatables.net/reference/type/button-selector"><code class="type" title=
"Javascript parameter type">button-selector</code></a>) give the ability to select any button or buttons in any group or groups of buttons. Actions can also be
taken on a whole group of buttons.</p>
<p>This example shows Buttons being constructed using the <code>new $.fn.dataTable.Buttons</code> construct and then the container node that holds all of the
created buttons obtained via the <a href="//datatables.net/reference/api/buttons().container()"><code class="api" title=
"Buttons API method">buttons().container()</code></a> method. Note that the function is called with two parameters: <code>0</code> and <code>null</code>. The
<code>0</code> is the <a href="//datatables.net/reference/type/button-group-selector"><code class="type" title=
"Javascript parameter type">button-group-selector</code></a> option (i.e. select BUttons instance 0) and the second parameter is the <a href=
"//datatables.net/reference/type/button-selector"><code class="type" title="Javascript parameter type">button-selector</code></a> option. This is important as if a
single parameter is passed into the <a href="//datatables.net/reference/api/button()"><code class="api" title="Buttons API method">button()</code></a> or <a href=
"//datatables.net/reference/api/buttons()"><code class="api" title="Buttons API method">buttons()</code></a> methods it is treated as a <a href=
"//datatables.net/reference/type/button-selector"><code class="type" title="Javascript parameter type">button-selector</code></a>.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
var table = $('#example').DataTable();
new $.fn.dataTable.Buttons( table, {
buttons: [
{
text: 'Button 1',
action: function ( e, dt, node, conf ) {
console.log( 'Button 1 clicked on' );
}
},
{
text: 'Button 2',
action: function ( e, dt, node, conf ) {
console.log( 'Button 2 clicked on' );
}
}
]
} );
table.buttons( 0, null ).container().prependTo(
table.table().container()
);
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="../html5/simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="../html5/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../html5/filename.html">File name</a>
</li>
<li>
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../html5/columns.html">Column selectors</a>
</li>
<li>
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="../html5/pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="../html5/pdfImage.html">PDF - image</a>
</li>
<li>
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="../html5/customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">API</a></h3>
<ul class="toc active">
<li>
<a href="./enable.html">Enable / disable</a>
</li>
<li>
<a href="./text.html">Dynamic text</a>
</li>
<li>
<a href="./addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li class="active">
<a href="./group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,60 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<title>Buttons examples - API</title>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>API</span></h1>
<div class="info">
<p>The Buttons API is tightly integrated with DataTables own API, building on the same style and interaction. With the API it is possible to manipulate individual
buttons and groups of buttons, altering their characteristics and behaviour.</p>
<p>The examples in this section show how the Buttons API can be used.</p>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<div class="toc">
<div class="toc-group">
<h3><a href="./index.html">API</a></h3>
<ul class="toc">
<li>
<a href="./enable.html">Enable / disable</a>
</li>
<li>
<a href="./text.html">Dynamic text</a>
</li>
<li>
<a href="./addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="./group.html">Group selection</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,846 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Dynamic text</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
text: 'My button',
action: function ( e, dt, node, config ) {
this.text( 'My button ('+config.counter+')' );
config.counter++;
},
counter: 1
}
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Dynamic text</span></h1>
<div class="info">
<p>This example demonstrates Buttons' ability to dynamically set the text of buttons through the <a href=
"//datatables.net/reference/api/button().text()"><code class="api" title="Buttons API method">button().text()</code></a> method. Here the button's text will be
updated to indicate the number of times it has been clicked upon.</p>
<p>There are also two other important aspects of the Buttons API demonstrated here:</p>
<ol class="markdown">
<li>The <a href="//datatables.net/reference/option/buttons.buttons.action"><code class="option" title=
"Buttons initialisation option">buttons.buttons.action</code></a> method is executed in the scope of the <a href=
"//datatables.net/reference/api/button()"><code class="api" title="Buttons API method">button()</code></a> object for the button in question. The result is
that the button methods such as <a href="//datatables.net/reference/api/button().text()"><code class="api" title=
"Buttons API method">button().text()</code></a> are available under <code>this</code> - <code>this.text()</code> in this case.
</li>
<li>The <code>config</code> object passed in as the forth parameter to the <code>action</code> method is the button configuration. In this example
<code>counter</code> is set to 1 initially and that parameter can continue to be used by the button (self-referencing effectively).</li>
</ol>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
text: 'My button',
action: function ( e, dt, node, config ) {
this.text( 'My button ('+config.counter+')' );
config.counter++;
},
counter: 1
}
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="../html5/simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="../html5/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../html5/filename.html">File name</a>
</li>
<li>
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../html5/columns.html">Column selectors</a>
</li>
<li>
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="../html5/pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="../html5/pdfImage.html">PDF - image</a>
</li>
<li>
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="../html5/customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">API</a></h3>
<ul class="toc active">
<li>
<a href="./enable.html">Enable / disable</a>
</li>
<li class="active">
<a href="./text.html">Dynamic text</a>
</li>
<li>
<a href="./addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="./group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,865 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Column groups</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.colVis.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'colvisGroup',
text: 'Office info',
show: [ 1, 2 ],
hide: [ 3, 4, 5 ]
},
{
extend: 'colvisGroup',
text: 'HR info',
show: [ 3, 4, 5 ],
hide: [ 1, 2 ]
},
{
extend: 'colvisGroup',
text: 'Show all',
show: ':hidden'
}
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Column groups</span></h1>
<div class="info">
<p>When working with column visibility you may which to present a control to the end use that provides the ability to set various columns to both show and hide at
the same time - allowing grouping to occur. The <a href="//datatables.net/reference/button/colvisGroup"><code class="button" title=
"Buttons button type">colvisGroup</code></a> button type provides this ability for Buttons. The <code>show</code> and <code>hide</code> parameters of this button
are both <a href="//datatables.net/reference/type/column-selector"><code class="type" title="DataTables parameter type">column-selector</code></a> types defining
the columns in the table that should be shown or hidden respectively. If a column is not defined in either, its visibility is not altered.</p>
<p>This example shows three uses of the <a href="//datatables.net/reference/button/colvisGroup"><code class="button" title=
"Buttons button type">colvisGroup</code></a> button type:</p>
<ul class="markdown">
<li>Grouping - show columns 0, 1, 2 and hide the others</li>
<li>Grouping - show columns 0, 2, 3, 4 and hide the others</li>
<li>Show all</li>
</ul>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'colvisGroup',
text: 'Office info',
show: [ 1, 2 ],
hide: [ 3, 4, 5 ]
},
{
extend: 'colvisGroup',
text: 'HR info',
show: [ 3, 4, 5 ],
hide: [ 1, 2 ]
},
{
extend: 'colvisGroup',
text: 'Show all',
show: ':hidden'
}
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="../../js/buttons.colVis.js">../../js/buttons.colVis.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="../html5/simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="../html5/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../html5/filename.html">File name</a>
</li>
<li>
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../html5/columns.html">Column selectors</a>
</li>
<li>
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="../html5/pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="../html5/pdfImage.html">PDF - image</a>
</li>
<li>
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="../html5/customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Column visibility</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">Basic column visibility</a>
</li>
<li>
<a href="./layout.html">Multi-column layout</a>
</li>
<li>
<a href="./text.html">Internationalisation</a>
</li>
<li>
<a href="./restore.html">Restore column visibility</a>
</li>
<li>
<a href="./columns.html">Select columns</a>
</li>
<li>
<a href="./columnsToggle.html">Visibility toggle buttons</a>
</li>
<li class="active">
<a href="./columnGroups.html">Column groups</a>
</li>
<li>
<a href="./stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,833 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Select columns</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.colVis.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'colvis',
columns: ':not(:first-child)'
}
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Select columns</span></h1>
<div class="info">
<p>The <a href="//datatables.net/reference/button/colvis"><code class="button" title="Buttons button type">colvis</code></a> button type provides a
<code>columns</code> option to allow you to select what columns should be included in the column visibility control list. This option is a <a href=
"//datatables.net/reference/type/column-selector"><code class="type" title="DataTables parameter type">column-selector</code></a> and thus a number of methods to
select the columns included are available including jQuery selectors and data index selectors.</p>
<p>This example shows a jQuery selector being used to exclude the first column in the table - note that the <em>Name</em> column is not included in the column
visibility list.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'colvis',
columns: ':not(:first-child)'
}
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="../../js/buttons.colVis.js">../../js/buttons.colVis.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="../html5/simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="../html5/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../html5/filename.html">File name</a>
</li>
<li>
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../html5/columns.html">Column selectors</a>
</li>
<li>
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="../html5/pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="../html5/pdfImage.html">PDF - image</a>
</li>
<li>
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="../html5/customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Column visibility</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">Basic column visibility</a>
</li>
<li>
<a href="./layout.html">Multi-column layout</a>
</li>
<li>
<a href="./text.html">Internationalisation</a>
</li>
<li>
<a href="./restore.html">Restore column visibility</a>
</li>
<li class="active">
<a href="./columns.html">Select columns</a>
</li>
<li>
<a href="./columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="./columnGroups.html">Column groups</a>
</li>
<li>
<a href="./stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,826 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Visibility toggle buttons</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.colVis.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'columnsToggle'
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Visibility toggle buttons</span></h1>
<div class="info">
<p>The <a href="//datatables.net/reference/button/colvis"><code class="button" title="Buttons button type">colvis</code></a> type will insert the buttons into a
<a href="//datatables.net/reference/button/collection"><code class="button" title="Buttons button type">collection</code></a> button automatically, but you may
wish to have the column visibility buttons as buttons that are always visible. This is possible using the <a href=
"//datatables.net/reference/button/columnsToggle"><code class="button" title="Buttons button type">columnsToggle</code></a> button type, as shown in this
example.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'columnsToggle'
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="../../js/buttons.colVis.js">../../js/buttons.colVis.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="../html5/simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="../html5/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../html5/filename.html">File name</a>
</li>
<li>
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../html5/columns.html">Column selectors</a>
</li>
<li>
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="../html5/pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="../html5/pdfImage.html">PDF - image</a>
</li>
<li>
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="../html5/customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Column visibility</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">Basic column visibility</a>
</li>
<li>
<a href="./layout.html">Multi-column layout</a>
</li>
<li>
<a href="./text.html">Internationalisation</a>
</li>
<li>
<a href="./restore.html">Restore column visibility</a>
</li>
<li>
<a href="./columns.html">Select columns</a>
</li>
<li class="active">
<a href="./columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="./columnGroups.html">Column groups</a>
</li>
<li>
<a href="./stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,73 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<title>BUttons examples - Column visibility examples</title>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>BUttons example <span>Column visibility examples</span></h1>
<div class="info">
<p>The column visibility plug-in for the DataTables Buttons extension provides a suite of buttons that can be used to very easily control the visibility of columns
in a table.</p>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<div class="toc">
<div class="toc-group">
<h3><a href="./index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="./simple.html">Basic column visibility</a>
</li>
<li>
<a href="./layout.html">Multi-column layout</a>
</li>
<li>
<a href="./text.html">Internationalisation</a>
</li>
<li>
<a href="./restore.html">Restore column visibility</a>
</li>
<li>
<a href="./columns.html">Select columns</a>
</li>
<li>
<a href="./columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="./columnGroups.html">Column groups</a>
</li>
<li>
<a href="./stateSave.html">State saving</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,834 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Multi-column layout</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.colVis.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'colvis',
collectionLayout: 'fixed two-column'
}
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Multi-column layout</span></h1>
<div class="info">
<p>The <a href="//datatables.net/reference/button/collection"><code class="button" title="Buttons button type">collection</code></a> button has a
<code>collectionLayout</code> option that can be used to control the layout of the buttons shown in the collection. As the <a href=
"//datatables.net/reference/button/colvis"><code class="button" title="Buttons button type">colvis</code></a> button extends the collection button, this option is
also available for the column visibility controls.</p>
<p>This example shows a fixed, two column layout. Please see the <code>collectionLayout</code> option in the <a href=
"//datatables.net/reference/button/collection"><code class="button" title="Buttons button type">collection</code></a> button documentation for the full list of
options.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'colvis',
collectionLayout: 'fixed two-column'
}
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="../../js/buttons.colVis.js">../../js/buttons.colVis.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="../html5/simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="../html5/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../html5/filename.html">File name</a>
</li>
<li>
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../html5/columns.html">Column selectors</a>
</li>
<li>
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="../html5/pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="../html5/pdfImage.html">PDF - image</a>
</li>
<li>
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="../html5/customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Column visibility</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">Basic column visibility</a>
</li>
<li class="active">
<a href="./layout.html">Multi-column layout</a>
</li>
<li>
<a href="./text.html">Internationalisation</a>
</li>
<li>
<a href="./restore.html">Restore column visibility</a>
</li>
<li>
<a href="./columns.html">Select columns</a>
</li>
<li>
<a href="./columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="./columnGroups.html">Column groups</a>
</li>
<li>
<a href="./stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,844 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Restore column visibility</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.colVis.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'colvis',
postfixButtons: [ 'colvisRestore' ]
}
],
columnDefs: [
{
targets: -1,
visible: false
}
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Restore column visibility</span></h1>
<div class="info">
<p>The <a href="//datatables.net/reference/button/colvisRestore"><code class="button" title="Buttons button type">colvisRestore</code></a> provides a single click
button that will restore the table's column visibility to the same as when the DataTable was initialised.</p>
<p>This example shows the <a href="//datatables.net/reference/button/colvis"><code class="button" title="Buttons button type">colvis</code></a> button collection
augmented with the <a href="//datatables.net/reference/button/colvisRestore"><code class="button" title="Buttons button type">colvisRestore</code></a> button type
through the <code>postfixButtons</code> option to add the restore button to the end of the column visibility collection.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'colvis',
postfixButtons: [ 'colvisRestore' ]
}
],
columnDefs: [
{
targets: -1,
visible: false
}
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="../../js/buttons.colVis.js">../../js/buttons.colVis.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="../html5/simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="../html5/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../html5/filename.html">File name</a>
</li>
<li>
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../html5/columns.html">Column selectors</a>
</li>
<li>
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="../html5/pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="../html5/pdfImage.html">PDF - image</a>
</li>
<li>
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="../html5/customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Column visibility</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">Basic column visibility</a>
</li>
<li>
<a href="./layout.html">Multi-column layout</a>
</li>
<li>
<a href="./text.html">Internationalisation</a>
</li>
<li class="active">
<a href="./restore.html">Restore column visibility</a>
</li>
<li>
<a href="./columns.html">Select columns</a>
</li>
<li>
<a href="./columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="./columnGroups.html">Column groups</a>
</li>
<li>
<a href="./stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,827 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Basic column visibility</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.colVis.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'colvis'
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Basic column visibility</span></h1>
<div class="info">
<p>The column visibility plug-in for Buttons provides a set of buttons that can be used to easily give the end user the ability to set the visibility of
columns.</p>
<p>The primary button type for column visibility controls is the <a href="//datatables.net/reference/button/colvis"><code class="button" title=
"Buttons button type">colvis</code></a> type which adds a collection (<a href="//datatables.net/reference/button/collection"><code class="button" title=
"Buttons button type">collection</code></a>) of buttons, one for each of the columns in the table, with the end user having the ability to toggle these
columns.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'colvis'
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="../../js/buttons.colVis.js">../../js/buttons.colVis.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="../html5/simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="../html5/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../html5/filename.html">File name</a>
</li>
<li>
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../html5/columns.html">Column selectors</a>
</li>
<li>
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="../html5/pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="../html5/pdfImage.html">PDF - image</a>
</li>
<li>
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="../html5/customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Column visibility</a></h3>
<ul class="toc active">
<li class="active">
<a href="./simple.html">Basic column visibility</a>
</li>
<li>
<a href="./layout.html">Multi-column layout</a>
</li>
<li>
<a href="./text.html">Internationalisation</a>
</li>
<li>
<a href="./restore.html">Restore column visibility</a>
</li>
<li>
<a href="./columns.html">Select columns</a>
</li>
<li>
<a href="./columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="./columnGroups.html">Column groups</a>
</li>
<li>
<a href="./stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,828 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - State saving</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.colVis.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
stateSave: true,
buttons: [
'colvis'
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>State saving</span></h1>
<div class="info">
<p>Button's column visibility module works seamlessly with DataTables' state saving option (<a href="//datatables.net/reference/option/stateSave"><code class=
"option" title="DataTables initialisation option">stateSave</code></a>). All you need to do is enable both the column visibility buttons and state saving, as shown
in this example.</p>
<p>To demonstrate this ability, simple hide a few columns and then refresh the table. The columns you selected to be hidden will remain hidden and the button
states will reflect this.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
stateSave: true,
buttons: [
'colvis'
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="../../js/buttons.colVis.js">../../js/buttons.colVis.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="../html5/simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="../html5/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../html5/filename.html">File name</a>
</li>
<li>
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../html5/columns.html">Column selectors</a>
</li>
<li>
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="../html5/pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="../html5/pdfImage.html">PDF - image</a>
</li>
<li>
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="../html5/customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Column visibility</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">Basic column visibility</a>
</li>
<li>
<a href="./layout.html">Multi-column layout</a>
</li>
<li>
<a href="./text.html">Internationalisation</a>
</li>
<li>
<a href="./restore.html">Restore column visibility</a>
</li>
<li>
<a href="./columns.html">Select columns</a>
</li>
<li>
<a href="./columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="./columnGroups.html">Column groups</a>
</li>
<li class="active">
<a href="./stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,832 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Internationalisation</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.colVis.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [ 'colvis' ],
language: {
buttons: {
colvis: 'Change columns'
}
}
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Internationalisation</span></h1>
<div class="info">
<p>Like all buttons available through the Buttons extension for DataTables, the button text can be modified - to suit your needs. This is always possible using the
<a href="//datatables.net/reference/option/buttons.buttons.text"><code class="option" title="Buttons initialisation option">buttons.buttons.text</code></a> option
and each button type can also make use of the DataTables <a href="//datatables.net/reference/option/language"><code class="option" title=
"DataTables initialisation option">language</code></a> configuration options.</p>
<p>In this case the <code>language.buttons.colvis</code> option is used to specify the text shown in the collection button.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [ 'colvis' ],
language: {
buttons: {
colvis: 'Change columns'
}
}
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="../../js/buttons.colVis.js">../../js/buttons.colVis.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="../html5/simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="../html5/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../html5/filename.html">File name</a>
</li>
<li>
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../html5/columns.html">Column selectors</a>
</li>
<li>
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="../html5/pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="../html5/pdfImage.html">PDF - image</a>
</li>
<li>
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="../html5/customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Column visibility</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">Basic column visibility</a>
</li>
<li>
<a href="./layout.html">Multi-column layout</a>
</li>
<li class="active">
<a href="./text.html">Internationalisation</a>
</li>
<li>
<a href="./restore.html">Restore column visibility</a>
</li>
<li>
<a href="./columns.html">Select columns</a>
</li>
<li>
<a href="./columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="./columnGroups.html">Column groups</a>
</li>
<li>
<a href="./stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,848 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Copy button internationalisation</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.flash.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copyFlash'
],
language: {
buttons: {
copyTitle: 'Copier au clipboard',
copySuccess: {
_: 'Copiés %d rangs',
1: 'Copié 1 rang'
}
}
}
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Copy button internationalisation</span></h1>
<div class="info">
<p>The <a href="//datatables.net/reference/button/copyFlash"><code class="button" title="Buttons button type">copyFlash</code></a> will immediately copy the
exported data from the DataTable to the user's clipboard. To let the user know that something has happened the button will show a message on the page stating that
this has occurred.</p>
<p>The message shown to the end user can be customised using the <a href="//datatables.net/reference/option/language"><code class="option" title=
"DataTables initialisation option">language</code></a> configuration option of DataTables. Specifically the <code>buttons.copyTitle</code> and
<code>buttons.copyInfo</code> options can be set.</p>
<p>This example uses these parameters to set French language strings for the copy message.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copyFlash'
],
language: {
buttons: {
copyTitle: 'Copier au clipboard',
copySuccess: {
_: 'Copiés %d rangs',
1: 'Copié 1 rang'
}
}
}
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="../../js/buttons.flash.js">../../js/buttons.flash.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="../html5/simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="../html5/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../html5/filename.html">File name</a>
</li>
<li>
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../html5/columns.html">Column selectors</a>
</li>
<li>
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="../html5/pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="../html5/pdfImage.html">PDF - image</a>
</li>
<li>
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="../html5/customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Flash data export</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">Flash export buttons</a>
</li>
<li>
<a href="./tsv.html">Tab separated values</a>
</li>
<li>
<a href="./filename.html">File name</a>
</li>
<li class="active">
<a href="./copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="./pdfMessage.html">PDF message</a>
</li>
<li>
<a href="./pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="./hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="./swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,845 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - File name</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.flash.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'excelFlash',
filename: 'Data export'
},
{
extend: 'pdfFlash',
filename: 'Data export'
}
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>File name</span></h1>
<div class="info">
<p>By default the name of the file created by the <a href="//datatables.net/reference/button/excelFlash"><code class="button" title=
"Buttons button type">excelFlash</code></a>, <a href="//datatables.net/reference/button/csvFlash"><code class="button" title=
"Buttons button type">csvFlash</code></a> and <a href="//datatables.net/reference/button/pdfFlash"><code class="button" title=
"Buttons button type">pdfFlash</code></a> button types will automatically be taken from the document's <code class="tag" title="HTML tag">title</code> element. It
is also possible to set the file name to a specific value using the <code>filename</code> option of these three button types.</p>
<p>This example shows the <code>filename</code> option being set for the <a href="//datatables.net/reference/button/excelFlash"><code class="button" title=
"Buttons button type">excelFlash</code></a> and <a href="//datatables.net/reference/button/pdfFlash"><code class="button" title=
"Buttons button type">pdfFlash</code></a> buttons.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'excelFlash',
filename: 'Data export'
},
{
extend: 'pdfFlash',
filename: 'Data export'
}
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="../../js/buttons.flash.js">../../js/buttons.flash.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="../html5/simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="../html5/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../html5/filename.html">File name</a>
</li>
<li>
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../html5/columns.html">Column selectors</a>
</li>
<li>
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="../html5/pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="../html5/pdfImage.html">PDF - image</a>
</li>
<li>
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="../html5/customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Flash data export</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">Flash export buttons</a>
</li>
<li>
<a href="./tsv.html">Tab separated values</a>
</li>
<li class="active">
<a href="./filename.html">File name</a>
</li>
<li>
<a href="./copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="./pdfMessage.html">PDF message</a>
</li>
<li>
<a href="./pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="./hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="./swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,871 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Hidden initialisation</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
button {
margin: 1em;
padding: 1em;
}
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.flash.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').wrap('<div id="hide" style="display:none"/>');
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copyFlash',
'csvFlash',
'excelFlash',
'pdfFlash'
]
} );
$('#vis').one( 'click', function () {
$('#hide').css( 'display', 'block' );
} );
$('#resize').on( 'click', function () {
$.fn.dataTable.tables( { visible: true, api: true } ).buttons.resize();
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Hidden initialisation</span></h1>
<div class="info">
<p>When Flash buttons are created the Flash movie clip inside of them (which provides the export action) is automatically sized to fit the button. However, if the
table is initialised while hidden the buttons will have zero height and width. As a result, when the table is made visible the Flash movies must be resized to fit
the buttons. This is done using the <a href="//datatables.net/reference/api/buttons.resize()"><code class="api" title=
"Buttons API method">buttons.resize()</code></a> method (note that this method is only available when the Flash export buttons plug-in for Buttons is
installed).</p>
<p>This example shows a table that is initially hidden. If you make it visible and click the export buttons nothing will happen. Click the <em>Resize buttons</em>
option and the export buttons will start to operate.</p>
<p>A resize is often required when the table is hidden in a tab when initialised - for example if using Bootstrap tabs you might use:</p>
<pre>
<code class="multiline language-js">$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$.fn.dataTable.tables( { visible: true, api: true } ).buttons.resize();
})
</code>
</pre>
</div><button id="vis">Make table visible</button><button id="resize">Resize buttons</button>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').wrap('&lt;div id=&quot;hide&quot; style=&quot;display:none&quot;/&gt;');
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copyFlash',
'csvFlash',
'excelFlash',
'pdfFlash'
]
} );
$('#vis').one( 'click', function () {
$('#hide').css( 'display', 'block' );
} );
$('#resize').on( 'click', function () {
$.fn.dataTable.tables( { visible: true, api: true } ).buttons.resize();
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="../../js/buttons.flash.js">../../js/buttons.flash.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css">button {
margin: 1em;
padding: 1em;
}</code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="../html5/simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="../html5/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../html5/filename.html">File name</a>
</li>
<li>
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../html5/columns.html">Column selectors</a>
</li>
<li>
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="../html5/pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="../html5/pdfImage.html">PDF - image</a>
</li>
<li>
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="../html5/customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Flash data export</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">Flash export buttons</a>
</li>
<li>
<a href="./tsv.html">Tab separated values</a>
</li>
<li>
<a href="./filename.html">File name</a>
</li>
<li>
<a href="./copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="./pdfMessage.html">PDF message</a>
</li>
<li>
<a href="./pdfPage.html">Page size and orientation</a>
</li>
<li class="active">
<a href="./hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="./swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,75 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<title>Buttons examples - Flash export buttons</title>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Flash export buttons</span></h1>
<div class="info">
<p>The Flash export buttons provide an option for legacy browsers (IE9-) to create and save files on the client-side, without any server interaction required.</p>
<p>The HTML5 button types are preferred over the Flash buttons as they do not require Adobe Flash and are generally more configurable, however, not all browsers
provide the functionality required for those buttons.</p>
<p>If making use of these buttons in browsers which do not have Flash installed and enabled these buttons will not appear on the end user's page (no errors will be
generated).</p>
<p>The examples in this section explore the options available for the Flash export buttons.</p>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<div class="toc">
<div class="toc-group">
<h3><a href="./index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="./simple.html">Flash export buttons</a>
</li>
<li>
<a href="./tsv.html">Tab separated values</a>
</li>
<li>
<a href="./filename.html">File name</a>
</li>
<li>
<a href="./copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="./pdfMessage.html">PDF message</a>
</li>
<li>
<a href="./pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="./hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="./swfPath.html">SWF file location</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,833 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - PDF message</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.flash.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'pdfFlash',
message: 'PDF created by Buttons for DataTables.'
}
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>PDF message</span></h1>
<div class="info">
<p>It can often be useful to include description text in the print view to provide summary information about the table that will be included in the generated PDF.
The <code>message</code> option of the <a href="//datatables.net/reference/button/pdfFlash"><code class="button" title="Buttons button type">pdfFlash</code></a>
button type provides this ability. It is a simple string and cannot contain any formatting information. If you require control over the styling of the exported
PDF, please refer to the <a href="//datatables.net/reference/button/pdfHtml5"><code class="button" title="Buttons button type">pdfHtml5</code></a> button type.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'pdfFlash',
message: 'PDF created by Buttons for DataTables.'
}
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="../../js/buttons.flash.js">../../js/buttons.flash.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="../html5/simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="../html5/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../html5/filename.html">File name</a>
</li>
<li>
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../html5/columns.html">Column selectors</a>
</li>
<li>
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="../html5/pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="../html5/pdfImage.html">PDF - image</a>
</li>
<li>
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="../html5/customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Flash data export</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">Flash export buttons</a>
</li>
<li>
<a href="./tsv.html">Tab separated values</a>
</li>
<li>
<a href="./filename.html">File name</a>
</li>
<li>
<a href="./copyi18n.html">Copy button internationalisation</a>
</li>
<li class="active">
<a href="./pdfMessage.html">PDF message</a>
</li>
<li>
<a href="./pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="./hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="./swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,837 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Page size and orientation</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.flash.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'pdfFlash',
orientation: 'landscape',
pageSize: 'LEGAL'
}
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Page size and orientation</span></h1>
<div class="info">
<p>The page size and orientation of the <a href="//datatables.net/reference/button/pdfFlash"><code class="button" title="Buttons button type">pdfFlash</code></a>
button type can be set using the <code>orientation</code> and <code>pageSize</code> options. By default these values are <code class="string" title=
"String">portrait</code> and <code class="string" title="String">A4</code>, but are easily customised as shown in this example which uses a landscape layout and US
legal paper size.</p>
<p>For a full list of the options available for these parameters, please refer to the <a href="//datatables.net/reference/button/pdfFlash"><code class="button"
title="Buttons button type">pdfFlash</code></a> documentation.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'pdfFlash',
orientation: 'landscape',
pageSize: 'LEGAL'
}
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="../../js/buttons.flash.js">../../js/buttons.flash.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="../html5/simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="../html5/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../html5/filename.html">File name</a>
</li>
<li>
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../html5/columns.html">Column selectors</a>
</li>
<li>
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="../html5/pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="../html5/pdfImage.html">PDF - image</a>
</li>
<li>
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="../html5/customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Flash data export</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">Flash export buttons</a>
</li>
<li>
<a href="./tsv.html">Tab separated values</a>
</li>
<li>
<a href="./filename.html">File name</a>
</li>
<li>
<a href="./copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="./pdfMessage.html">PDF message</a>
</li>
<li class="active">
<a href="./pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="./hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="./swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,852 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Flash export buttons</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.flash.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copyFlash',
'csvFlash',
'excelFlash',
'pdfFlash'
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Flash export buttons</span></h1>
<div class="info">
<p>The Flash export buttons plug-in for Buttons provides four export buttons:</p>
<ul class="markdown">
<li>
<a href="//datatables.net/reference/button/copyFlash"><code class="button" title="Buttons button type">copyFlash</code></a> - Copy to clipboard
</li>
<li>
<a href="//datatables.net/reference/button/csvFlash"><code class="button" title="Buttons button type">csvFlash</code></a> - Save to CSV file
</li>
<li>
<a href="//datatables.net/reference/button/excelFlash"><code class="button" title="Buttons button type">excelFlash</code></a> - Save to XLSX file
</li>
<li>
<a href="//datatables.net/reference/button/pdfFlash"><code class="button" title="Buttons button type">pdfFlash</code></a> - Save to PDF file
</li>
</ul>
<p>This example demonstrates these four button types with their default options. The other examples in this section demonstrate some of the options available.</p>
<p>Please note that the HTML5 button types are preferred over the Flash buttons as they do not require Adobe Flash and are generally more configurable, however,
not all browsers provide the functionality required for those buttons.</p>
<p>The <a href="//datatables.net/reference/button/copy"><code class="button" title="Buttons button type">copy</code></a>, <a href=
"//datatables.net/reference/button/excel"><code class="button" title="Buttons button type">excel</code></a>, <a href=
"//datatables.net/reference/button/csv"><code class="button" title="Buttons button type">csv</code></a> and <a href=
"//datatables.net/reference/button/pdf"><code class="button" title="Buttons button type">pdf</code></a> button types may also use the HTML5 button types noted
here, providing a Flash fallback for older browsers (IE9-).</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copyFlash',
'csvFlash',
'excelFlash',
'pdfFlash'
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="../../js/buttons.flash.js">../../js/buttons.flash.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="../html5/simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="../html5/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../html5/filename.html">File name</a>
</li>
<li>
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../html5/columns.html">Column selectors</a>
</li>
<li>
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="../html5/pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="../html5/pdfImage.html">PDF - image</a>
</li>
<li>
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="../html5/customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Flash data export</a></h3>
<ul class="toc active">
<li class="active">
<a href="./simple.html">Flash export buttons</a>
</li>
<li>
<a href="./tsv.html">Tab separated values</a>
</li>
<li>
<a href="./filename.html">File name</a>
</li>
<li>
<a href="./copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="./pdfMessage.html">PDF message</a>
</li>
<li>
<a href="./pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="./hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="./swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,837 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - SWF file location</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.flash.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$.fn.dataTable.Buttons.swfPath = '../../swf/flashExport.swf';
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copyFlash',
'csvFlash',
'excelFlash',
'pdfFlash'
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>SWF file location</span></h1>
<div class="info">
<p>The Flash export buttons use a Flash <code class="path" title="File path">swf</code> file to provide their export options. By default, for convenience, the SWF
is loaded from the <a href="//cdn.datatables.net">DataTables CDN</a>. However, you can easily set the location of the file to be loaded using the
<code>$.fn.dataTable.Buttons.swfPath</code> parameter.</p>
<p>This example shows the <code class="path" title="File path">swf</code> file being given a specific URL that it should be loaded from.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$.fn.dataTable.Buttons.swfPath = '../../swf/flashExport.swf';
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copyFlash',
'csvFlash',
'excelFlash',
'pdfFlash'
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="../../js/buttons.flash.js">../../js/buttons.flash.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="../html5/simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="../html5/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../html5/filename.html">File name</a>
</li>
<li>
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../html5/columns.html">Column selectors</a>
</li>
<li>
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="../html5/pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="../html5/pdfImage.html">PDF - image</a>
</li>
<li>
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="../html5/customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Flash data export</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">Flash export buttons</a>
</li>
<li>
<a href="./tsv.html">Tab separated values</a>
</li>
<li>
<a href="./filename.html">File name</a>
</li>
<li>
<a href="./copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="./pdfMessage.html">PDF message</a>
</li>
<li>
<a href="./pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="./hidden.html">Hidden initialisation</a>
</li>
<li class="active">
<a href="./swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,839 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Tab separated values</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.flash.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copyFlash',
{
extend: 'csvFlash',
fieldSeparator: '\t',
extension: '.tsv'
}
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Tab separated values</span></h1>
<div class="info">
<p>The <a href="//datatables.net/reference/button/copyFlash"><code class="button" title="Buttons button type">copyFlash</code></a> and <a href=
"//datatables.net/reference/button/csvFlash"><code class="button" title="Buttons button type">csvFlash</code></a> buttons have the option to specify the character
(or more generally a full string) that separates the values between fields. By default this is a tab character for the copy button, but the <em>Comma</em>
Separated Values button uses a comma.</p>
<p>The <code>fieldSeparator</code> option is used to specify the field separator - in this example the exported file is a tab separated values file. The file
extension has also been set to reflect this, although that is optional as most spreadsheet applications will read TSV files without issue.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copyFlash',
{
extend: 'csvFlash',
fieldSeparator: '\t',
extension: '.tsv'
}
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="../../js/buttons.flash.js">../../js/buttons.flash.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="../html5/simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="../html5/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../html5/filename.html">File name</a>
</li>
<li>
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../html5/columns.html">Column selectors</a>
</li>
<li>
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="../html5/pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="../html5/pdfImage.html">PDF - image</a>
</li>
<li>
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="../html5/customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Flash data export</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">Flash export buttons</a>
</li>
<li class="active">
<a href="./tsv.html">Tab separated values</a>
</li>
<li>
<a href="./filename.html">File name</a>
</li>
<li>
<a href="./copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="./pdfMessage.html">PDF message</a>
</li>
<li>
<a href="./pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="./hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="./swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,888 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Column selectors</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js">
</script>
<script type="text/javascript" language="javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js">
</script>
<script type="text/javascript" language="javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.html5.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.colVis.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'copyHtml5',
exportOptions: {
columns: [ 0, ':visible' ]
}
},
{
extend: 'excelHtml5',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'pdfHtml5',
exportOptions: {
columns: [ 0, 1, 2, 5 ]
}
},
'colvis'
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Column selectors</span></h1>
<div class="info">
<p>All of the data export buttons have a <code>exportOptions</code> option which can be used to specify information about what data should be exported and how. The
options given for this parameter are passed directly to the <a href="//datatables.net/reference/api/buttons.exportData()"><code class="api" title=
"Buttons API method">buttons.exportData()</code></a> method to obtain the required data.</p>
<p>One of the most commonly used is the <code>columns</code> option which defines the columns that should be used as part of the export. This is given as a
<a href="//datatables.net/reference/type/column-selector"><code class="type" title="DataTables parameter type">column-selector</code></a>, making it simple to tell
it if you want only visible columns, or a mix of the columns available.</p>
<p>In this example the copy button will export column index 0 and all visible columns, the Excel button will export only the visible columns and the PDF button
will export column indexes 0, 1, 2 and 5 only.</p>
<p>Column visibility controls are also included so you can change the columns easily and see the effect of the export options.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'copyHtml5',
exportOptions: {
columns: [ 0, ':visible' ]
}
},
{
extend: 'excelHtml5',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'pdfHtml5',
exportOptions: {
columns: [ 0, 1, 2, 5 ]
}
},
'colvis'
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js">//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js</a>
</li>
<li>
<a href="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js">//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js</a>
</li>
<li>
<a href="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js">//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js</a>
</li>
<li>
<a href="../../js/buttons.html5.js">../../js/buttons.html5.js</a>
</li>
<li>
<a href="../../js/buttons.colVis.js">../../js/buttons.colVis.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">HTML 5 data export</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="./tsv.html">Tab separated values</a>
</li>
<li>
<a href="./filename.html">File name</a>
</li>
<li>
<a href="./copyi18n.html">Copy button internationalisation</a>
</li>
<li class="active">
<a href="./columns.html">Column selectors</a>
</li>
<li>
<a href="./outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="./outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="./excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="./excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="./excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="./pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="./pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="./pdfImage.html">PDF - image</a>
</li>
<li>
<a href="./pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="./customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,855 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Copy button internationalisation</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.html5.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copyHtml5'
],
language: {
buttons: {
copyTitle: 'Ajouté au presse-papiers',
copyKeys: 'Appuyez sur <i>ctrl</i> ou <i>\u2318</i> + <i>C</i> pour copier les données du tableau à votre presse-papiers. <br><br>Pour annuler, cliquez sur ce message ou appuyez sur Echap.',
copySuccess: {
_: 'Copiés %d rangs',
1: 'Copié 1 rang'
}
}
}
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Copy button internationalisation</span></h1>
<div class="info">
<p>The <a href="//datatables.net/reference/button/copyHtml5"><code class="button" title="Buttons button type">copyHtml5</code></a> button type operates by
immediately copying the content's of the DataTable to the user's clipboard via the <code>execCommand</code> method. For older browsers that don't support this
ability, the table's data is copied to a hidden text area and the user is invited to use their system clipboard to copy the data (i.e. <em>ctrl/cmd + c</em>).</p>
<p>The messages shown to the end user can be customised using the <a href="//datatables.net/reference/option/language"><code class="option" title=
"DataTables initialisation option">language</code></a> configuration option of DataTables. The following options are available:</p>
<ul class="markdown">
<li><code>language.buttons.copyTitle</code> - the title text of the info box</li>
<li><code>language.buttons.copySuccess</code> - message to display when the copy is complete</li>
<li><code>language.buttons.copyKey</code> - instructions on how to copy to clipboard for older browsers.</li>
</ul>
<p>This example uses these parameters to set French language strings for the copy message (with apologies to our native language French speaking friends! This is
Google translated text - if you have an better translation, please let me know!).</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copyHtml5'
],
language: {
buttons: {
copyTitle: 'Ajouté au presse-papiers',
copyKeys: 'Appuyez sur &lt;i&gt;ctrl&lt;/i&gt; ou &lt;i&gt;\u2318&lt;/i&gt; + &lt;i&gt;C&lt;/i&gt; pour copier les données du tableau à votre presse-papiers. &lt;br&gt;&lt;br&gt;Pour annuler, cliquez sur ce message ou appuyez sur Echap.',
copySuccess: {
_: 'Copiés %d rangs',
1: 'Copié 1 rang'
}
}
}
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="../../js/buttons.html5.js">../../js/buttons.html5.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">HTML 5 data export</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="./tsv.html">Tab separated values</a>
</li>
<li>
<a href="./filename.html">File name</a>
</li>
<li class="active">
<a href="./copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="./columns.html">Column selectors</a>
</li>
<li>
<a href="./outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="./outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="./excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="./excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="./excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="./pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="./pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="./pdfImage.html">PDF - image</a>
</li>
<li>
<a href="./pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="./customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,851 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Custom file (JSON)</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.html5.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
text: 'JSON',
action: function ( e, dt, button, config ) {
var data = dt.buttons.exportData();
$.fn.dataTable.fileSave(
new Blob( [ JSON.stringify( data ) ] ),
'Export.json'
);
}
}
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Custom file (JSON)</span></h1>
<div class="info">
<p>Buttons uses the excellent <a href="https://github.com/eligrey/FileSaver.js/">FileSaver.js</a> by Eli Grey in order to be able to create and download files on
the client-side (i.e. for the CSV and Excel button types). Buttons' built in FileSaver.js is exposed via <a href=
"//datatables.net/reference/api/%24.fn.dataTable.fileSave()"><code class="api" title="Buttons API method">$.fn.dataTable.fileSave()</code></a> when the HTML5
button types file is loaded, and it can be used to easily create your own custom files.</p>
<p>This example makes use of <a href="//datatables.net/reference/api/buttons.exportData()"><code class="api" title=
"Buttons API method">buttons.exportData()</code></a> to get data from the host DataTable and then create a file with JSON data in it using the <a href=
"//datatables.net/reference/api/%24.fn.dataTable.fileSave()"><code class="api" title="Buttons API method">$.fn.dataTable.fileSave()</code></a> method.</p>
<p>Please note that Safari and IE9- are not currently supported. Safari support should be available with the next version of Safari.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
text: 'JSON',
action: function ( e, dt, button, config ) {
var data = dt.buttons.exportData();
$.fn.dataTable.fileSave(
new Blob( [ JSON.stringify( data ) ] ),
'Export.json'
);
}
}
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="../../js/buttons.html5.js">../../js/buttons.html5.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">HTML 5 data export</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="./tsv.html">Tab separated values</a>
</li>
<li>
<a href="./filename.html">File name</a>
</li>
<li>
<a href="./copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="./columns.html">Column selectors</a>
</li>
<li>
<a href="./outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="./outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="./excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="./excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="./excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="./pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="./pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="./pdfImage.html">PDF - image</a>
</li>
<li>
<a href="./pdfOpen.html">PDF - open in new window</a>
</li>
<li class="active">
<a href="./customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,848 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Excel - Customise borders</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.html5.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [ {
extend: 'excelHtml5',
customize: function ( xlsx ){
var sheet = xlsx.xl.worksheets['sheet1.xml'];
// jQuery selector to add a border
$('row c[r*="10"]', sheet).attr( 's', '25' );
}
} ]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Excel - Customise borders</span></h1>
<div class="info">
<p>The Excel export button saves to an XLSX file and the data can be customised before exporting the file using the <code>customize</code> method of the <a href=
"//datatables.net/reference/button/excelHtml5"><code class="button" title="Buttons button type">excelHtml5</code></a> button type.</p>
<p>This example demonstrates how to manipulate the file using this method to add a styling attribute to a row in the XML used to create the XSLX file. The object
passed into the <code>customize</code> method contains the XSLX's file structure and the worksheet can be accessed as shown. A jQuery selector is then used to
select the cells in row 10 and a border added. More complex logic (such as conditionally adding borders based on cell content) could of course be used.</p>
<p>The style added (index <code>25</code> in this case) is defined by the default styles included by Buttons. The full list of styles available and further
information about the <code>customize</code> method are detailed in the <a href="//datatables.net/reference/button/excelHtml5"><code class="button" title=
"Buttons button type">excelHtml5</code></a> documentation.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [ {
extend: 'excelHtml5',
customize: function ( xlsx ){
var sheet = xlsx.xl.worksheets['sheet1.xml'];
// jQuery selector to add a border
$('row c[r*=&quot;10&quot;]', sheet).attr( 's', '25' );
}
} ]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js">//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js</a>
</li>
<li>
<a href="../../js/buttons.html5.js">../../js/buttons.html5.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">HTML 5 data export</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="./tsv.html">Tab separated values</a>
</li>
<li>
<a href="./filename.html">File name</a>
</li>
<li>
<a href="./copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="./columns.html">Column selectors</a>
</li>
<li>
<a href="./outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="./outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="./excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="./excelCellShading.html">Excel - Cell background</a>
</li>
<li class="active">
<a href="./excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="./pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="./pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="./pdfImage.html">PDF - image</a>
</li>
<li>
<a href="./pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="./customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,857 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Excel - Cell background</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.html5.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable({
dom: 'Bfrtip',
buttons: [{
extend: 'excelHtml5',
customize: function(xlsx) {
var sheet = xlsx.xl.worksheets['sheet1.xml'];
// Loop over the cells in column `F`
$('row c[r^="F"]', sheet).each( function () {
// Get the value and strip the non numeric characters
if ( $('is t', this).text().replace(/[^\d]/g, '') * 1 >= 500000 ) {
$(this).attr( 's', '20' );
}
});
}
}]
});
});
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Excel - Cell background</span></h1>
<div class="info">
<p>The Excel export button saves to an XLSX file and the data can be customised before exporting the file using the <code>customize</code> method of the <a href=
"//datatables.net/reference/button/excelHtml5"><code class="button" title="Buttons button type">excelHtml5</code></a> button type.</p>
<p>This example demonstrates how the created file can be customised by giving any cell in the <em>Salary</em> column that has a value greater than $500,000 a blue
background.</p>
<p>The style added (index <code>20</code> in this case) is defined by the default styles included by Buttons. The full list of styles available and further
information about the <code>customize</code> method are detailed in the <a href="//datatables.net/reference/button/excelHtml5"><code class="button" title=
"Buttons button type">excelHtml5</code></a> documentation.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable({
dom: 'Bfrtip',
buttons: [{
extend: 'excelHtml5',
customize: function(xlsx) {
var sheet = xlsx.xl.worksheets['sheet1.xml'];
// Loop over the cells in column `F`
$('row c[r^=&quot;F&quot;]', sheet).each( function () {
// Get the value and strip the non numeric characters
if ( $('is t', this).text().replace(/[^\d]/g, '') * 1 &gt;= 500000 ) {
$(this).attr( 's', '20' );
}
});
}
}]
});
});</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js">//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js</a>
</li>
<li>
<a href="../../js/buttons.html5.js">../../js/buttons.html5.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">HTML 5 data export</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="./tsv.html">Tab separated values</a>
</li>
<li>
<a href="./filename.html">File name</a>
</li>
<li>
<a href="./copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="./columns.html">Column selectors</a>
</li>
<li>
<a href="./outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="./outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="./excelTextBold.html">Excel - Bold text</a>
</li>
<li class="active">
<a href="./excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="./excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="./pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="./pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="./pdfImage.html">PDF - image</a>
</li>
<li>
<a href="./pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="./customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,846 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Excel - Bold text</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.html5.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready( function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [ {
extend: 'excelHtml5',
customize: function( xlsx ) {
var sheet = xlsx.xl.worksheets['sheet1.xml'];
$('row c[r^="C"]', sheet).attr( 's', '2' );
}
} ]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Excel - Bold text</span></h1>
<div class="info">
<p>The Excel export button saves to an XLSX file and the data can be customised before exporting the file using the <code>customize</code> method of the <a href=
"//datatables.net/reference/button/excelHtml5"><code class="button" title="Buttons button type">excelHtml5</code></a> button type.</p>
<p>This example demonstrates how to manipulate the generated file by making the text in the third column (<em>C</em>) bold using the styling options that are built
into the created spreadsheet. jQuery is used to select the required cells (XSLX files are just a collection of XML files after all!) and then add a styling
attribute.</p>
<p>The style added (index <code>2</code> in this case) is defined by the default styles included by Buttons. The full list of styles available and further
information about the <code>customize</code> method are detailed in the <a href="//datatables.net/reference/button/excelHtml5"><code class="button" title=
"Buttons button type">excelHtml5</code></a> documentation.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready( function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [ {
extend: 'excelHtml5',
customize: function( xlsx ) {
var sheet = xlsx.xl.worksheets['sheet1.xml'];
$('row c[r^=&quot;C&quot;]', sheet).attr( 's', '2' );
}
} ]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js">//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js</a>
</li>
<li>
<a href="../../js/buttons.html5.js">../../js/buttons.html5.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">HTML 5 data export</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="./tsv.html">Tab separated values</a>
</li>
<li>
<a href="./filename.html">File name</a>
</li>
<li>
<a href="./copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="./columns.html">Column selectors</a>
</li>
<li>
<a href="./outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="./outputFormat-function.html">Format output data - export options</a>
</li>
<li class="active">
<a href="./excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="./excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="./excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="./pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="./pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="./pdfImage.html">PDF - image</a>
</li>
<li>
<a href="./pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="./customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,860 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - File name</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js">
</script>
<script type="text/javascript" language="javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js">
</script>
<script type="text/javascript" language="javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.html5.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'excelHtml5',
title: 'Data export'
},
{
extend: 'pdfHtml5',
title: 'Data export'
}
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>File name</span></h1>
<div class="info">
<p>By default the name of the file created by the <a href="//datatables.net/reference/button/excelHtml5"><code class="button" title=
"Buttons button type">excelHtml5</code></a>, <a href="//datatables.net/reference/button/csvHtml5"><code class="button" title=
"Buttons button type">csvHtml5</code></a> and <a href="//datatables.net/reference/button/pdfHtml5"><code class="button" title=
"Buttons button type">pdfHtml5</code></a> button types will automatically be taken from the document's <code class="tag" title="HTML tag">title</code> element. It
is also possible to set the file name to a specific value using the <code>title</code> option of these three button types.</p>
<p>This example shows the <code>title</code> option being set for the <a href="//datatables.net/reference/button/excelHtml5"><code class="button" title=
"Buttons button type">excelHtml5</code></a> and <a href="//datatables.net/reference/button/pdfHtml5"><code class="button" title=
"Buttons button type">pdfHtml5</code></a> buttons.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'excelHtml5',
title: 'Data export'
},
{
extend: 'pdfHtml5',
title: 'Data export'
}
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js">//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js</a>
</li>
<li>
<a href="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js">//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js</a>
</li>
<li>
<a href="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js">//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js</a>
</li>
<li>
<a href="../../js/buttons.html5.js">../../js/buttons.html5.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">HTML 5 data export</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="./tsv.html">Tab separated values</a>
</li>
<li class="active">
<a href="./filename.html">File name</a>
</li>
<li>
<a href="./copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="./columns.html">Column selectors</a>
</li>
<li>
<a href="./outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="./outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="./excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="./excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="./excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="./pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="./pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="./pdfImage.html">PDF - image</a>
</li>
<li>
<a href="./pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="./customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,95 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<title>Buttons examples - HTML5 export buttons</title>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>HTML5 export buttons</span></h1>
<div class="info">
<p>The HTML5 export buttons make use of the local file saving features of modern browsers (IE10+, Chrome, Safari, Firefox and Opera) to create files on the
client-side and then download them without any server interaction required.</p>
<p>Browsers which do not support the required APIs for these button types have the option of using the Flash button alternatives, otherwise the buttons will not
appear on the end user's page (no errors will be generated if this is the case).</p>
<p>The examples in this section explore the options available for the HTML5 export buttons.</p>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<div class="toc">
<div class="toc-group">
<h3><a href="./index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="./simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="./tsv.html">Tab separated values</a>
</li>
<li>
<a href="./filename.html">File name</a>
</li>
<li>
<a href="./copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="./columns.html">Column selectors</a>
</li>
<li>
<a href="./outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="./outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="./excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="./excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="./excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="./pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="./pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="./pdfImage.html">PDF - image</a>
</li>
<li>
<a href="./pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="./customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,450 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Format output data - export options</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js">
</script>
<script type="text/javascript" language="javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js">
</script>
<script type="text/javascript" language="javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.html5.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
var buttonCommon = {
exportOptions: {
format: {
body: function ( data, column, row ) {
// Strip $ from salary column to make it numeric
return column === 5 ?
data.replace( /[$,]/g, '' ) :
data;
}
}
}
};
$('#example').DataTable( {
ajax: '../../../../examples/ajax/data/objects.txt',
columns: [
{ data: 'name' },
{ data: 'position' },
{ data: 'office' },
{ data: 'extn' },
{ data: 'start_date' },
{ data: 'salary' }
],
dom: 'Bfrtip',
buttons: [
$.extend( true, {}, buttonCommon, {
extend: 'copyHtml5'
} ),
$.extend( true, {}, buttonCommon, {
extend: 'excelHtml5'
} ),
$.extend( true, {}, buttonCommon, {
extend: 'pdfHtml5'
} )
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Format output data - export options</span></h1>
<div class="info">
<p>Buttons has two different methods that can be used to format the data exported differently from the data that is shown in the table: <a href=
"outputFormat-orthogonal.html">orthogonal options</a> and formatting functions as shown in this example. They both achieve basically the same thing in different
ways: namely modification of the output data.</p>
<p>Formatting functions for export buttons are specified by assigning a function to one (or more) of the <code>format</code> object of the
<code>exportOptions</code> object. Three formatting functions can be used: <code>header</code>, <code>footer</code> and <code>body</code>. This is the primarily
advantage of using formatting functions over orthogonal data - the header and footer can also be formatted using this method (of course orthogonal and this
formatting function method can both be used together if you prefer!).</p>
<p>This example uses a <code>body</code> formatting function to remove the <code>$</code> and <code>,</code> characters from the final column to make it a numeric
value in the output data. Since this is common to all three export buttons used, the function is placed into an object that is reused by each button - simply to
save repeating the same code! This is not required, but it can be a useful technique.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
var buttonCommon = {
exportOptions: {
format: {
body: function ( data, column, row ) {
// Strip $ from salary column to make it numeric
return column === 5 ?
data.replace( /[$,]/g, '' ) :
data;
}
}
}
};
$('#example').DataTable( {
ajax: '../../../../examples/ajax/data/objects.txt',
columns: [
{ data: 'name' },
{ data: 'position' },
{ data: 'office' },
{ data: 'extn' },
{ data: 'start_date' },
{ data: 'salary' }
],
dom: 'Bfrtip',
buttons: [
$.extend( true, {}, buttonCommon, {
extend: 'copyHtml5'
} ),
$.extend( true, {}, buttonCommon, {
extend: 'excelHtml5'
} ),
$.extend( true, {}, buttonCommon, {
extend: 'pdfHtml5'
} )
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js">//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js</a>
</li>
<li>
<a href="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js">//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js</a>
</li>
<li>
<a href="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js">//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js</a>
</li>
<li>
<a href="../../js/buttons.html5.js">../../js/buttons.html5.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">HTML 5 data export</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="./tsv.html">Tab separated values</a>
</li>
<li>
<a href="./filename.html">File name</a>
</li>
<li>
<a href="./copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="./columns.html">Column selectors</a>
</li>
<li>
<a href="./outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li class="active">
<a href="./outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="./excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="./excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="./excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="./pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="./pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="./pdfImage.html">PDF - image</a>
</li>
<li>
<a href="./pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="./customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,439 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Format output data - orthogonal data</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js">
</script>
<script type="text/javascript" language="javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js">
</script>
<script type="text/javascript" language="javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.html5.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
ajax: '../../../../examples/ajax/data/objects.txt',
columns: [
{ data: 'name' },
{ data: 'position' },
{ data: 'office' },
{ data: 'extn' },
{ data: 'start_date' },
{ data: 'salary', render: function (data, type, row) {
return type === 'export' ?
data.replace( /[$,]/g, '' ) :
data;
} }
],
dom: 'Bfrtip',
buttons: [
{
extend: 'copyHtml5',
exportOptions: { orthogonal: 'export' }
},
{
extend: 'excelHtml5',
exportOptions: { orthogonal: 'export' }
},
{
extend: 'pdfHtml5',
exportOptions: { orthogonal: 'export' }
}
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Format output data - orthogonal data</span></h1>
<div class="info">
<p>Buttons has two different methods that can be used to format the data exported differently from the data that is shown in the table: orthogonal options as shown
in this example and <a href="outputFormat-function.html">formatting functions</a>. They both achieve basically the same thing in different ways: namely
modification of the output data.</p>
<p>The orthogonal options are based upon <a href="//datatables.net/manual/orthogonal-data">DataTables' support for orthogonal data</a> - specifically being able to
use <a href="//datatables.net/reference/option/columns.render"><code class="option" title="DataTables initialisation option">columns.render</code></a> as an object
for function to give DataTables different data for the different actions it needs to take.</p>
<p>By default Buttons will ask for the same data that is shown in the table (<code class="string" title="String">display</code>) but the <code>orthogonal</code>
option of the <code>exportOptions</code> parameter can be used to specify a different data point. In this example the orthogonal data for the exported buttons is
set to be <code>export</code> and the <a href="//datatables.net/reference/option/columns.render"><code class="option" title=
"DataTables initialisation option">columns.render</code></a> function will return a deformatted string (stripping the <code>$</code> and <code>,</code> characters
from the final column to make it a numeric value).</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
ajax: '../../../../examples/ajax/data/objects.txt',
columns: [
{ data: 'name' },
{ data: 'position' },
{ data: 'office' },
{ data: 'extn' },
{ data: 'start_date' },
{ data: 'salary', render: function (data, type, row) {
return type === 'export' ?
data.replace( /[$,]/g, '' ) :
data;
} }
],
dom: 'Bfrtip',
buttons: [
{
extend: 'copyHtml5',
exportOptions: { orthogonal: 'export' }
},
{
extend: 'excelHtml5',
exportOptions: { orthogonal: 'export' }
},
{
extend: 'pdfHtml5',
exportOptions: { orthogonal: 'export' }
}
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js">//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js</a>
</li>
<li>
<a href="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js">//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js</a>
</li>
<li>
<a href="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js">//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js</a>
</li>
<li>
<a href="../../js/buttons.html5.js">../../js/buttons.html5.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">HTML 5 data export</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="./tsv.html">Tab separated values</a>
</li>
<li>
<a href="./filename.html">File name</a>
</li>
<li>
<a href="./copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="./columns.html">Column selectors</a>
</li>
<li class="active">
<a href="./outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="./outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="./excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="./excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="./excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="./pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="./pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="./pdfImage.html">PDF - image</a>
</li>
<li>
<a href="./pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="./customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,844 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - PDF - message</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js">
</script>
<script type="text/javascript" language="javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.html5.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'pdfHtml5',
message: 'PDF created by PDFMake with Buttons for DataTables.'
}
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>PDF - message</span></h1>
<div class="info">
<p>It can often be useful to include description text in the print view to provide summary information about the table that will be included in the generated PDF.
The <code>message</code> option of the <a href="//datatables.net/reference/button/pdfHtml5"><code class="button" title="Buttons button type">pdfHtml5</code></a>
button type provides this ability.</p>
<p>In the example here a simple string is used - for more complex options, please see the <a href="pdfImage.html">PDF image</a> example for complete customisation
control.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'pdfHtml5',
message: 'PDF created by PDFMake with Buttons for DataTables.'
}
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js">//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js</a>
</li>
<li>
<a href="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js">//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js</a>
</li>
<li>
<a href="../../js/buttons.html5.js">../../js/buttons.html5.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">HTML 5 data export</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="./tsv.html">Tab separated values</a>
</li>
<li>
<a href="./filename.html">File name</a>
</li>
<li>
<a href="./copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="./columns.html">Column selectors</a>
</li>
<li>
<a href="./outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="./outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="./excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="./excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="./excelBorder.html">Excel - Customise borders</a>
</li>
<li class="active">
<a href="./pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="./pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="./pdfImage.html">PDF - image</a>
</li>
<li>
<a href="./pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="./customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,840 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - PDF - open in new window</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js">
</script>
<script type="text/javascript" language="javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.html5.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'pdfHtml5',
download: 'open'
}
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>PDF - open in new window</span></h1>
<div class="info">
<p>Please refer to the <a href="http://pdfmake.org/#/gettingstarted">PDFMaker documentation</a> for full details of how the PDF can be customised.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'pdfHtml5',
download: 'open'
}
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js">//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js</a>
</li>
<li>
<a href="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js">//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js</a>
</li>
<li>
<a href="../../js/buttons.html5.js">../../js/buttons.html5.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">HTML 5 data export</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="./tsv.html">Tab separated values</a>
</li>
<li>
<a href="./filename.html">File name</a>
</li>
<li>
<a href="./copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="./columns.html">Column selectors</a>
</li>
<li>
<a href="./outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="./outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="./excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="./excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="./excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="./pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="./pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="./pdfImage.html">PDF - image</a>
</li>
<li class="active">
<a href="./pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="./customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,847 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - PDF - page size and orientation</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js">
</script>
<script type="text/javascript" language="javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.html5.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'pdfHtml5',
orientation: 'landscape',
pageSize: 'LEGAL'
}
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>PDF - page size and orientation</span></h1>
<div class="info">
<p>The page size and orientation of the <a href="//datatables.net/reference/button/pdfHtml5"><code class="button" title="Buttons button type">pdfHtml5</code></a>
button type can be set using the <code>orientation</code> and <code>pageSize</code> options. By default these values are <code class="string" title=
"String">portrait</code> and <code class="string" title="String">A4</code>, but are easily customised as shown in this example which uses a landscape layout and US
legal paper size.</p>
<p>For a full list of the options available for these parameters, please refer to the <a href="//datatables.net/reference/button/pdfHtml5"><code class="button"
title="Buttons button type">pdfHtml5</code></a> documentation.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'pdfHtml5',
orientation: 'landscape',
pageSize: 'LEGAL'
}
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js">//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js</a>
</li>
<li>
<a href="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js">//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js</a>
</li>
<li>
<a href="../../js/buttons.html5.js">../../js/buttons.html5.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">HTML 5 data export</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="./tsv.html">Tab separated values</a>
</li>
<li>
<a href="./filename.html">File name</a>
</li>
<li>
<a href="./copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="./columns.html">Column selectors</a>
</li>
<li>
<a href="./outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="./outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="./excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="./excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="./excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="./pdfMessage.html">PDF - message</a>
</li>
<li class="active">
<a href="./pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="./pdfImage.html">PDF - image</a>
</li>
<li>
<a href="./pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="./customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,867 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - HTML5 export buttons</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js">
</script>
<script type="text/javascript" language="javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js">
</script>
<script type="text/javascript" language="javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.html5.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5'
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>HTML5 export buttons</span></h1>
<div class="info">
<p>The HTML5 export buttons plug-in for Buttons provides four export buttons:</p>
<ul class="markdown">
<li>
<a href="//datatables.net/reference/button/copyHtml5"><code class="button" title="Buttons button type">copyHtml5</code></a> - Copy to clipboard
</li>
<li>
<a href="//datatables.net/reference/button/csvHtml5"><code class="button" title="Buttons button type">csvHtml5</code></a> - Save to CSV file
</li>
<li>
<a href="//datatables.net/reference/button/excelHtml5"><code class="button" title="Buttons button type">excelHtml5</code></a> - Save to XLSX file -
requires <a href="https://stuk.github.io/jszip/">JSZip</a>
</li>
<li>
<a href="//datatables.net/reference/button/pdfHtml5"><code class="button" title="Buttons button type">pdfHtml5</code></a> - Save to PDF file - requires
<a href="http://pdfmake.org/">PDFMake</a>
</li>
</ul>
<p>This example demonstrates these four button types with their default options. The other examples in this section demonstrate some of the options available.</p>
<p>Please note that the <a href="//datatables.net/reference/button/copy"><code class="button" title="Buttons button type">copy</code></a>, <a href=
"//datatables.net/reference/button/excel"><code class="button" title="Buttons button type">excel</code></a>, <a href=
"//datatables.net/reference/button/csv"><code class="button" title="Buttons button type">csv</code></a> and <a href=
"//datatables.net/reference/button/pdf"><code class="button" title="Buttons button type">pdf</code></a> button types may also use the HTML5 button types noted
here, providing a Flash fallback for older browsers (IE9-).</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5'
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js">//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js</a>
</li>
<li>
<a href="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js">//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js</a>
</li>
<li>
<a href="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js">//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js</a>
</li>
<li>
<a href="../../js/buttons.html5.js">../../js/buttons.html5.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">HTML 5 data export</a></h3>
<ul class="toc active">
<li class="active">
<a href="./simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="./tsv.html">Tab separated values</a>
</li>
<li>
<a href="./filename.html">File name</a>
</li>
<li>
<a href="./copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="./columns.html">Column selectors</a>
</li>
<li>
<a href="./outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="./outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="./excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="./excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="./excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="./pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="./pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="./pdfImage.html">PDF - image</a>
</li>
<li>
<a href="./pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="./customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,844 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Tab separated values</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.html5.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copyHtml5',
{
extend: 'csvHtml5',
fieldSeparator: '\t',
extension: '.tsv'
}
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Tab separated values</span></h1>
<div class="info">
<p>The <a href="//datatables.net/reference/button/copyHtml5"><code class="button" title="Buttons button type">copyHtml5</code></a> and <a href=
"//datatables.net/reference/button/csvHtml5"><code class="button" title="Buttons button type">csvHtml5</code></a> buttons have the option to specify the character
(or more generally a full string) that separates the values between fields. By default this is a tab character for the copy button, but the <em>Comma</em>
Separated Values button uses a comma.</p>
<p>The <code>fieldSeparator</code> option is used to specify the field separator - in this example the exported file is a tab separated values file. The file
extension has also been set to reflect this, although that is optional as most spreadsheet applications will read TSV files without issue.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copyHtml5',
{
extend: 'csvHtml5',
fieldSeparator: '\t',
extension: '.tsv'
}
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js">//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js</a>
</li>
<li>
<a href="../../js/buttons.html5.js">../../js/buttons.html5.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">HTML 5 data export</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">HTML5 export buttons</a>
</li>
<li class="active">
<a href="./tsv.html">Tab separated values</a>
</li>
<li>
<a href="./filename.html">File name</a>
</li>
<li>
<a href="./copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="./columns.html">Column selectors</a>
</li>
<li>
<a href="./outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="./outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="./excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="./excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="./excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="./pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="./pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="./pdfImage.html">PDF - image</a>
</li>
<li>
<a href="./pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="./customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,266 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<link rel="stylesheet" type="text/css" href="../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../examples/resources/demo.css">
<script type="text/javascript" language="javascript" src="../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../examples/resources/demo.js">
</script>
<title>Buttons examples - Buttons for DataTables</title>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Buttons for DataTables</span></h1>
<div class="info">
<p>The Buttons extension for DataTables provides a common set of options, API methods and styling to display buttons on a page that will interact with a DataTable.
The core library provides the based framework upon which plug-ins can built.</p>
<p>There are four plug-ins that are part of the core Buttons software providing various utilities:</p>
<ul class="markdown">
<li>HTML5 export buttons - Copy to clipboard; Save to Excel, CSV and PDF</li>
<li>Flash export buttons - Copy to clipboard; Save to Excel, CSV and PDF for older browsers</li>
<li>Print view</li>
<li>Column visibility buttons</li>
</ul>
<p>Other extensions for DataTables also provide buttons - <a href="https://editor.datatables.net">Editor</a> for example make the <a href=
"//editor.datatables.net/reference/button/create"><code class="button" title="Editor button type">create</code></a>, <a href=
"//editor.datatables.net/reference/button/edit"><code class="button" title="Editor button type">edit</code></a> and <a href=
"//editor.datatables.net/reference/button/remove"><code class="button" title="Editor button type">remove</code></a> buttons available.</p>
<p>The examples presented here give an introduce to how Buttons can be used, the API and its various core plug-in buttons.</p>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<div class="toc">
<div class="toc-group">
<h3><a href="./initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="./initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="./initialisation/export.html">File export</a>
</li>
<li>
<a href="./initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="./initialisation/className.html">Class names</a>
</li>
<li>
<a href="./initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="./initialisation/collections.html">Collections</a>
</li>
<li>
<a href="./initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="./initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="./initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="./initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="./initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="./initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./html5/index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="./html5/simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="./html5/tsv.html">Tab separated values</a>
</li>
<li>
<a href="./html5/filename.html">File name</a>
</li>
<li>
<a href="./html5/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="./html5/columns.html">Column selectors</a>
</li>
<li>
<a href="./html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="./html5/outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="./html5/excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="./html5/excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="./html5/excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="./html5/pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="./html5/pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="./html5/pdfImage.html">PDF - image</a>
</li>
<li>
<a href="./html5/pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="./html5/customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="./flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="./flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="./flash/filename.html">File name</a>
</li>
<li>
<a href="./flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="./flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="./flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="./flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="./flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="./column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="./column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="./column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="./column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="./column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="./column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="./column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="./column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="./print/simple.html">Print button</a>
</li>
<li>
<a href="./print/message.html">Custom message</a>
</li>
<li>
<a href="./print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="./print/select.html">Export options - row selector</a>
</li>
<li>
<a href="./print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="./print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="./api/enable.html">Enable / disable</a>
</li>
<li>
<a href="./api/text.html">Dynamic text</a>
</li>
<li>
<a href="./api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="./api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="./styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="./styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="./styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="./styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="./styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="./styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,866 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Class names</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
a.dt-button.red {
color: red;
}
a.dt-button.orange {
color: orange;
}
a.dt-button.green {
color: green;
}
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
text: 'Red',
className: 'red'
},
{
text: 'Orange',
className: 'orange'
},
{
text: 'Green',
className: 'green'
}
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Class names</span></h1>
<div class="info">
<p>This example <a href="custom.html">also shows button definition objects</a> being used to describe buttons. In this case we use the <a href=
"//datatables.net/reference/option/buttons.buttons.className"><code class="option" title="Buttons initialisation option">buttons.buttons.className</code></a>
option to specify a custom class name for the button. A little bit of CSS is used to style the buttons - the class names and CSS can of course be adjusted to suit
whatever styling requirements you have.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
text: 'Red',
className: 'red'
},
{
text: 'Orange',
className: 'orange'
},
{
text: 'Green',
className: 'green'
}
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css">a.dt-button.red {
color: red;
}
a.dt-button.orange {
color: orange;
}
a.dt-button.green {
color: green;
}</code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="./index.html">Basic initialisation</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">Basic initialisation</a>
</li>
<li>
<a href="./export.html">File export</a>
</li>
<li>
<a href="./custom.html">Custom button</a>
</li>
<li class="active">
<a href="./className.html">Class names</a>
</li>
<li>
<a href="./keys.html">Keyboard activation</a>
</li>
<li>
<a href="./collections.html">Collections</a>
</li>
<li>
<a href="./collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="./collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="./plugins.html">Plug-ins</a>
</li>
<li>
<a href="./new.html">`new` initialisation</a>
</li>
<li>
<a href="./multiple.html">Multiple button groups</a>
</li>
<li>
<a href="./pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="../html5/simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="../html5/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../html5/filename.html">File name</a>
</li>
<li>
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../html5/columns.html">Column selectors</a>
</li>
<li>
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="../html5/pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="../html5/pdfImage.html">PDF - image</a>
</li>
<li>
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="../html5/customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,858 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Auto close collection</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'collection',
text: 'Table control',
autoClose: true,
buttons: [
{
text: 'Toggle start date',
action: function ( e, dt, node, config ) {
dt.column( -2 ).visible( ! dt.column( -2 ).visible() );
}
},
{
text: 'Toggle salary',
action: function ( e, dt, node, config ) {
dt.column( -1 ).visible( ! dt.column( -1 ).visible() );
}
}
]
}
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Auto close collection</span></h1>
<div class="info">
<p>Buttons' collections will remain on screen when a sub-button is activated by default, but this behaviour isn't always desirable and can be controlled through
the use of the <code>autoClose</code> option as shown in this example.</p>
<p>In every other regard it is identical to the <a href="collections.html">collections example</a> but in this case the collection will close automatically when
one of the sub-buttons is selected.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'collection',
text: 'Table control',
autoClose: true,
buttons: [
{
text: 'Toggle start date',
action: function ( e, dt, node, config ) {
dt.column( -2 ).visible( ! dt.column( -2 ).visible() );
}
},
{
text: 'Toggle salary',
action: function ( e, dt, node, config ) {
dt.column( -1 ).visible( ! dt.column( -1 ).visible() );
}
}
]
}
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="./index.html">Basic initialisation</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">Basic initialisation</a>
</li>
<li>
<a href="./export.html">File export</a>
</li>
<li>
<a href="./custom.html">Custom button</a>
</li>
<li>
<a href="./className.html">Class names</a>
</li>
<li>
<a href="./keys.html">Keyboard activation</a>
</li>
<li>
<a href="./collections.html">Collections</a>
</li>
<li>
<a href="./collections-sub.html">Multi-level collections</a>
</li>
<li class="active">
<a href="./collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="./plugins.html">Plug-ins</a>
</li>
<li>
<a href="./new.html">`new` initialisation</a>
</li>
<li>
<a href="./multiple.html">Multiple button groups</a>
</li>
<li>
<a href="./pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="../html5/simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="../html5/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../html5/filename.html">File name</a>
</li>
<li>
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../html5/columns.html">Column selectors</a>
</li>
<li>
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="../html5/pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="../html5/pdfImage.html">PDF - image</a>
</li>
<li>
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="../html5/customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,866 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Multi-level collections</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.colVis.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'collection',
text: 'Table control',
buttons: [
'colvis',
{
text: 'Toggle start date',
action: function ( e, dt, node, config ) {
dt.column( -2 ).visible( ! dt.column( -2 ).visible() );
}
},
{
text: 'Toggle salary',
action: function ( e, dt, node, config ) {
dt.column( -1 ).visible( ! dt.column( -1 ).visible() );
}
}
]
}
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Multi-level collections</span></h1>
<div class="info">
<p>As of Buttons 1.1, basic options for displaying a collection inside a collection is possible simply by using a collection button in the <code>buttons</code>
array for another collection. This <a href="http://www.imdb.com/title/tt1375666/">Inception</a> like behaviour basically means that multi-level collections are
possible.</p>
<p>It is worth noting that only a single collection can be shown at a time, so the display of any sub-collection will replace the display of the existing
collection.</p>
<p>This example shows a custom collection button (matching the <a href="collections.html">simple collection example</a>) with the addition of a column visibility
button, which when activated will show another collection of buttons, this time controlling the column visibility.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'collection',
text: 'Table control',
buttons: [
'colvis',
{
text: 'Toggle start date',
action: function ( e, dt, node, config ) {
dt.column( -2 ).visible( ! dt.column( -2 ).visible() );
}
},
{
text: 'Toggle salary',
action: function ( e, dt, node, config ) {
dt.column( -1 ).visible( ! dt.column( -1 ).visible() );
}
}
]
}
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="../../js/buttons.colVis.js">../../js/buttons.colVis.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="./index.html">Basic initialisation</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">Basic initialisation</a>
</li>
<li>
<a href="./export.html">File export</a>
</li>
<li>
<a href="./custom.html">Custom button</a>
</li>
<li>
<a href="./className.html">Class names</a>
</li>
<li>
<a href="./keys.html">Keyboard activation</a>
</li>
<li>
<a href="./collections.html">Collections</a>
</li>
<li class="active">
<a href="./collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="./collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="./plugins.html">Plug-ins</a>
</li>
<li>
<a href="./new.html">`new` initialisation</a>
</li>
<li>
<a href="./multiple.html">Multiple button groups</a>
</li>
<li>
<a href="./pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="../html5/simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="../html5/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../html5/filename.html">File name</a>
</li>
<li>
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../html5/columns.html">Column selectors</a>
</li>
<li>
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="../html5/pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="../html5/pdfImage.html">PDF - image</a>
</li>
<li>
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="../html5/customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,861 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Collections</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'collection',
text: 'Table control',
buttons: [
{
text: 'Toggle start date',
action: function ( e, dt, node, config ) {
dt.column( -2 ).visible( ! dt.column( -2 ).visible() );
}
},
{
text: 'Toggle salary',
action: function ( e, dt, node, config ) {
dt.column( -1 ).visible( ! dt.column( -1 ).visible() );
}
}
]
}
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Collections</span></h1>
<div class="info">
<p>The <a href="//datatables.net/reference/button/collection"><code class="button" title="Buttons button type">collection</code></a> button provides the ability to
show a list of buttons when activated. The buttons it will display in the sub-list are defined by its <code>buttons</code> property which can take all of the same
button options as the <a href="//datatables.net/reference/option/buttons.buttons"><code class="option" title=
"Buttons initialisation option">buttons.buttons</code></a> array (which the exception of another collection - collections cannot be nested).</p>
<p>Button collections can be useful for grouping functionality of button types - for example one collection could provide file export options, another table
editing and a third column visibility controls.</p>
<p>This simple example shows a collection with two custom buttons. These buttons simply toggle the visibility of the final two columns in the table (if you require
full column visibility control, check out the <a href="//datatables.net/reference/button/colvis"><code class="button" title="Buttons button type">colvis</code></a>
button type).</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'collection',
text: 'Table control',
buttons: [
{
text: 'Toggle start date',
action: function ( e, dt, node, config ) {
dt.column( -2 ).visible( ! dt.column( -2 ).visible() );
}
},
{
text: 'Toggle salary',
action: function ( e, dt, node, config ) {
dt.column( -1 ).visible( ! dt.column( -1 ).visible() );
}
}
]
}
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="./index.html">Basic initialisation</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">Basic initialisation</a>
</li>
<li>
<a href="./export.html">File export</a>
</li>
<li>
<a href="./custom.html">Custom button</a>
</li>
<li>
<a href="./className.html">Class names</a>
</li>
<li>
<a href="./keys.html">Keyboard activation</a>
</li>
<li class="active">
<a href="./collections.html">Collections</a>
</li>
<li>
<a href="./collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="./collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="./plugins.html">Plug-ins</a>
</li>
<li>
<a href="./new.html">`new` initialisation</a>
</li>
<li>
<a href="./multiple.html">Multiple button groups</a>
</li>
<li>
<a href="./pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="../html5/simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="../html5/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../html5/filename.html">File name</a>
</li>
<li>
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../html5/columns.html">Column selectors</a>
</li>
<li>
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="../html5/pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="../html5/pdfImage.html">PDF - image</a>
</li>
<li>
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="../html5/customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,840 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Custom button</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
text: 'My button',
action: function ( e, dt, node, config ) {
alert( 'Button activated' );
}
}
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Custom button</span></h1>
<div class="info">
<p>Fundamentally, each button is described by an object - this object is read by Buttons and displayed as appropriate. There are a number of parameters that
Buttons will automatically look for in the button description object such as <a href="//datatables.net/reference/option/buttons.buttons.text"><code class="option"
title="Buttons initialisation option">buttons.buttons.text</code></a> and <a href="//datatables.net/reference/option/buttons.buttons.action"><code class="option"
title="Buttons initialisation option">buttons.buttons.action</code></a> which are the two fundamental parameters (button text and the action to take when
activated).</p>
<p>All parameters (including these two, although to make the button useful they will need to be specified!) are optional, and each plug-in button type can also
specify its own parameters (for example the <a href="//datatables.net/reference/button/pdfHtml5"><code class="button" title=
"Buttons button type">pdfHtml5</code></a> button type uses <code>message</code> to display a custom message in the generated PDF).</p>
<p>This example shows a single button that is specified using the <a href="//datatables.net/reference/option/buttons.buttons.text"><code class="option" title=
"Buttons initialisation option">buttons.buttons.text</code></a> and <a href="//datatables.net/reference/option/buttons.buttons.action"><code class="option" title=
"Buttons initialisation option">buttons.buttons.action</code></a> parameters only - it simply shows an alert when activated, but any Javascript function could be
run when the button is activated.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
text: 'My button',
action: function ( e, dt, node, config ) {
alert( 'Button activated' );
}
}
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="./index.html">Basic initialisation</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">Basic initialisation</a>
</li>
<li>
<a href="./export.html">File export</a>
</li>
<li class="active">
<a href="./custom.html">Custom button</a>
</li>
<li>
<a href="./className.html">Class names</a>
</li>
<li>
<a href="./keys.html">Keyboard activation</a>
</li>
<li>
<a href="./collections.html">Collections</a>
</li>
<li>
<a href="./collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="./collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="./plugins.html">Plug-ins</a>
</li>
<li>
<a href="./new.html">`new` initialisation</a>
</li>
<li>
<a href="./multiple.html">Multiple button groups</a>
</li>
<li>
<a href="./pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="../html5/simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="../html5/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../html5/filename.html">File name</a>
</li>
<li>
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../html5/columns.html">Column selectors</a>
</li>
<li>
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="../html5/pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="../html5/pdfImage.html">PDF - image</a>
</li>
<li>
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="../html5/customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,871 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - File export</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.flash.js">
</script>
<script type="text/javascript" language="javascript" src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js">
</script>
<script type="text/javascript" language="javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js">
</script>
<script type="text/javascript" language="javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.html5.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.print.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>File export</span></h1>
<div class="info">
<p>Exporting data from a table can often be a key part of a complex application. The Buttons extension for DataTables provides three plug-ins that provide
overlapping functionality for data export:</p>
<ul class="markdown">
<li>HTML5 export buttons - makes use of HTML5 APIs to create files client-side</li>
<li>Flash export buttons - uses Adobe Flash for legacy browsers</li>
<li>Print button</li>
</ul>
<p>Both sets of buttons provide:</p>
<ul class="markdown">
<li>Copy to clipboard</li>
<li>Save as Excel (XLSX)</li>
<li>Save as CSV</li>
<li>Save as PDF</li>
<li>Display a print view</li>
</ul>
<p>Buttons provides button types that will automatically determine if HTML5 or Flash should be used based on the browser's functionality and it is
<em>strongly</em> recommended that you use these button types over the specific HTML5 or Flash button types. These are: <a href=
"//datatables.net/reference/button/copy"><code class="button" title="Buttons button type">copy</code></a>, <a href=
"//datatables.net/reference/button/csv"><code class="button" title="Buttons button type">csv</code></a>, <a href=
"//datatables.net/reference/button/excel"><code class="button" title="Buttons button type">excel</code></a>, <a href=
"//datatables.net/reference/button/pdf"><code class="button" title="Buttons button type">pdf</code></a>.</p>
<p>This example shows those four button types, plus <a href="//datatables.net/reference/button/print"><code class="button" title=
"Buttons button type">print</code></a>, being used with all required dependencies being loaded.</p>
</div>
<table id="example" class="display nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="../../js/buttons.flash.js">../../js/buttons.flash.js</a>
</li>
<li>
<a href="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js">//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js</a>
</li>
<li>
<a href="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js">//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js</a>
</li>
<li>
<a href="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js">//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js</a>
</li>
<li>
<a href="../../js/buttons.html5.js">../../js/buttons.html5.js</a>
</li>
<li>
<a href="../../js/buttons.print.js">../../js/buttons.print.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="./index.html">Basic initialisation</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">Basic initialisation</a>
</li>
<li class="active">
<a href="./export.html">File export</a>
</li>
<li>
<a href="./custom.html">Custom button</a>
</li>
<li>
<a href="./className.html">Class names</a>
</li>
<li>
<a href="./keys.html">Keyboard activation</a>
</li>
<li>
<a href="./collections.html">Collections</a>
</li>
<li>
<a href="./collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="./collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="./plugins.html">Plug-ins</a>
</li>
<li>
<a href="./new.html">`new` initialisation</a>
</li>
<li>
<a href="./multiple.html">Multiple button groups</a>
</li>
<li>
<a href="./pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="../html5/simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="../html5/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../html5/filename.html">File name</a>
</li>
<li>
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../html5/columns.html">Column selectors</a>
</li>
<li>
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="../html5/pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="../html5/pdfImage.html">PDF - image</a>
</li>
<li>
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="../html5/customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,85 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<title>Buttons examples - Initialisation</title>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Initialisation</span></h1>
<div class="info">
<p>Buttons is an unimaginatively named library that provides buttons for DataTables. Simple, single click buttons can be useful when used in combination with a
table providing end users with the ability to interact with the table. This can take the form of exporting data, controlling column visibility, triggering an
editing action or activating any other custom method you wish to use.</p>
<p>The set of examples available here show how Buttons can be initialised and the basics of how to use it.</p>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<div class="toc">
<div class="toc-group">
<h3><a href="./index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="./simple.html">Basic initialisation</a>
</li>
<li>
<a href="./export.html">File export</a>
</li>
<li>
<a href="./custom.html">Custom button</a>
</li>
<li>
<a href="./className.html">Class names</a>
</li>
<li>
<a href="./keys.html">Keyboard activation</a>
</li>
<li>
<a href="./collections.html">Collections</a>
</li>
<li>
<a href="./collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="./collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="./plugins.html">Plug-ins</a>
</li>
<li>
<a href="./new.html">`new` initialisation</a>
</li>
<li>
<a href="./multiple.html">Multiple button groups</a>
</li>
<li>
<a href="./pageLength.html">Page length</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,859 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Keyboard activation</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
text: 'Button <u>1</u>',
key: '1',
action: function ( e, dt, node, config ) {
alert( 'Button 1 activated' );
}
},
{
text: 'Button <u><i>alt</i> 2</u>',
key: {
altKey: true,
key: '2'
},
action: function ( e, dt, node, config ) {
alert( 'Button 2 activated' );
}
}
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Keyboard activation</span></h1>
<div class="info">
<p>Keyboard navigation is essential for fast navigation of a table operations and also for good accessibility. Buttons provides the ability to give each button a
key binding - i.e. a key combination that when pressed will activate the button's action.</p>
<p>The key binding can be given as a single character if you wish to listen for an unmodified key press, or as an object if you wish it to only be activated when a
modifier key such as shift, alt, etc, is pressed.</p>
<p>Only when there is no element on the page that has focus will Buttons act on a key press. This means that if you search for (for example) 1 in the DataTables
search box, it will not activate <em>Button 1</em> in this example. Having said that, adding a modifier key, such as shift or alt can often be useful to prevent
accidental triggering of a button.</p>
<p>This example shows two buttons; the first will be activated if <code>1</code> is pressed on the keyboard. The second requires <code>alt + 2</code> to be
pressed.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
text: 'Button &lt;u&gt;1&lt;/u&gt;',
key: '1',
action: function ( e, dt, node, config ) {
alert( 'Button 1 activated' );
}
},
{
text: 'Button &lt;u&gt;&lt;i&gt;alt&lt;/i&gt; 2&lt;/u&gt;',
key: {
altKey: true,
key: '2'
},
action: function ( e, dt, node, config ) {
alert( 'Button 2 activated' );
}
}
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="./index.html">Basic initialisation</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">Basic initialisation</a>
</li>
<li>
<a href="./export.html">File export</a>
</li>
<li>
<a href="./custom.html">Custom button</a>
</li>
<li>
<a href="./className.html">Class names</a>
</li>
<li class="active">
<a href="./keys.html">Keyboard activation</a>
</li>
<li>
<a href="./collections.html">Collections</a>
</li>
<li>
<a href="./collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="./collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="./plugins.html">Plug-ins</a>
</li>
<li>
<a href="./new.html">`new` initialisation</a>
</li>
<li>
<a href="./multiple.html">Multiple button groups</a>
</li>
<li>
<a href="./pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="../html5/simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="../html5/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../html5/filename.html">File name</a>
</li>
<li>
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../html5/columns.html">Column selectors</a>
</li>
<li>
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="../html5/pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="../html5/pdfImage.html">PDF - image</a>
</li>
<li>
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="../html5/customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,881 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Multiple button groups</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
div.dt-buttons {
clear: both;
}
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
var table = $('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
text: 'Button 1',
action: function ( e, dt, node, config ) {
alert( 'Button 1 clicked on' );
}
}
]
} );
new $.fn.dataTable.Buttons( table, {
buttons: [
{
text: 'Button 2',
action: function ( e, dt, node, conf ) {
alert( 'Button 2 clicked on' );
}
},
{
text: 'Button 3',
action: function ( e, dt, node, conf ) {
alert( 'Button 3 clicked on' );
}
}
]
} );
table.buttons( 1, null ).container().appendTo(
table.table().container()
);
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Multiple button groups</span></h1>
<div class="info">
<p><a href="new.html">Buttons' ability to have new instances constructed</a> arbitrarily gives it the ability to have multiple button instances created for a
single DataTable. This can be useful if you wish to display button groups with different functionality (file export, editing, etc).</p>
<p>In this example the <a href="//datatables.net/reference/option/buttons"><code class="option" title="Buttons initialisation option">buttons</code></a> option is
used to construct the first buttons set. The <code>new $.fn.dataTable.Buttons()</code> constructor is then used to create a second and finally the API used to
insert this into the document.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
var table = $('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
text: 'Button 1',
action: function ( e, dt, node, config ) {
alert( 'Button 1 clicked on' );
}
}
]
} );
new $.fn.dataTable.Buttons( table, {
buttons: [
{
text: 'Button 2',
action: function ( e, dt, node, conf ) {
alert( 'Button 2 clicked on' );
}
},
{
text: 'Button 3',
action: function ( e, dt, node, conf ) {
alert( 'Button 3 clicked on' );
}
}
]
} );
table.buttons( 1, null ).container().appendTo(
table.table().container()
);
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css">div.dt-buttons {
clear: both;
}</code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="./index.html">Basic initialisation</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">Basic initialisation</a>
</li>
<li>
<a href="./export.html">File export</a>
</li>
<li>
<a href="./custom.html">Custom button</a>
</li>
<li>
<a href="./className.html">Class names</a>
</li>
<li>
<a href="./keys.html">Keyboard activation</a>
</li>
<li>
<a href="./collections.html">Collections</a>
</li>
<li>
<a href="./collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="./collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="./plugins.html">Plug-ins</a>
</li>
<li>
<a href="./new.html">`new` initialisation</a>
</li>
<li class="active">
<a href="./multiple.html">Multiple button groups</a>
</li>
<li>
<a href="./pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="../html5/simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="../html5/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../html5/filename.html">File name</a>
</li>
<li>
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../html5/columns.html">Column selectors</a>
</li>
<li>
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="../html5/pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="../html5/pdfImage.html">PDF - image</a>
</li>
<li>
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="../html5/customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,860 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - `new` initialisation</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
var table = $('#example').DataTable();
new $.fn.dataTable.Buttons( table, {
buttons: [
{
text: 'Button 1',
action: function ( e, dt, node, conf ) {
console.log( 'Button 1 clicked on' );
}
},
{
text: 'Button 2',
action: function ( e, dt, node, conf ) {
console.log( 'Button 2 clicked on' );
}
}
]
} );
table.buttons( 0, null ).container().prependTo(
table.table().container()
);
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>`new` initialisation</span></h1>
<div class="info">
<p>Buttons will typically be initialised through the <a href="//datatables.net/reference/option/buttons"><code class="option" title=
"Buttons initialisation option">buttons</code></a> parameter in the DataTables configuration object, but it is also possible to construct a new buttons list at any
time using the <code>new $.fn.dataTable.Buttons()</code> constructor. This constructor takes two parameters:</p>
<ol class="markdown">
<li>DataTable to apply the buttons to</li>
<li>Button options - this matches the options that can be given to the <a href="//datatables.net/reference/option/buttons"><code class="option" title=
"Buttons initialisation option">buttons</code></a> option.
</li>
</ol>
<p>This example shows a Buttons constructor being used with its API to create and insert a set of buttons after a DataTable has been created.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
var table = $('#example').DataTable();
new $.fn.dataTable.Buttons( table, {
buttons: [
{
text: 'Button 1',
action: function ( e, dt, node, conf ) {
console.log( 'Button 1 clicked on' );
}
},
{
text: 'Button 2',
action: function ( e, dt, node, conf ) {
console.log( 'Button 2 clicked on' );
}
}
]
} );
table.buttons( 0, null ).container().prependTo(
table.table().container()
);
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="./index.html">Basic initialisation</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">Basic initialisation</a>
</li>
<li>
<a href="./export.html">File export</a>
</li>
<li>
<a href="./custom.html">Custom button</a>
</li>
<li>
<a href="./className.html">Class names</a>
</li>
<li>
<a href="./keys.html">Keyboard activation</a>
</li>
<li>
<a href="./collections.html">Collections</a>
</li>
<li>
<a href="./collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="./collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="./plugins.html">Plug-ins</a>
</li>
<li class="active">
<a href="./new.html">`new` initialisation</a>
</li>
<li>
<a href="./multiple.html">Multiple button groups</a>
</li>
<li>
<a href="./pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="../html5/simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="../html5/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../html5/filename.html">File name</a>
</li>
<li>
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../html5/columns.html">Column selectors</a>
</li>
<li>
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="../html5/pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="../html5/pdfImage.html">PDF - image</a>
</li>
<li>
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="../html5/customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,837 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Page length</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
lengthMenu: [
[ 10, 25, 50, -1 ],
[ '10 rows', '25 rows', '50 rows', 'Show all' ]
],
buttons: [
'pageLength'
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Page length</span></h1>
<div class="info">
<p>Buttons are often inserted into the document where DataTables default page length <code class="tag" title="HTML tag">select</code> width would go (top left), to
provide controls or table information at each of the four corners of the table. However, you may wish to keep the length list, which you can do by adding the
<code>l</code> option back into <a href="//datatables.net/reference/option/dom"><code class="option" title="DataTables initialisation option">dom</code></a>, or
for improved styling integration you can use the <a href="//datatables.net/reference/button/pageLength"><code class="button" title=
"Buttons button type">pageLength</code></a> button.</p>
<p>The <a href="//datatables.net/reference/button/pageLength"><code class="button" title="Buttons button type">pageLength</code></a> button acts in exactly the
same way as the default length list and will inherit the options specified by the <a href="//datatables.net/reference/option/lengthMenu"><code class="option"
title="DataTables initialisation option">lengthMenu</code></a> option.</p>
<p>This example shows the <a href="//datatables.net/reference/button/pageLength"><code class="button" title="Buttons button type">pageLength</code></a> button
being used with <a href="//datatables.net/reference/option/lengthMenu"><code class="option" title="DataTables initialisation option">lengthMenu</code></a> to
specify page lengths of 10, 25, 50 and all rows, with language strings used for the buttons.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
lengthMenu: [
[ 10, 25, 50, -1 ],
[ '10 rows', '25 rows', '50 rows', 'Show all' ]
],
buttons: [
'pageLength'
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="./index.html">Basic initialisation</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">Basic initialisation</a>
</li>
<li>
<a href="./export.html">File export</a>
</li>
<li>
<a href="./custom.html">Custom button</a>
</li>
<li>
<a href="./className.html">Class names</a>
</li>
<li>
<a href="./keys.html">Keyboard activation</a>
</li>
<li>
<a href="./collections.html">Collections</a>
</li>
<li>
<a href="./collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="./collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="./plugins.html">Plug-ins</a>
</li>
<li>
<a href="./new.html">`new` initialisation</a>
</li>
<li>
<a href="./multiple.html">Multiple button groups</a>
</li>
<li class="active">
<a href="./pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="../html5/simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="../html5/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../html5/filename.html">File name</a>
</li>
<li>
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../html5/columns.html">Column selectors</a>
</li>
<li>
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="../html5/pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="../html5/pdfImage.html">PDF - image</a>
</li>
<li>
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="../html5/customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,866 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Plug-ins</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$.fn.dataTable.ext.buttons.alert = {
className: 'buttons-alert',
action: function ( e, dt, node, config ) {
alert( this.text() );
}
};
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'alert',
text: 'My button 1'
},
{
extend: 'alert',
text: 'My button 2'
},
{
extend: 'alert',
text: 'My button 3'
}
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Plug-ins</span></h1>
<div class="info">
<p>While it is quite simple to <a href="custom.html">create a custom button</a> with Buttons, if you have a complex button that you wish to reuse the logic from
for multiple buttons you may wish to define a plug-in button type. This is simply done by attaching your new button to the <code>$.fn.dataTable.ext.buttons</code>
object. Give the button the name that you wish to use to refer to it in the <a href="//datatables.net/reference/option/buttons.buttons.extend"><code class="option"
title="Buttons initialisation option">buttons.buttons.extend</code></a> option. The object assigned should contain whatever parameters you require for your
button.</p>
<p>This simple example shows an <code>alert</code> button type being defined which is then used for three different buttons. Each has custom text, but the
<code>action</code> method is shared between them.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$.fn.dataTable.ext.buttons.alert = {
className: 'buttons-alert',
action: function ( e, dt, node, config ) {
alert( this.text() );
}
};
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'alert',
text: 'My button 1'
},
{
extend: 'alert',
text: 'My button 2'
},
{
extend: 'alert',
text: 'My button 3'
}
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="./index.html">Basic initialisation</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">Basic initialisation</a>
</li>
<li>
<a href="./export.html">File export</a>
</li>
<li>
<a href="./custom.html">Custom button</a>
</li>
<li>
<a href="./className.html">Class names</a>
</li>
<li>
<a href="./keys.html">Keyboard activation</a>
</li>
<li>
<a href="./collections.html">Collections</a>
</li>
<li>
<a href="./collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="./collections-autoClose.html">Auto close collection</a>
</li>
<li class="active">
<a href="./plugins.html">Plug-ins</a>
</li>
<li>
<a href="./new.html">`new` initialisation</a>
</li>
<li>
<a href="./multiple.html">Multiple button groups</a>
</li>
<li>
<a href="./pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="../html5/simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="../html5/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../html5/filename.html">File name</a>
</li>
<li>
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../html5/columns.html">Column selectors</a>
</li>
<li>
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="../html5/pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="../html5/pdfImage.html">PDF - image</a>
</li>
<li>
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="../html5/customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,861 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Basic initialisation</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.flash.js">
</script>
<script type="text/javascript" language="javascript" src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js">
</script>
<script type="text/javascript" language="javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js">
</script>
<script type="text/javascript" language="javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.html5.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.print.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Basic initialisation</span></h1>
<div class="info">
<p>Buttons can be initialised very easily though the <a href="//datatables.net/reference/option/buttons"><code class="option" title=
"Buttons initialisation option">buttons</code></a> object which can be given as an array of the buttons that you wish to display. The <code class="string" title=
"String">B</code> option in the <a href="//datatables.net/reference/option/dom"><code class="option" title="DataTables initialisation option">dom</code></a>
parameter will instruct DataTables where the buttons should be placed in the document - in this case, at the top left (CSS also plays a part).</p>
<p>The simplest method of using buttons is to use <a href="https://datatables.net/reference/buttons">predefined button types</a> which can be displayed simply by
using their name in the <a href="//datatables.net/reference/option/buttons"><code class="option" title="Buttons initialisation option">buttons</code></a> array.
Each button can also be <a href="custom.html">extended</a> to provide customisation of that button.</p>
<p>This example shows the <a href="//datatables.net/reference/button/copy"><code class="button" title="Buttons button type">copy</code></a>, <a href=
"//datatables.net/reference/button/csv"><code class="button" title="Buttons button type">csv</code></a>, <a href=
"//datatables.net/reference/button/excel"><code class="button" title="Buttons button type">excel</code></a>, <a href=
"//datatables.net/reference/button/pdf"><code class="button" title="Buttons button type">pdf</code></a> and <a href=
"//datatables.net/reference/button/print"><code class="button" title="Buttons button type">print</code></a> buttons being used to display data export options for
the DataTable.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="../../js/buttons.flash.js">../../js/buttons.flash.js</a>
</li>
<li>
<a href="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js">//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js</a>
</li>
<li>
<a href="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js">//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js</a>
</li>
<li>
<a href="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js">//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js</a>
</li>
<li>
<a href="../../js/buttons.html5.js">../../js/buttons.html5.js</a>
</li>
<li>
<a href="../../js/buttons.print.js">../../js/buttons.print.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="./index.html">Basic initialisation</a></h3>
<ul class="toc active">
<li class="active">
<a href="./simple.html">Basic initialisation</a>
</li>
<li>
<a href="./export.html">File export</a>
</li>
<li>
<a href="./custom.html">Custom button</a>
</li>
<li>
<a href="./className.html">Class names</a>
</li>
<li>
<a href="./keys.html">Keyboard activation</a>
</li>
<li>
<a href="./collections.html">Collections</a>
</li>
<li>
<a href="./collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="./collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="./plugins.html">Plug-ins</a>
</li>
<li>
<a href="./new.html">`new` initialisation</a>
</li>
<li>
<a href="./multiple.html">Multiple button groups</a>
</li>
<li>
<a href="./pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="../html5/simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="../html5/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../html5/filename.html">File name</a>
</li>
<li>
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../html5/columns.html">Column selectors</a>
</li>
<li>
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="../html5/pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="../html5/pdfImage.html">PDF - image</a>
</li>
<li>
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="../html5/customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,834 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Disable auto print</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.print.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'print',
autoPrint: false
}
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Disable auto print</span></h1>
<div class="info">
<p>By default, when the <a href="//datatables.net/reference/button/print"><code class="button" title="Buttons button type">print</code></a> button opens the print
view window it will automatically call the browser's <code>window.print()</code> method to present the browser's print dialogue box to the end user and they can
set the options they wish. When the print action is confirmed or cancelled the print view window is then automatically closed.</p>
<p>If this automatic print and close behaviour is not what you want and you would rather the end user select the print command themselves, the
<code>autoPrint</code> option can be specified to disable this behaviour. This example shows that in practice.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'print',
autoPrint: false
}
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="../../js/buttons.print.js">../../js/buttons.print.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="../html5/simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="../html5/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../html5/filename.html">File name</a>
</li>
<li>
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../html5/columns.html">Column selectors</a>
</li>
<li>
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="../html5/pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="../html5/pdfImage.html">PDF - image</a>
</li>
<li>
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="../html5/customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Print</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">Print button</a>
</li>
<li>
<a href="./message.html">Custom message</a>
</li>
<li>
<a href="./columns.html">Export options - column selector</a>
</li>
<li>
<a href="./select.html">Export options - row selector</a>
</li>
<li class="active">
<a href="./autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="./customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,855 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Export options - column selector</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.print.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.colVis.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'print',
exportOptions: {
columns: ':visible'
}
},
'colvis'
],
columnDefs: [ {
targets: -1,
visible: false
} ]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Export options - column selector</span></h1>
<div class="info">
<p>The <code>exportOptions.columns</code> option of the <a href="//datatables.net/reference/button/print"><code class="button" title=
"Buttons button type">print</code></a> button provides the ability to select only certain columns (using a <a href=
"//datatables.net/reference/type/column-selector"><code class="type" title="DataTables parameter type">column-selector</code></a>). In this example only the
visible columns are used for the printing.</p>
<p>The column visibility buttons (<a href="//datatables.net/reference/button/colvis"><code class="button" title="Buttons button type">colvis</code></a>) are
included in this example so the column visibility can be easily changed. Additionally, the last column in the table is hidden by default (<a href=
"//datatables.net/reference/option/columns.visible"><code class="option" title="DataTables initialisation option">columns.visible</code></a>).</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'print',
exportOptions: {
columns: ':visible'
}
},
'colvis'
],
columnDefs: [ {
targets: -1,
visible: false
} ]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="../../js/buttons.print.js">../../js/buttons.print.js</a>
</li>
<li>
<a href="../../js/buttons.colVis.js">../../js/buttons.colVis.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="../html5/simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="../html5/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../html5/filename.html">File name</a>
</li>
<li>
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../html5/columns.html">Column selectors</a>
</li>
<li>
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="../html5/pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="../html5/pdfImage.html">PDF - image</a>
</li>
<li>
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="../html5/customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Print</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">Print button</a>
</li>
<li>
<a href="./message.html">Custom message</a>
</li>
<li class="active">
<a href="./columns.html">Export options - column selector</a>
</li>
<li>
<a href="./select.html">Export options - row selector</a>
</li>
<li>
<a href="./autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="./customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,860 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Customisation of the print view window</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.print.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'print',
customize: function ( win ) {
$(win.document.body)
.css( 'font-size', '10pt' )
.prepend(
'<img src="http://datatables.net/media/images/logo-fade.png" style="position:absolute; top:0; left:0;" />'
);
$(win.document.body).find( 'table' )
.addClass( 'compact' )
.css( 'font-size', 'inherit' );
}
}
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Customisation of the print view window</span></h1>
<div class="info">
<p>If you wish to customise the print view document, this can be done through the <code>customize</code> method of the <a href=
"//datatables.net/reference/button/print"><code class="button" title="Buttons button type">print</code></a> button type. This is a callback function that is
executed when the print view document has been created, and gives you the ability to modify it to suit your needs. The function is given a single parameter - the
<code>window</code> object for the print view document.</p>
<p>This simple example shows:</p>
<ul class="markdown">
<li>How an image can be inserted into the print view document using jQuery</li>
<li>The document's font-size can be adjusted to be suitable for printing</li>
<li>A class added to the table to improve its layout for printing</li>
<li>The font-size of the table set to match the main document's font-size.</li>
</ul>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'print',
customize: function ( win ) {
$(win.document.body)
.css( 'font-size', '10pt' )
.prepend(
'&lt;img src=&quot;http://datatables.net/media/images/logo-fade.png&quot; style=&quot;position:absolute; top:0; left:0;&quot; /&gt;'
);
$(win.document.body).find( 'table' )
.addClass( 'compact' )
.css( 'font-size', 'inherit' );
}
}
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="../../js/buttons.print.js">../../js/buttons.print.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="../html5/simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="../html5/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../html5/filename.html">File name</a>
</li>
<li>
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../html5/columns.html">Column selectors</a>
</li>
<li>
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="../html5/pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="../html5/pdfImage.html">PDF - image</a>
</li>
<li>
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="../html5/customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Print</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">Print button</a>
</li>
<li>
<a href="./message.html">Custom message</a>
</li>
<li>
<a href="./columns.html">Export options - column selector</a>
</li>
<li>
<a href="./select.html">Export options - row selector</a>
</li>
<li>
<a href="./autoPrint.html">Disable auto print</a>
</li>
<li class="active">
<a href="./customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,65 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<title>Buttons examples - Print</title>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Print</span></h1>
<div class="info">
<p>This set of examples shows how the <a href="//datatables.net/reference/button/print"><code class="button" title="Buttons button type">print</code></a> button
type can be used and customised to display a printable version of the DataTable.</p>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<div class="toc">
<div class="toc-group">
<h3><a href="./index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="./simple.html">Print button</a>
</li>
<li>
<a href="./message.html">Custom message</a>
</li>
<li>
<a href="./columns.html">Export options - column selector</a>
</li>
<li>
<a href="./select.html">Export options - row selector</a>
</li>
<li>
<a href="./autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="./customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,833 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Custom message</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.print.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'print',
message: 'This print was produced using the Print button for DataTables'
}
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Custom message</span></h1>
<div class="info">
<p>It can often be useful to include description text in the print view to provide summary information about the table that will be included in the hard printed
copy. The <code>message</code> option of the <a href="//datatables.net/reference/button/print"><code class="button" title="Buttons button type">print</code></a>
button type provides this ability.</p>
<p>In the example here a simple string is used, but complex HTML could be used if required.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'print',
message: 'This print was produced using the Print button for DataTables'
}
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="../../js/buttons.print.js">../../js/buttons.print.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="../html5/simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="../html5/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../html5/filename.html">File name</a>
</li>
<li>
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../html5/columns.html">Column selectors</a>
</li>
<li>
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="../html5/pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="../html5/pdfImage.html">PDF - image</a>
</li>
<li>
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="../html5/customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Print</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">Print button</a>
</li>
<li class="active">
<a href="./message.html">Custom message</a>
</li>
<li>
<a href="./columns.html">Export options - column selector</a>
</li>
<li>
<a href="./select.html">Export options - row selector</a>
</li>
<li>
<a href="./autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="./customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,865 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Export options - row selector</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.print.js">
</script>
<script type="text/javascript" language="javascript" src="../../../Select/js/dataTables.select.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'print',
text: 'Print all'
},
{
extend: 'print',
text: 'Print selected',
exportOptions: {
modifier: {
selected: true
}
}
}
],
select: true
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Export options - row selector</span></h1>
<div class="info">
<p>The <a href="//datatables.net/reference/button/print"><code class="button" title="Buttons button type">print</code></a> button provides a lot of flexibility in
the selection of the data that is to be exported. The <code>exportOptions</code> object can be used to determine what columns and rows are included in the printed
data. A DataTables <a href="//datatables.net/reference/type/selector-modifier"><code class="type" title="DataTables parameter type">selector-modifier</code></a>
object can be given using the <code>exportOptions.modifier</code> option and has the ability to determine the order of the print table and if filtering rows are
included, among other actions.</p>
<p>In this example the <a href="https://datatables.net/extensions/select">Select extension</a> for DataTables is used to give the end user the ability to select
rows by clicking on them. Two print buttons are utilised in this example to demonstrate the <code>exportOptions</code> option:</p>
<ul class="markdown">
<li>The first button will print all rows (after filtering)</li>
<li>The second button will print only the selected rows.</li>
</ul>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'print',
text: 'Print all'
},
{
extend: 'print',
text: 'Print selected',
exportOptions: {
modifier: {
selected: true
}
}
}
],
select: true
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="../../js/buttons.print.js">../../js/buttons.print.js</a>
</li>
<li>
<a href="../../../Select/js/dataTables.select.js">../../../Select/js/dataTables.select.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="../html5/simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="../html5/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../html5/filename.html">File name</a>
</li>
<li>
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../html5/columns.html">Column selectors</a>
</li>
<li>
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="../html5/pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="../html5/pdfImage.html">PDF - image</a>
</li>
<li>
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="../html5/customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Print</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">Print button</a>
</li>
<li>
<a href="./message.html">Custom message</a>
</li>
<li>
<a href="./columns.html">Export options - column selector</a>
</li>
<li class="active">
<a href="./select.html">Export options - row selector</a>
</li>
<li>
<a href="./autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="./customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,826 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Print button</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.print.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'print'
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Print button</span></h1>
<div class="info">
<p>This simple example shows Buttons configured with the <a href="//datatables.net/reference/button/print"><code class="button" title=
"Buttons button type">print</code></a> button type only. The print button will open a new window in the end user's browser and, by default, automatically trigger
the print function allowing the end user to print the table. The window will be closed once the print is complete, or has been cancelled.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'print'
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="../../js/buttons.print.js">../../js/buttons.print.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="../html5/simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="../html5/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../html5/filename.html">File name</a>
</li>
<li>
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../html5/columns.html">Column selectors</a>
</li>
<li>
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="../html5/pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="../html5/pdfImage.html">PDF - image</a>
</li>
<li>
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="../html5/customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Print</a></h3>
<ul class="toc active">
<li class="active">
<a href="./simple.html">Print button</a>
</li>
<li>
<a href="./message.html">Custom message</a>
</li>
<li>
<a href="./columns.html">Export options - column selector</a>
</li>
<li>
<a href="./select.html">Export options - row selector</a>
</li>
<li>
<a href="./autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="./customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation styling</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="../styling/icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,874 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Bootstrap 3</title>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../../../../media/css/dataTables.bootstrap.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.bootstrap.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/dataTables.bootstrap.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.bootstrap.js">
</script>
<script type="text/javascript" language="javascript" src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js">
</script>
<script type="text/javascript" language="javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js">
</script>
<script type="text/javascript" language="javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.html5.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.print.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.colVis.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
var table = $('#example').DataTable( {
lengthChange: false,
buttons: [ 'copy', 'excel', 'pdf', 'colvis' ]
} );
table.buttons().container()
.appendTo( '#example_wrapper .col-sm-6:eq(0)' );
} );
</script>
</head>
<body class="dt-example dt-example-bootstrap">
<div class="container">
<section>
<h1>Buttons example <span>Bootstrap 3</span></h1>
<div class="info">
<p>This example shows DataTables and the Buttons extension being used with the <a href="http://getbootstrap.com">Bootstrap</a> framework providing the styling. The
<a href="//datatables.net/manual/styling/bootstrap">DataTables / Bootstrap integration</a> provides seamless integration for DataTables to be used in a Bootstrap
page.</p>
<p>Note that for ease of implementation, the <a href="//datatables.net/reference/option/buttons"><code class="option" title=
"Buttons initialisation option">buttons</code></a> option is specified as <code>true</code> to use the default options, and the <a href=
"//datatables.net/reference/api/buttons().container()"><code class="api" title="Buttons API method">buttons().container()</code></a> method then used to insert the
buttons into the document. It is possible to use the <a href="//datatables.net/reference/option/dom"><code class="option" title=
"DataTables initialisation option">dom</code></a> option to insert the buttons like in the DataTables styled examples, but the default <a href=
"//datatables.net/reference/option/dom"><code class="option" title="DataTables initialisation option">dom</code></a> option used for Bootstrap styling is quite
complex and would need to be fully restated.</p>
</div>
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
var table = $('#example').DataTable( {
lengthChange: false,
buttons: [ 'copy', 'excel', 'pdf', 'colvis' ]
} );
table.buttons().container()
.appendTo( '#example_wrapper .col-sm-6:eq(0)' );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../../../media/js/dataTables.bootstrap.js">../../../../media/js/dataTables.bootstrap.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="../../js/buttons.bootstrap.js">../../js/buttons.bootstrap.js</a>
</li>
<li>
<a href="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js">//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js</a>
</li>
<li>
<a href="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js">//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js</a>
</li>
<li>
<a href="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js">//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js</a>
</li>
<li>
<a href="../../js/buttons.html5.js">../../js/buttons.html5.js</a>
</li>
<li>
<a href="../../js/buttons.print.js">../../js/buttons.print.js</a>
</li>
<li>
<a href="../../js/buttons.colVis.js">../../js/buttons.colVis.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css</a>
</li>
<li>
<a href="../../../../media/css/dataTables.bootstrap.css">../../../../media/css/dataTables.bootstrap.css</a>
</li>
<li>
<a href="../../css/buttons.bootstrap.css">../../css/buttons.bootstrap.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="../html5/simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="../html5/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../html5/filename.html">File name</a>
</li>
<li>
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../html5/columns.html">Column selectors</a>
</li>
<li>
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="../html5/pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="../html5/pdfImage.html">PDF - image</a>
</li>
<li>
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="../html5/customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Styling</a></h3>
<ul class="toc active">
<li class="active">
<a href="./bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="./bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="./foundation.html">Foundation styling</a>
</li>
<li>
<a href="./jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="./semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="./icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,877 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Bootstrap 4</title>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../../../../media/css/dataTables.bootstrap4.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.bootstrap4.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/dataTables.bootstrap4.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.bootstrap4.js">
</script>
<script type="text/javascript" language="javascript" src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js">
</script>
<script type="text/javascript" language="javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js">
</script>
<script type="text/javascript" language="javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.html5.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.print.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.colVis.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
var table = $('#example').DataTable( {
lengthChange: false,
buttons: [ 'copy', 'excel', 'pdf', 'colvis' ]
} );
table.buttons().container()
.appendTo( '#example_wrapper .col-md-6:eq(0)' );
} );
</script>
</head>
<body class="dt-example dt-example-bootstrap4">
<div class="container">
<section>
<h1>Buttons example <span>Bootstrap 4</span></h1>
<div class="info">
<p>This example shows DataTables and the Buttons extension being used with the <a href="http://v4-alpha.getbootstrap.com/">Bootstrap 4</a> framework providing the
styling.</p>
<p>Please note that Bootstrap 4 is still in alpha at the time this example was published and as such the integration may need to change as Bootstrap continues its
development. Bootstrap 4 integration will only be made available with the DataTables downloader once a stable version of Bootstrap 4 has been released. Until then
the integration files must be installed from source.</p>
<p>Note that for ease of implementation, the <a href="//datatables.net/reference/option/buttons"><code class="option" title=
"Buttons initialisation option">buttons</code></a> option is specified as <code>true</code> to use the default options, and the <a href=
"//datatables.net/reference/api/buttons().container()"><code class="api" title="Buttons API method">buttons().container()</code></a> method then used to insert the
buttons into the document. It is possible to use the <a href="//datatables.net/reference/option/dom"><code class="option" title=
"DataTables initialisation option">dom</code></a> option to insert the buttons like in the DataTables styled examples, but the default <a href=
"//datatables.net/reference/option/dom"><code class="option" title="DataTables initialisation option">dom</code></a> option used for Bootstrap styling is quite
complex and would need to be fully restated.</p>
</div>
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
var table = $('#example').DataTable( {
lengthChange: false,
buttons: [ 'copy', 'excel', 'pdf', 'colvis' ]
} );
table.buttons().container()
.appendTo( '#example_wrapper .col-md-6:eq(0)' );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../../../media/js/dataTables.bootstrap4.js">../../../../media/js/dataTables.bootstrap4.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="../../js/buttons.bootstrap4.js">../../js/buttons.bootstrap4.js</a>
</li>
<li>
<a href="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js">//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js</a>
</li>
<li>
<a href="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js">//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js</a>
</li>
<li>
<a href="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js">//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js</a>
</li>
<li>
<a href="../../js/buttons.html5.js">../../js/buttons.html5.js</a>
</li>
<li>
<a href="../../js/buttons.print.js">../../js/buttons.print.js</a>
</li>
<li>
<a href="../../js/buttons.colVis.js">../../js/buttons.colVis.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href=
"//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.css">//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.css</a>
</li>
<li>
<a href="../../../../media/css/dataTables.bootstrap4.css">../../../../media/css/dataTables.bootstrap4.css</a>
</li>
<li>
<a href="../../css/buttons.bootstrap4.css">../../css/buttons.bootstrap4.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="../html5/simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="../html5/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../html5/filename.html">File name</a>
</li>
<li>
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../html5/columns.html">Column selectors</a>
</li>
<li>
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="../html5/pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="../html5/pdfImage.html">PDF - image</a>
</li>
<li>
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="../html5/customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Styling</a></h3>
<ul class="toc active">
<li>
<a href="./bootstrap.html">Bootstrap 3</a>
</li>
<li class="active">
<a href="./bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="./foundation.html">Foundation styling</a>
</li>
<li>
<a href="./jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="./semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="./icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,875 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Foundation styling</title>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css">
<link rel="stylesheet" type="text/css" href="../../../../media/css/dataTables.foundation.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.foundation.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/dataTables.foundation.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.foundation.js">
</script>
<script type="text/javascript" language="javascript" src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js">
</script>
<script type="text/javascript" language="javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js">
</script>
<script type="text/javascript" language="javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.html5.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.print.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.colVis.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
var table = $('#example').DataTable( {
lengthChange: false,
buttons: [ 'copy', 'excel', 'pdf', 'colvis' ]
} );
table.buttons().container()
.appendTo( '#example_wrapper .small-6.columns:eq(0)' );
} );
</script>
</head>
<body class="dt-example dt-example-foundation">
<div class="container">
<section>
<h1>Buttons example <span>Foundation styling</span></h1>
<div class="info">
<p>This example shows DataTables and the Buttons extension being used with the <a href="http://foundation.zurb.com">Foundation</a> framework providing the styling.
The <a href="//datatables.net/manual/styling/foundation">DataTables / Foundation integration</a> prove seamless integration for DataTables to be used in a
Foundation page.</p>
<p>Note that for ease of implementation, the <a href="//datatables.net/reference/option/buttons"><code class="option" title=
"Buttons initialisation option">buttons</code></a> option is specified as <code>true</code> to use the default options, and the <a href=
"//datatables.net/reference/api/buttons().container()"><code class="api" title="Buttons API method">buttons().container()</code></a> method then used to insert the
buttons into the document. It is possible to use the <a href="//datatables.net/reference/option/dom"><code class="option" title=
"DataTables initialisation option">dom</code></a> option to insert the buttons like in the DataTables styled examples, but the default <a href=
"//datatables.net/reference/option/dom"><code class="option" title="DataTables initialisation option">dom</code></a> option used for Foundation styling is quite
complex and would need to be fully restated.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
var table = $('#example').DataTable( {
lengthChange: false,
buttons: [ 'copy', 'excel', 'pdf', 'colvis' ]
} );
table.buttons().container()
.appendTo( '#example_wrapper .small-6.columns:eq(0)' );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../../../media/js/dataTables.foundation.js">../../../../media/js/dataTables.foundation.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="../../js/buttons.foundation.js">../../js/buttons.foundation.js</a>
</li>
<li>
<a href="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js">//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js</a>
</li>
<li>
<a href="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js">//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js</a>
</li>
<li>
<a href="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js">//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js</a>
</li>
<li>
<a href="../../js/buttons.html5.js">../../js/buttons.html5.js</a>
</li>
<li>
<a href="../../js/buttons.print.js">../../js/buttons.print.js</a>
</li>
<li>
<a href="../../js/buttons.colVis.js">../../js/buttons.colVis.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href=
"//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css">//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css</a>
</li>
<li>
<a href="../../../../media/css/dataTables.foundation.css">../../../../media/css/dataTables.foundation.css</a>
</li>
<li>
<a href="../../css/buttons.foundation.css">../../css/buttons.foundation.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="../html5/simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="../html5/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../html5/filename.html">File name</a>
</li>
<li>
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../html5/columns.html">Column selectors</a>
</li>
<li>
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="../html5/pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="../html5/pdfImage.html">PDF - image</a>
</li>
<li>
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="../html5/customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Styling</a></h3>
<ul class="toc active">
<li>
<a href="./bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="./bootstrap4.html">Bootstrap 4</a>
</li>
<li class="active">
<a href="./foundation.html">Foundation styling</a>
</li>
<li>
<a href="./jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="./semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="./icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,888 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Icons</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js">
</script>
<script type="text/javascript" language="javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js">
</script>
<script type="text/javascript" language="javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.html5.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'copyHtml5',
text: '<i class="fa fa-files-o"></i>',
titleAttr: 'Copy'
},
{
extend: 'excelHtml5',
text: '<i class="fa fa-file-excel-o"></i>',
titleAttr: 'Excel'
},
{
extend: 'csvHtml5',
text: '<i class="fa fa-file-text-o"></i>',
titleAttr: 'CSV'
},
{
extend: 'pdfHtml5',
text: '<i class="fa fa-file-pdf-o"></i>',
titleAttr: 'PDF'
}
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Icons</span></h1>
<div class="info">
<p>This example shows how the <a href="//datatables.net/reference/option/buttons.buttons.text"><code class="option" title=
"Buttons initialisation option">buttons.buttons.text</code></a> option can be used to show an icon in the button instead of regular text. Note also that the
<a href="//datatables.net/reference/option/buttons.buttons.titleAttr"><code class="option" title=
"Buttons initialisation option">buttons.buttons.titleAttr</code></a> option is used to specify a tooltip title for the button, which can improve accessibility,
letting users know what the button does when they hover their mouse over the button.</p>
<p><a href="http://fortawesome.github.io/">Font Awesome</a> is used to provide the icons uses here, but any image / font can be used as suits your
requirements.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'copyHtml5',
text: '&lt;i class=&quot;fa fa-files-o&quot;&gt;&lt;/i&gt;',
titleAttr: 'Copy'
},
{
extend: 'excelHtml5',
text: '&lt;i class=&quot;fa fa-file-excel-o&quot;&gt;&lt;/i&gt;',
titleAttr: 'Excel'
},
{
extend: 'csvHtml5',
text: '&lt;i class=&quot;fa fa-file-text-o&quot;&gt;&lt;/i&gt;',
titleAttr: 'CSV'
},
{
extend: 'pdfHtml5',
text: '&lt;i class=&quot;fa fa-file-pdf-o&quot;&gt;&lt;/i&gt;',
titleAttr: 'PDF'
}
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js">//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js</a>
</li>
<li>
<a href="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js">//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js</a>
</li>
<li>
<a href="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js">//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js</a>
</li>
<li>
<a href="../../js/buttons.html5.js">../../js/buttons.html5.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../css/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
</li>
<li>
<a href=
"//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="../html5/simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="../html5/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../html5/filename.html">File name</a>
</li>
<li>
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../html5/columns.html">Column selectors</a>
</li>
<li>
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="../html5/pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="../html5/pdfImage.html">PDF - image</a>
</li>
<li>
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="../html5/customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Styling</a></h3>
<ul class="toc active">
<li>
<a href="./bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="./bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="./foundation.html">Foundation styling</a>
</li>
<li>
<a href="./jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="./semanticui.html">Semantic UI styling</a>
</li>
<li class="active">
<a href="./icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,65 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<title>Buttons examples - Styling</title>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Buttons example <span>Styling</span></h1>
<div class="info">
<p>The Buttons library, like all DataTables extensions provides extensive styling options and the ability to be styled by the styling frameworks supported by
DataTables core. This section shows Buttons being styling using external CSS frameworks.</p>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<div class="toc">
<div class="toc-group">
<h3><a href="./index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="./bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="./bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="./foundation.html">Foundation styling</a>
</li>
<li>
<a href="./jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="./semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="./icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,872 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - jQuery UI styling</title>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="../../../../media/css/dataTables.jqueryui.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.jqueryui.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/dataTables.jqueryui.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.jqueryui.js">
</script>
<script type="text/javascript" language="javascript" src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js">
</script>
<script type="text/javascript" language="javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js">
</script>
<script type="text/javascript" language="javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.html5.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.print.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.colVis.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
var table = $('#example').DataTable( {
lengthChange: false,
buttons: [ 'copy', 'excel', 'pdf', 'colvis' ]
} );
table.buttons().container()
.insertBefore( '#example_filter' );
} );
</script>
</head>
<body class="dt-example dt-example-jqueryui">
<div class="container">
<section>
<h1>Buttons example <span>jQuery UI styling</span></h1>
<div class="info">
<p>This example shows DataTables and Buttons being used with <a href="http://jqueryui.com/">jQuery UI</a> providing the base styling information.</p>
<p>Note that for ease of implementation, the <a href="//datatables.net/reference/option/buttons"><code class="option" title=
"Buttons initialisation option">buttons</code></a> option is specified with a basic set of buttons, and the <a href=
"//datatables.net/reference/api/buttons().container()"><code class="api" title="Buttons API method">buttons().container()</code></a> method then used to insert the
buttons into the document. It is possible to use the <a href="//datatables.net/reference/option/dom"><code class="option" title=
"DataTables initialisation option">dom</code></a> option to insert the buttons like in the DataTables styled examples, but the default <a href=
"//datatables.net/reference/option/dom"><code class="option" title="DataTables initialisation option">dom</code></a> option used for jQuery UI styling is quite
complex and would need to be fully restated.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
var table = $('#example').DataTable( {
lengthChange: false,
buttons: [ 'copy', 'excel', 'pdf', 'colvis' ]
} );
table.buttons().container()
.insertBefore( '#example_filter' );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../../../media/js/dataTables.jqueryui.js">../../../../media/js/dataTables.jqueryui.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="../../js/buttons.jqueryui.js">../../js/buttons.jqueryui.js</a>
</li>
<li>
<a href="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js">//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js</a>
</li>
<li>
<a href="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js">//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js</a>
</li>
<li>
<a href="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js">//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js</a>
</li>
<li>
<a href="../../js/buttons.html5.js">../../js/buttons.html5.js</a>
</li>
<li>
<a href="../../js/buttons.print.js">../../js/buttons.print.js</a>
</li>
<li>
<a href="../../js/buttons.colVis.js">../../js/buttons.colVis.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css</a>
</li>
<li>
<a href="../../../../media/css/dataTables.jqueryui.css">../../../../media/css/dataTables.jqueryui.css</a>
</li>
<li>
<a href="../../css/buttons.jqueryui.css">../../css/buttons.jqueryui.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="../html5/simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="../html5/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../html5/filename.html">File name</a>
</li>
<li>
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../html5/columns.html">Column selectors</a>
</li>
<li>
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="../html5/pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="../html5/pdfImage.html">PDF - image</a>
</li>
<li>
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="../html5/customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Styling</a></h3>
<ul class="toc active">
<li>
<a href="./bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="./bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="./foundation.html">Foundation styling</a>
</li>
<li class="active">
<a href="./jqueryui.html">jQuery UI styling</a>
</li>
<li>
<a href="./semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="./icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@ -0,0 +1,873 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Buttons example - Semantic UI styling</title>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css">
<link rel="stylesheet" type="text/css" href="../../../../media/css/dataTables.semanticui.css">
<link rel="stylesheet" type="text/css" href="../../css/buttons.semanticui.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/dataTables.semanticui.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.semanticui.js">
</script>
<script type="text/javascript" language="javascript" src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js">
</script>
<script type="text/javascript" language="javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js">
</script>
<script type="text/javascript" language="javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.html5.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.print.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/buttons.colVis.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
var table = $('#example').DataTable( {
lengthChange: false,
buttons: [ 'copy', 'excel', 'pdf', 'colvis' ]
} );
table.buttons().container()
.appendTo( $('div.eight.column:eq(0)', table.table().container()) );
} );
</script>
</head>
<body class="dt-example dt-example-semanticui">
<div class="container">
<section>
<h1>Buttons example <span>Semantic UI styling</span></h1>
<div class="info">
<p>This example shows DataTables and the Buttons extension being used with the <a href="http://semantic-ui.com/">Semantic UI</a> framework providing the styling.
The DataTables / Semantic UI integration provides seamless integration for DataTables to be used in a Semantic UI page.</p>
<p>Note that for ease of implementation, the <a href="//datatables.net/reference/option/buttons"><code class="option" title=
"Buttons initialisation option">buttons</code></a> option is specified with a basic set of buttons, and the <a href=
"//datatables.net/reference/api/buttons().container()"><code class="api" title="Buttons API method">buttons().container()</code></a> method then used to insert the
buttons into the document. It is possible to use the <a href="//datatables.net/reference/option/dom"><code class="option" title=
"DataTables initialisation option">dom</code></a> option to insert the buttons like in the DataTables styled examples, but the default <a href=
"//datatables.net/reference/option/dom"><code class="option" title="DataTables initialisation option">dom</code></a> option used for Semantic UI styling is quite
complex and would need to be fully restated.</p>
</div>
<table id="example" class="ui celled table" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
var table = $('#example').DataTable( {
lengthChange: false,
buttons: [ 'copy', 'excel', 'pdf', 'colvis' ]
} );
table.buttons().container()
.appendTo( $('div.eight.column:eq(0)', table.table().container()) );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../../../media/js/dataTables.semanticui.js">../../../../media/js/dataTables.semanticui.js</a>
</li>
<li>
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
</li>
<li>
<a href="../../js/buttons.semanticui.js">../../js/buttons.semanticui.js</a>
</li>
<li>
<a href="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js">//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js</a>
</li>
<li>
<a href="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js">//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js</a>
</li>
<li>
<a href="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js">//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js</a>
</li>
<li>
<a href="../../js/buttons.html5.js">../../js/buttons.html5.js</a>
</li>
<li>
<a href="../../js/buttons.print.js">../../js/buttons.print.js</a>
</li>
<li>
<a href="../../js/buttons.colVis.js">../../js/buttons.colVis.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css">//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css</a>
</li>
<li>
<a href="../../../../media/css/dataTables.semanticui.css">../../../../media/css/dataTables.semanticui.css</a>
</li>
<li>
<a href="../../css/buttons.semanticui.css">../../css/buttons.semanticui.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../initialisation/simple.html">Basic initialisation</a>
</li>
<li>
<a href="../initialisation/export.html">File export</a>
</li>
<li>
<a href="../initialisation/custom.html">Custom button</a>
</li>
<li>
<a href="../initialisation/className.html">Class names</a>
</li>
<li>
<a href="../initialisation/keys.html">Keyboard activation</a>
</li>
<li>
<a href="../initialisation/collections.html">Collections</a>
</li>
<li>
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
</li>
<li>
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
</li>
<li>
<a href="../initialisation/plugins.html">Plug-ins</a>
</li>
<li>
<a href="../initialisation/new.html">`new` initialisation</a>
</li>
<li>
<a href="../initialisation/multiple.html">Multiple button groups</a>
</li>
<li>
<a href="../initialisation/pageLength.html">Page length</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
<ul class="toc">
<li>
<a href="../html5/simple.html">HTML5 export buttons</a>
</li>
<li>
<a href="../html5/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../html5/filename.html">File name</a>
</li>
<li>
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../html5/columns.html">Column selectors</a>
</li>
<li>
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
</li>
<li>
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
</li>
<li>
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
</li>
<li>
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
</li>
<li>
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
</li>
<li>
<a href="../html5/pdfMessage.html">PDF - message</a>
</li>
<li>
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
</li>
<li>
<a href="../html5/pdfImage.html">PDF - image</a>
</li>
<li>
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
</li>
<li>
<a href="../html5/customFile.html">Custom file (JSON)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../flash/index.html">Flash data export</a></h3>
<ul class="toc">
<li>
<a href="../flash/simple.html">Flash export buttons</a>
</li>
<li>
<a href="../flash/tsv.html">Tab separated values</a>
</li>
<li>
<a href="../flash/filename.html">File name</a>
</li>
<li>
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
</li>
<li>
<a href="../flash/pdfMessage.html">PDF message</a>
</li>
<li>
<a href="../flash/pdfPage.html">Page size and orientation</a>
</li>
<li>
<a href="../flash/hidden.html">Hidden initialisation</a>
</li>
<li>
<a href="../flash/swfPath.html">SWF file location</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
<ul class="toc">
<li>
<a href="../column_visibility/simple.html">Basic column visibility</a>
</li>
<li>
<a href="../column_visibility/layout.html">Multi-column layout</a>
</li>
<li>
<a href="../column_visibility/text.html">Internationalisation</a>
</li>
<li>
<a href="../column_visibility/restore.html">Restore column visibility</a>
</li>
<li>
<a href="../column_visibility/columns.html">Select columns</a>
</li>
<li>
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
</li>
<li>
<a href="../column_visibility/columnGroups.html">Column groups</a>
</li>
<li>
<a href="../column_visibility/stateSave.html">State saving</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../print/index.html">Print</a></h3>
<ul class="toc">
<li>
<a href="../print/simple.html">Print button</a>
</li>
<li>
<a href="../print/message.html">Custom message</a>
</li>
<li>
<a href="../print/columns.html">Export options - column selector</a>
</li>
<li>
<a href="../print/select.html">Export options - row selector</a>
</li>
<li>
<a href="../print/autoPrint.html">Disable auto print</a>
</li>
<li>
<a href="../print/customisation.html">Customisation of the print view window</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/enable.html">Enable / disable</a>
</li>
<li>
<a href="../api/text.html">Dynamic text</a>
</li>
<li>
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
</li>
<li>
<a href="../api/group.html">Group selection</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Styling</a></h3>
<ul class="toc active">
<li>
<a href="./bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="./bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="./foundation.html">Foundation styling</a>
</li>
<li>
<a href="./jqueryui.html">jQuery UI styling</a>
</li>
<li class="active">
<a href="./semanticui.html">Semantic UI styling</a>
</li>
<li>
<a href="./icons.html">Icons</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>