first commit
This commit is contained in:
@ -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>
|
||||
@ -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 > 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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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('<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();
|
||||
} );
|
||||
} );</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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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 <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'
|
||||
}
|
||||
}
|
||||
}
|
||||
} );
|
||||
} );</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>
|
||||
@ -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>
|
||||
@ -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*="10"]', 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>
|
||||
@ -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^="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' );
|
||||
}
|
||||
});
|
||||
}
|
||||
}]
|
||||
});
|
||||
});</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>
|
||||
@ -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^="C"]', 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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
266
assets/plugin/datatables/extensions/Buttons/examples/index.html
Normal file
266
assets/plugin/datatables/extensions/Buttons/examples/index.html
Normal 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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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 <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' );
|
||||
}
|
||||
}
|
||||
]
|
||||
} );
|
||||
} );</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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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(
|
||||
'<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' );
|
||||
}
|
||||
}
|
||||
]
|
||||
} );
|
||||
} );</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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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: '<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'
|
||||
}
|
||||
]
|
||||
} );
|
||||
} );</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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
Reference in New Issue
Block a user