mirror of
https://gitee.com/coder-xiaomo/flashsale
synced 2025-09-13 15:31:38 +08:00
添加Metronic（作为LFS）
This commit is contained in:
@@ -0,0 +1,646 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
|
||||
<title>TableTools example - Button arrangement</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/dataTables.tableTools.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="../../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../js/dataTables.tableTools.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: 'T<"clear">lfrtip',
|
||||
tableTools: {
|
||||
"aButtons": [ "copy", "print" ]
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>TableTools example <span>- Button arrangement</span></h1>
|
||||
|
||||
<div class="info">
|
||||
<p>TableTools makes it very simple to arrange the buttons in the toolbar as you see fit. Using the
|
||||
<code>aButtons</code> parameter you can use any of the <a href=
|
||||
"http://datatables.net/extensions/tabletools/buttons">predefined buttons</a> or <a href=
|
||||
"http://datatables.net/extensions/tabletools/button_options">customised buttons</a>. The example below
|
||||
shows how TableTools can be initialised to provide only the 'copy-to-clipboard' and 'print view'
|
||||
options (i.e. no save to local file option is available).</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>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenna Elliott</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena Gaines</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Silva</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$5,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>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai Rios</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri Berry</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Technical Author</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>36</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>18</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ebony Grimes</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Russell Chavez</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity Butler</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>System Architect</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Miriam Weiss</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Odessa Jackson</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Elton Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna Snider</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$3,120</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 brush: js;">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
dom: 'T<"clear">lfrtip',
|
||||
tableTools: {
|
||||
"aButtons": [ "copy", "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="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
|
||||
<li><a href=
|
||||
"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
|
||||
<li><a href="../js/dataTables.tableTools.js">../js/dataTables.tableTools.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 brush: js;"></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/dataTables.tableTools.css">../css/dataTables.tableTools.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">Examples</a></h3>
|
||||
<ul class="toc active">
|
||||
<li><a href="./bootstrap.html">Bootstrap styling</a></li>
|
||||
<li><a href="./button_text.html">Custom button text</a></li>
|
||||
<li><a href="./collection.html">Button collections</a></li>
|
||||
<li><a href="./multi_instance.html">Multiple toolbars</a></li>
|
||||
<li class="active"><a href="./alter_buttons.html">Button arrangement</a></li>
|
||||
<li><a href="./multiple_tables.html">Multiple tables</a></li>
|
||||
<li><a href="./defaults.html">Defaults</a></li>
|
||||
<li><a href="./new_init.html">Initialisation with `new`</a></li>
|
||||
<li><a href="./pdf_message.html">PDF message</a></li>
|
||||
<li><a href="./plug-in.html">Plug-in button types</a></li>
|
||||
<li><a href="./select_os.html">Row selection - operating system style</a></li>
|
||||
<li><a href="./select_single.html">Row selection - single row select</a></li>
|
||||
<li><a href="./simple.html">Basic initialisation</a></li>
|
||||
<li><a href="./swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="./select_multi.html">Row selection - multi-row select</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/extras">extras</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-2014<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,658 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
|
||||
<title>TableTools example - Bootstrap styling</title>
|
||||
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../examples/resources/bootstrap/3/dataTables.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">
|
||||
|
||||
body { font-size: 140%; }
|
||||
div.DTTT { margin-bottom: 0.5em; float: right; }
|
||||
div.dataTables_wrapper { clear: both; }
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../js/dataTables.tableTools.js"></script>
|
||||
<script type="text/javascript" language="javascript" src=
|
||||
"../../../examples/resources/bootstrap/3/dataTables.bootstrap.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();
|
||||
var tt = new $.fn.dataTable.TableTools( table );
|
||||
|
||||
$( tt.fnContainer() ).insertBefore('div.dataTables_wrapper');
|
||||
} );
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>TableTools example <span>- Bootstrap styling</span></h1>
|
||||
|
||||
<div class="info">
|
||||
<p><a href="http://twitter.github.com/bootstrap/">Twitter Bootstrap</a> is a very powerful design
|
||||
framework for allowing you to very quickly create applications with a unified look and feel. <a href=
|
||||
"http://datatables.net/manual/styling/bootstrap">DataTables integrates well</a> with Bootstrap, and so
|
||||
does TableTools.</p>
|
||||
|
||||
<p>This example shows the default Bootstrap theme being used with a Bootstrap styled DataTable. The
|
||||
<a href="new_init.html"><code>new</code></a> form of initialising TableTools is used here, as the
|
||||
Bootstrap integration uses a complex <a href="//datatables.net/reference/option/dom"><code class=
|
||||
"option" title="Initialisation option">dom</code></a> option (it is possible to provide a custom
|
||||
<a href="//datatables.net/reference/option/dom"><code class="option" title=
|
||||
"Initialisation option">dom</code></a> option if you want to, this is just for simplicity!).</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>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenna Elliott</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena Gaines</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Silva</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$5,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>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai Rios</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri Berry</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Technical Author</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>36</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>18</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ebony Grimes</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Russell Chavez</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity Butler</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>System Architect</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Miriam Weiss</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Odessa Jackson</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Elton Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna Snider</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$3,120</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 brush: js;">$(document).ready(function() {
|
||||
var table = $('#example').DataTable();
|
||||
var tt = new $.fn.dataTable.TableTools( table );
|
||||
|
||||
$( tt.fnContainer() ).insertBefore('div.dataTables_wrapper');
|
||||
} );</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="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
|
||||
<li><a href=
|
||||
"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
|
||||
<li><a href="../js/dataTables.tableTools.js">../js/dataTables.tableTools.js</a></li>
|
||||
<li><a href=
|
||||
"../../../examples/resources/bootstrap/3/dataTables.bootstrap.js">../../../examples/resources/bootstrap/3/dataTables.bootstrap.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 brush: js;">body { font-size: 140%; }
|
||||
div.DTTT { margin-bottom: 0.5em; float: right; }
|
||||
div.dataTables_wrapper { 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=
|
||||
"//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css</a></li>
|
||||
<li><a href=
|
||||
"../../../examples/resources/bootstrap/3/dataTables.bootstrap.css">../../../examples/resources/bootstrap/3/dataTables.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="./index.html">Examples</a></h3>
|
||||
<ul class="toc active">
|
||||
<li class="active"><a href="./bootstrap.html">Bootstrap styling</a></li>
|
||||
<li><a href="./button_text.html">Custom button text</a></li>
|
||||
<li><a href="./collection.html">Button collections</a></li>
|
||||
<li><a href="./multi_instance.html">Multiple toolbars</a></li>
|
||||
<li><a href="./alter_buttons.html">Button arrangement</a></li>
|
||||
<li><a href="./multiple_tables.html">Multiple tables</a></li>
|
||||
<li><a href="./defaults.html">Defaults</a></li>
|
||||
<li><a href="./new_init.html">Initialisation with `new`</a></li>
|
||||
<li><a href="./pdf_message.html">PDF message</a></li>
|
||||
<li><a href="./plug-in.html">Plug-in button types</a></li>
|
||||
<li><a href="./select_os.html">Row selection - operating system style</a></li>
|
||||
<li><a href="./select_single.html">Row selection - single row select</a></li>
|
||||
<li><a href="./simple.html">Basic initialisation</a></li>
|
||||
<li><a href="./swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="./select_multi.html">Row selection - multi-row select</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/extras">extras</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-2014<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,679 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
|
||||
<title>TableTools example - Custom button text</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/dataTables.tableTools.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="../../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../js/dataTables.tableTools.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": 'T<"clear">lfrtip',
|
||||
"tableTools": {
|
||||
"aButtons": [
|
||||
{
|
||||
"sExtends": "copy",
|
||||
"sButtonText": "Copy to clipboard"
|
||||
},
|
||||
{
|
||||
"sExtends": "csv",
|
||||
"sButtonText": "Save to CSV"
|
||||
},
|
||||
{
|
||||
"sExtends": "xls",
|
||||
"oSelectorOpts": {
|
||||
page: 'current'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>TableTools example <span>- Custom button text</span></h1>
|
||||
|
||||
<div class="info">
|
||||
<p>You may wish to set your own text for the buttons in the TableTools toolbar, rather than relying on
|
||||
the default built-in text. This is done by overriding the <code>sButtonText</code> parameter of
|
||||
whatever button you wish to alter. The way TableTools allows you to alter a predefined button is by
|
||||
'extending' it (using the <code>sExtends</code> parameter) and then setting the overriding
|
||||
parameter.</p>
|
||||
|
||||
<p>A full list of the parameters which can be used is <a href=
|
||||
"http://datatables.net/extensions/tabletools/button_options">available on the DataTables.net
|
||||
web-site</a>. This example shows how to set the button text as 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>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenna Elliott</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena Gaines</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Silva</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$5,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>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai Rios</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri Berry</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Technical Author</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>36</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>18</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ebony Grimes</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Russell Chavez</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity Butler</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>System Architect</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Miriam Weiss</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Odessa Jackson</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Elton Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna Snider</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$3,120</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 brush: js;">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
"dom": 'T<"clear">lfrtip',
|
||||
"tableTools": {
|
||||
"aButtons": [
|
||||
{
|
||||
"sExtends": "copy",
|
||||
"sButtonText": "Copy to clipboard"
|
||||
},
|
||||
{
|
||||
"sExtends": "csv",
|
||||
"sButtonText": "Save to CSV"
|
||||
},
|
||||
{
|
||||
"sExtends": "xls",
|
||||
"oSelectorOpts": {
|
||||
page: 'current'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
} );
|
||||
} );</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="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
|
||||
<li><a href=
|
||||
"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
|
||||
<li><a href="../js/dataTables.tableTools.js">../js/dataTables.tableTools.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 brush: js;"></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/dataTables.tableTools.css">../css/dataTables.tableTools.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">Examples</a></h3>
|
||||
<ul class="toc active">
|
||||
<li><a href="./bootstrap.html">Bootstrap styling</a></li>
|
||||
<li class="active"><a href="./button_text.html">Custom button text</a></li>
|
||||
<li><a href="./collection.html">Button collections</a></li>
|
||||
<li><a href="./multi_instance.html">Multiple toolbars</a></li>
|
||||
<li><a href="./alter_buttons.html">Button arrangement</a></li>
|
||||
<li><a href="./multiple_tables.html">Multiple tables</a></li>
|
||||
<li><a href="./defaults.html">Defaults</a></li>
|
||||
<li><a href="./new_init.html">Initialisation with `new`</a></li>
|
||||
<li><a href="./pdf_message.html">PDF message</a></li>
|
||||
<li><a href="./plug-in.html">Plug-in button types</a></li>
|
||||
<li><a href="./select_os.html">Row selection - operating system style</a></li>
|
||||
<li><a href="./select_single.html">Row selection - single row select</a></li>
|
||||
<li><a href="./simple.html">Basic initialisation</a></li>
|
||||
<li><a href="./swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="./select_multi.html">Row selection - multi-row select</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/extras">extras</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-2014<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,663 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
|
||||
<title>TableTools example - Button collections</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/dataTables.tableTools.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="../../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../js/dataTables.tableTools.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": 'T<"clear">lfrtip',
|
||||
"tableTools": {
|
||||
"aButtons": [
|
||||
"copy",
|
||||
"print",
|
||||
{
|
||||
"sExtends": "collection",
|
||||
"sButtonText": "Save",
|
||||
"aButtons": [ "csv", "xls", "pdf" ]
|
||||
}
|
||||
]
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>TableTools example <span>- Button collections</span></h1>
|
||||
|
||||
<div class="info">
|
||||
<p>TableTools provides the ability to group buttons into a hidden drop down list, which is activated by
|
||||
clicking on a top-level button. This is achieved by extending the 'collection' predefined button type
|
||||
and setting it's <code>aButtons</code> parameter with the same options as the top level buttons (note
|
||||
that you cannot currently use a collection within a collection).</p>
|
||||
|
||||
<p>The example below shows the file save buttons grouped into a collection, while the copy and print
|
||||
buttons are left on the top level.</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>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenna Elliott</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena Gaines</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Silva</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$5,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>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai Rios</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri Berry</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Technical Author</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>36</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>18</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ebony Grimes</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Russell Chavez</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity Butler</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>System Architect</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Miriam Weiss</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Odessa Jackson</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Elton Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna Snider</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$3,120</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 brush: js;">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
"dom": 'T<"clear">lfrtip',
|
||||
"tableTools": {
|
||||
"aButtons": [
|
||||
"copy",
|
||||
"print",
|
||||
{
|
||||
"sExtends": "collection",
|
||||
"sButtonText": "Save",
|
||||
"aButtons": [ "csv", "xls", "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="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
|
||||
<li><a href=
|
||||
"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
|
||||
<li><a href="../js/dataTables.tableTools.js">../js/dataTables.tableTools.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 brush: js;"></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/dataTables.tableTools.css">../css/dataTables.tableTools.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">Examples</a></h3>
|
||||
<ul class="toc active">
|
||||
<li><a href="./bootstrap.html">Bootstrap styling</a></li>
|
||||
<li><a href="./button_text.html">Custom button text</a></li>
|
||||
<li class="active"><a href="./collection.html">Button collections</a></li>
|
||||
<li><a href="./multi_instance.html">Multiple toolbars</a></li>
|
||||
<li><a href="./alter_buttons.html">Button arrangement</a></li>
|
||||
<li><a href="./multiple_tables.html">Multiple tables</a></li>
|
||||
<li><a href="./defaults.html">Defaults</a></li>
|
||||
<li><a href="./new_init.html">Initialisation with `new`</a></li>
|
||||
<li><a href="./pdf_message.html">PDF message</a></li>
|
||||
<li><a href="./plug-in.html">Plug-in button types</a></li>
|
||||
<li><a href="./select_os.html">Row selection - operating system style</a></li>
|
||||
<li><a href="./select_single.html">Row selection - single row select</a></li>
|
||||
<li><a href="./simple.html">Basic initialisation</a></li>
|
||||
<li><a href="./swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="./select_multi.html">Row selection - multi-row select</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/extras">extras</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-2014<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,642 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
|
||||
<title>TableTools example - Defaults</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/dataTables.tableTools.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="../../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../js/dataTables.tableTools.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.TableTools.defaults.aButtons = [ "copy", "csv", "xls" ];
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
dom: 'T<"clear">lfrtip'
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>TableTools example <span>- Defaults</span></h1>
|
||||
|
||||
<div class="info">
|
||||
<p>TableTools provides the ability to override the default initialisation parameters that are used when
|
||||
creating a new instance. This this particularly useful if you have multiple tables which you want to
|
||||
have the same TableTools behaviour - rather than declaring the structure multiple times, you can just
|
||||
set the defaults once. This example shows how to alter the default 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>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenna Elliott</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena Gaines</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Silva</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$5,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>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai Rios</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri Berry</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Technical Author</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>36</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>18</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ebony Grimes</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Russell Chavez</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity Butler</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>System Architect</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Miriam Weiss</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Odessa Jackson</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Elton Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna Snider</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$3,120</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 brush: js;">$.fn.dataTable.TableTools.defaults.aButtons = [ "copy", "csv", "xls" ];
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
dom: 'T<"clear">lfrtip'
|
||||
} );
|
||||
} );</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="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
|
||||
<li><a href=
|
||||
"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
|
||||
<li><a href="../js/dataTables.tableTools.js">../js/dataTables.tableTools.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 brush: js;"></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/dataTables.tableTools.css">../css/dataTables.tableTools.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">Examples</a></h3>
|
||||
<ul class="toc active">
|
||||
<li><a href="./bootstrap.html">Bootstrap styling</a></li>
|
||||
<li><a href="./button_text.html">Custom button text</a></li>
|
||||
<li><a href="./collection.html">Button collections</a></li>
|
||||
<li><a href="./multi_instance.html">Multiple toolbars</a></li>
|
||||
<li><a href="./alter_buttons.html">Button arrangement</a></li>
|
||||
<li><a href="./multiple_tables.html">Multiple tables</a></li>
|
||||
<li class="active"><a href="./defaults.html">Defaults</a></li>
|
||||
<li><a href="./new_init.html">Initialisation with `new`</a></li>
|
||||
<li><a href="./pdf_message.html">PDF message</a></li>
|
||||
<li><a href="./plug-in.html">Plug-in button types</a></li>
|
||||
<li><a href="./select_os.html">Row selection - operating system style</a></li>
|
||||
<li><a href="./select_single.html">Row selection - single row select</a></li>
|
||||
<li><a href="./simple.html">Basic initialisation</a></li>
|
||||
<li><a href="./swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="./select_multi.html">Row selection - multi-row select</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/extras">extras</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-2014<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,80 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<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="../../../media/js/jquery.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>TableTools examples - TableTools examples</title>
|
||||
</head>
|
||||
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>TableTools example <span>- TableTools examples</span></h1>
|
||||
|
||||
<div class="info">
|
||||
<p>TableTools is a plug-in for the DataTables HTML table enhancer, which adds a highly customisable
|
||||
button toolbar to a DataTable. Key features include:</p>
|
||||
|
||||
<ul>
|
||||
<li>Copy to clipboard</li>
|
||||
<li>Save table data as CSV, XLS or PDF files</li>
|
||||
<li>Print view for clean printing</li>
|
||||
<li>Row selection options</li>
|
||||
<li>Easy use predefined buttons</li>
|
||||
<li>Simple customisation of buttons</li>
|
||||
<li>Well defined API for advanced control</li>
|
||||
</ul>
|
||||
</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">Examples</a></h3>
|
||||
<ul class="toc">
|
||||
<li><a href="./bootstrap.html">Bootstrap styling</a></li>
|
||||
<li><a href="./button_text.html">Custom button text</a></li>
|
||||
<li><a href="./collection.html">Button collections</a></li>
|
||||
<li><a href="./multi_instance.html">Multiple toolbars</a></li>
|
||||
<li><a href="./alter_buttons.html">Button arrangement</a></li>
|
||||
<li><a href="./multiple_tables.html">Multiple tables</a></li>
|
||||
<li><a href="./defaults.html">Defaults</a></li>
|
||||
<li><a href="./new_init.html">Initialisation with `new`</a></li>
|
||||
<li><a href="./pdf_message.html">PDF message</a></li>
|
||||
<li><a href="./plug-in.html">Plug-in button types</a></li>
|
||||
<li><a href="./select_os.html">Row selection - operating system style</a></li>
|
||||
<li><a href="./select_single.html">Row selection - single row select</a></li>
|
||||
<li><a href="./simple.html">Basic initialisation</a></li>
|
||||
<li><a href="./swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="./select_multi.html">Row selection - multi-row select</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/extras">extras</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-2014<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,647 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
|
||||
<title>TableTools example - Multiple toolbars</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/dataTables.tableTools.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="../../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../js/dataTables.tableTools.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: 'T<"clear">lfrtip<"clear spacer">T',
|
||||
tableTools: {
|
||||
"aButtons": [ "copy", "print" ]
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>TableTools example <span>- Multiple toolbars</span></h1>
|
||||
|
||||
<div class="info">
|
||||
<p>Like all DataTables control elements, TableTools can have multiple instances specified in the
|
||||
<a href="//datatables.net/reference/option/dom"><code class="option" title=
|
||||
"Initialisation option">dom</code></a> parameter of DataTables. This will create two TableTools
|
||||
toolbars next to the table, providing the same functions.</p>
|
||||
|
||||
<p>An example of when this might be useful is to show the toolbar both above and below the table - as
|
||||
is done 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>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenna Elliott</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena Gaines</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Silva</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$5,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>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai Rios</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri Berry</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Technical Author</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>36</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>18</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ebony Grimes</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Russell Chavez</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity Butler</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>System Architect</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Miriam Weiss</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Odessa Jackson</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Elton Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna Snider</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$3,120</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 brush: js;">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
dom: 'T<"clear">lfrtip<"clear spacer">T',
|
||||
tableTools: {
|
||||
"aButtons": [ "copy", "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="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
|
||||
<li><a href=
|
||||
"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
|
||||
<li><a href="../js/dataTables.tableTools.js">../js/dataTables.tableTools.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 brush: js;"></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/dataTables.tableTools.css">../css/dataTables.tableTools.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">Examples</a></h3>
|
||||
<ul class="toc active">
|
||||
<li><a href="./bootstrap.html">Bootstrap styling</a></li>
|
||||
<li><a href="./button_text.html">Custom button text</a></li>
|
||||
<li><a href="./collection.html">Button collections</a></li>
|
||||
<li class="active"><a href="./multi_instance.html">Multiple toolbars</a></li>
|
||||
<li><a href="./alter_buttons.html">Button arrangement</a></li>
|
||||
<li><a href="./multiple_tables.html">Multiple tables</a></li>
|
||||
<li><a href="./defaults.html">Defaults</a></li>
|
||||
<li><a href="./new_init.html">Initialisation with `new`</a></li>
|
||||
<li><a href="./pdf_message.html">PDF message</a></li>
|
||||
<li><a href="./plug-in.html">Plug-in button types</a></li>
|
||||
<li><a href="./select_os.html">Row selection - operating system style</a></li>
|
||||
<li><a href="./select_single.html">Row selection - single row select</a></li>
|
||||
<li><a href="./simple.html">Basic initialisation</a></li>
|
||||
<li><a href="./swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="./select_multi.html">Row selection - multi-row select</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/extras">extras</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-2014<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,428 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
|
||||
<title>TableTools example - Multiple tables</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/dataTables.tableTools.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="../../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../js/dataTables.tableTools.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: 'T<"clear">lfrtip'
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>TableTools example <span>- Multiple tables</span></h1>
|
||||
|
||||
<div class="info">
|
||||
<p>This example shows how multiple tables can be initialised with DataTables and TableTools in a single
|
||||
call to the <code>$().DataTable()</code> function. Basically it works as you would expect - no special
|
||||
considerations need be made!</p>
|
||||
</div>
|
||||
|
||||
<table id="" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>63</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenna Elliott</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>33</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>55</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai Rios</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Russell Chavez</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>20</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Miriam Weiss</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Odessa Jackson</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Elton Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>29</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<table id="" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Jena Gaines</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Silva</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>36</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>28</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>$3,120</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 brush: js;">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
dom: 'T<"clear">lfrtip'
|
||||
} );
|
||||
} );</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="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
|
||||
<li><a href=
|
||||
"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
|
||||
<li><a href="../js/dataTables.tableTools.js">../js/dataTables.tableTools.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 brush: js;"></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/dataTables.tableTools.css">../css/dataTables.tableTools.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">Examples</a></h3>
|
||||
<ul class="toc active">
|
||||
<li><a href="./bootstrap.html">Bootstrap styling</a></li>
|
||||
<li><a href="./button_text.html">Custom button text</a></li>
|
||||
<li><a href="./collection.html">Button collections</a></li>
|
||||
<li><a href="./multi_instance.html">Multiple toolbars</a></li>
|
||||
<li><a href="./alter_buttons.html">Button arrangement</a></li>
|
||||
<li class="active"><a href="./multiple_tables.html">Multiple tables</a></li>
|
||||
<li><a href="./defaults.html">Defaults</a></li>
|
||||
<li><a href="./new_init.html">Initialisation with `new`</a></li>
|
||||
<li><a href="./pdf_message.html">PDF message</a></li>
|
||||
<li><a href="./plug-in.html">Plug-in button types</a></li>
|
||||
<li><a href="./select_os.html">Row selection - operating system style</a></li>
|
||||
<li><a href="./select_single.html">Row selection - single row select</a></li>
|
||||
<li><a href="./simple.html">Basic initialisation</a></li>
|
||||
<li><a href="./swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="./select_multi.html">Row selection - multi-row select</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/extras">extras</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-2014<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,644 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
|
||||
<title>TableTools example - Initialisation with `new`</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/dataTables.tableTools.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="../../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../js/dataTables.tableTools.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();
|
||||
var tt = new $.fn.dataTable.TableTools( table );
|
||||
|
||||
$( tt.fnContainer() ).insertAfter('div.info');
|
||||
} );
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>TableTools example <span>- Initialisation with `new`</span></h1>
|
||||
|
||||
<div class="info">
|
||||
<p>Typically when working with TableTools, the initialisation and insertion into the DOM will be done
|
||||
automatically by DataTables, through the use of the <a href=
|
||||
"//datatables.net/reference/option/dom"><code class="option" title=
|
||||
"Initialisation option">dom</code></a> parameter. However, it is also possible to initialise TableTools
|
||||
manually as shown in the example below using <code>new $.fn.dataTable.TableTools();</code>.</p>
|
||||
|
||||
<p>Once initialised you can insert the TableTools tool bar node anywhere you wish into the DOM using
|
||||
the <code>fnContainer()</code> API method to get the node.</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>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenna Elliott</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena Gaines</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Silva</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$5,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>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai Rios</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri Berry</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Technical Author</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>36</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>18</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ebony Grimes</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Russell Chavez</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity Butler</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>System Architect</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Miriam Weiss</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Odessa Jackson</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Elton Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna Snider</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$3,120</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 brush: js;">$(document).ready(function() {
|
||||
var table = $('#example').DataTable();
|
||||
var tt = new $.fn.dataTable.TableTools( table );
|
||||
|
||||
$( tt.fnContainer() ).insertAfter('div.info');
|
||||
} );</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="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
|
||||
<li><a href=
|
||||
"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
|
||||
<li><a href="../js/dataTables.tableTools.js">../js/dataTables.tableTools.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 brush: js;"></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/dataTables.tableTools.css">../css/dataTables.tableTools.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">Examples</a></h3>
|
||||
<ul class="toc active">
|
||||
<li><a href="./bootstrap.html">Bootstrap styling</a></li>
|
||||
<li><a href="./button_text.html">Custom button text</a></li>
|
||||
<li><a href="./collection.html">Button collections</a></li>
|
||||
<li><a href="./multi_instance.html">Multiple toolbars</a></li>
|
||||
<li><a href="./alter_buttons.html">Button arrangement</a></li>
|
||||
<li><a href="./multiple_tables.html">Multiple tables</a></li>
|
||||
<li><a href="./defaults.html">Defaults</a></li>
|
||||
<li class="active"><a href="./new_init.html">Initialisation with `new`</a></li>
|
||||
<li><a href="./pdf_message.html">PDF message</a></li>
|
||||
<li><a href="./plug-in.html">Plug-in button types</a></li>
|
||||
<li><a href="./select_os.html">Row selection - operating system style</a></li>
|
||||
<li><a href="./select_single.html">Row selection - single row select</a></li>
|
||||
<li><a href="./simple.html">Basic initialisation</a></li>
|
||||
<li><a href="./swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="./select_multi.html">Row selection - multi-row select</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/extras">extras</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-2014<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,663 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
|
||||
<title>TableTools example - PDF message</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/dataTables.tableTools.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="../../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../js/dataTables.tableTools.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: 'T<"clear">lfrtip',
|
||||
tableTools: {
|
||||
"aButtons": [
|
||||
"copy",
|
||||
"csv",
|
||||
"xls",
|
||||
{
|
||||
"sExtends": "pdf",
|
||||
"sPdfOrientation": "landscape",
|
||||
"sPdfMessage": "Your custom message would go here."
|
||||
},
|
||||
"print"
|
||||
]
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>TableTools example <span>- PDF message</span></h1>
|
||||
|
||||
<div class="info">
|
||||
<p>This example shows how you can add a message to the saved PDF using the <code>sPdfMessage</code>
|
||||
parameter. It also shows that the orientation of the output PDF can be changed to landscape which is
|
||||
useful if you have a lot of 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>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenna Elliott</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena Gaines</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Silva</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$5,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>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai Rios</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri Berry</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Technical Author</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>36</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>18</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ebony Grimes</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Russell Chavez</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity Butler</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>System Architect</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Miriam Weiss</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Odessa Jackson</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Elton Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna Snider</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$3,120</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 brush: js;">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
dom: 'T<"clear">lfrtip',
|
||||
tableTools: {
|
||||
"aButtons": [
|
||||
"copy",
|
||||
"csv",
|
||||
"xls",
|
||||
{
|
||||
"sExtends": "pdf",
|
||||
"sPdfOrientation": "landscape",
|
||||
"sPdfMessage": "Your custom message would go here."
|
||||
},
|
||||
"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="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
|
||||
<li><a href=
|
||||
"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
|
||||
<li><a href="../js/dataTables.tableTools.js">../js/dataTables.tableTools.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 brush: js;"></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/dataTables.tableTools.css">../css/dataTables.tableTools.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">Examples</a></h3>
|
||||
<ul class="toc active">
|
||||
<li><a href="./bootstrap.html">Bootstrap styling</a></li>
|
||||
<li><a href="./button_text.html">Custom button text</a></li>
|
||||
<li><a href="./collection.html">Button collections</a></li>
|
||||
<li><a href="./multi_instance.html">Multiple toolbars</a></li>
|
||||
<li><a href="./alter_buttons.html">Button arrangement</a></li>
|
||||
<li><a href="./multiple_tables.html">Multiple tables</a></li>
|
||||
<li><a href="./defaults.html">Defaults</a></li>
|
||||
<li><a href="./new_init.html">Initialisation with `new`</a></li>
|
||||
<li class="active"><a href="./pdf_message.html">PDF message</a></li>
|
||||
<li><a href="./plug-in.html">Plug-in button types</a></li>
|
||||
<li><a href="./select_os.html">Row selection - operating system style</a></li>
|
||||
<li><a href="./select_single.html">Row selection - single row select</a></li>
|
||||
<li><a href="./simple.html">Basic initialisation</a></li>
|
||||
<li><a href="./swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="./select_multi.html">Row selection - multi-row select</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/extras">extras</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-2014<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,684 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
|
||||
<title>TableTools example - Plug-in button types</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/dataTables.tableTools.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="../../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../js/dataTables.tableTools.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.TableTools.buttons.copy_to_div = $.extend(
|
||||
true,
|
||||
$.fn.dataTable.TableTools.buttonBase,
|
||||
{
|
||||
"sNewLine": "<br>",
|
||||
"sButtonText": "Copy to element",
|
||||
"sDiv": "",
|
||||
"fnClick": function( nButton, oConfig ) {
|
||||
document.getElementById(oConfig.sDiv).innerHTML =
|
||||
this.fnGetTableData(oConfig);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
dom: 'T<"clear">lfrtip',
|
||||
tableTools: {
|
||||
"aButtons": [ {
|
||||
"sExtends": "copy_to_div",
|
||||
"sButtonText": "Copy to div",
|
||||
"sDiv": "copy"
|
||||
} ]
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>TableTools example <span>- Plug-in button types</span></h1>
|
||||
|
||||
<div class="info">
|
||||
<p>This example shows how you can add a message to the saved PDF using the <code>sPdfMessage</code>
|
||||
parameter. It also shows that the orientation of the output PDF can be changed to landscape which is
|
||||
useful if you have a lot of columns.</p>
|
||||
</div>
|
||||
|
||||
<div id="copy" class="box" style="height: 100px; overflow: auto">
|
||||
Copy output will go here
|
||||
</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>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenna Elliott</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena Gaines</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Silva</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$5,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>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai Rios</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri Berry</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Technical Author</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>36</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>18</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ebony Grimes</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Russell Chavez</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity Butler</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>System Architect</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Miriam Weiss</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Odessa Jackson</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Elton Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna Snider</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$3,120</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 brush: js;">$.fn.dataTable.TableTools.buttons.copy_to_div = $.extend(
|
||||
true,
|
||||
$.fn.dataTable.TableTools.buttonBase,
|
||||
{
|
||||
"sNewLine": "<br>",
|
||||
"sButtonText": "Copy to element",
|
||||
"sDiv": "",
|
||||
"fnClick": function( nButton, oConfig ) {
|
||||
document.getElementById(oConfig.sDiv).innerHTML =
|
||||
this.fnGetTableData(oConfig);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
dom: 'T<"clear">lfrtip',
|
||||
tableTools: {
|
||||
"aButtons": [ {
|
||||
"sExtends": "copy_to_div",
|
||||
"sButtonText": "Copy to div",
|
||||
"sDiv": "copy"
|
||||
} ]
|
||||
}
|
||||
} );
|
||||
} );</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="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
|
||||
<li><a href=
|
||||
"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
|
||||
<li><a href="../js/dataTables.tableTools.js">../js/dataTables.tableTools.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 brush: js;"></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/dataTables.tableTools.css">../css/dataTables.tableTools.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">Examples</a></h3>
|
||||
<ul class="toc active">
|
||||
<li><a href="./bootstrap.html">Bootstrap styling</a></li>
|
||||
<li><a href="./button_text.html">Custom button text</a></li>
|
||||
<li><a href="./collection.html">Button collections</a></li>
|
||||
<li><a href="./multi_instance.html">Multiple toolbars</a></li>
|
||||
<li><a href="./alter_buttons.html">Button arrangement</a></li>
|
||||
<li><a href="./multiple_tables.html">Multiple tables</a></li>
|
||||
<li><a href="./defaults.html">Defaults</a></li>
|
||||
<li><a href="./new_init.html">Initialisation with `new`</a></li>
|
||||
<li><a href="./pdf_message.html">PDF message</a></li>
|
||||
<li class="active"><a href="./plug-in.html">Plug-in button types</a></li>
|
||||
<li><a href="./select_os.html">Row selection - operating system style</a></li>
|
||||
<li><a href="./select_single.html">Row selection - single row select</a></li>
|
||||
<li><a href="./simple.html">Basic initialisation</a></li>
|
||||
<li><a href="./swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="./select_multi.html">Row selection - multi-row select</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/extras">extras</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-2014<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,657 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
|
||||
<title>TableTools example - Row selection - multi-row select</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/dataTables.tableTools.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="../../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../js/dataTables.tableTools.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: 'T<"clear">lfrtip',
|
||||
tableTools: {
|
||||
"sRowSelect": "multi",
|
||||
"aButtons": [ "select_all", "select_none" ]
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>TableTools example <span>- Row selection - multi-row select</span></h1>
|
||||
|
||||
<div class="info">
|
||||
<p>As well as providing a button toolbar, TableTools provides everything needed to have selectable rows
|
||||
in the table. TableTools has four row selection modes of operation:</p>
|
||||
|
||||
<ul>
|
||||
<li><code>none</code> - Default, where no user row selection options are available</li>
|
||||
<li><code>single</code> - A single row can be selected</li>
|
||||
<li><code>multi</code> - Multiple rows can be selected simply by clicking on the rows</li>
|
||||
<li><code>os</code> - Operating System like selection where you can use the shift and ctrl / cmd
|
||||
keys on your keyboard to add / remove rows from the selection.</li>
|
||||
</ul>
|
||||
|
||||
<p>This example shows the <code>multi</code> select option. There are also a number of <a href=
|
||||
"http://datatables.net/extras/tabletools/buttons">pre-defined buttons</a> to provide functions such as
|
||||
select-all and select-none, 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>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenna Elliott</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena Gaines</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Silva</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$5,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>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai Rios</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri Berry</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Technical Author</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>36</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>18</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ebony Grimes</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Russell Chavez</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity Butler</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>System Architect</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Miriam Weiss</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Odessa Jackson</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Elton Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna Snider</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$3,120</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 brush: js;">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
dom: 'T<"clear">lfrtip',
|
||||
tableTools: {
|
||||
"sRowSelect": "multi",
|
||||
"aButtons": [ "select_all", "select_none" ]
|
||||
}
|
||||
} );
|
||||
} );</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="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
|
||||
<li><a href=
|
||||
"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
|
||||
<li><a href="../js/dataTables.tableTools.js">../js/dataTables.tableTools.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 brush: js;"></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/dataTables.tableTools.css">../css/dataTables.tableTools.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">Examples</a></h3>
|
||||
<ul class="toc active">
|
||||
<li><a href="./bootstrap.html">Bootstrap styling</a></li>
|
||||
<li><a href="./button_text.html">Custom button text</a></li>
|
||||
<li><a href="./collection.html">Button collections</a></li>
|
||||
<li><a href="./multi_instance.html">Multiple toolbars</a></li>
|
||||
<li><a href="./alter_buttons.html">Button arrangement</a></li>
|
||||
<li><a href="./multiple_tables.html">Multiple tables</a></li>
|
||||
<li><a href="./defaults.html">Defaults</a></li>
|
||||
<li><a href="./new_init.html">Initialisation with `new`</a></li>
|
||||
<li><a href="./pdf_message.html">PDF message</a></li>
|
||||
<li><a href="./plug-in.html">Plug-in button types</a></li>
|
||||
<li><a href="./select_os.html">Row selection - operating system style</a></li>
|
||||
<li><a href="./select_single.html">Row selection - single row select</a></li>
|
||||
<li><a href="./simple.html">Basic initialisation</a></li>
|
||||
<li><a href="./swf_path.html">Setting the SWF path</a></li>
|
||||
<li class="active"><a href="./select_multi.html">Row selection - multi-row select</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/extras">extras</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-2014<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,658 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
|
||||
<title>TableTools example - Row selection - operating system style</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/dataTables.tableTools.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="../../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../js/dataTables.tableTools.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: 'T<"clear">lfrtip',
|
||||
tableTools: {
|
||||
"sRowSelect": "os",
|
||||
"aButtons": [ "select_all", "select_none" ]
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>TableTools example <span>- Row selection - operating system style</span></h1>
|
||||
|
||||
<div class="info">
|
||||
<p>As well as providing a button toolbar, TableTools provides everything needed to have selectable rows
|
||||
in the table. TableTools has four row selection modes of operation:</p>
|
||||
|
||||
<ul>
|
||||
<li><code>none</code> - Default, where no user row selection options are available</li>
|
||||
<li><code>single</code> - A single row can be selected</li>
|
||||
<li><code>multi</code> - Multiple rows can be selected simply by clicking on the rows</li>
|
||||
<li><code>os</code> - Operating System like selection where you can use the shift and ctrl / cmd
|
||||
keys on your keyboard to add / remove rows from the selection.</li>
|
||||
</ul>
|
||||
|
||||
<p>This example shows the <code>os</code> select option. Without keyboard interaction a single row can
|
||||
be selected at a time, but multiple rows can be selected in a range using the shift key, while rows can
|
||||
be added and removed from the selection using the ctrl / cmd key.</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>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenna Elliott</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena Gaines</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Silva</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$5,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>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai Rios</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri Berry</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Technical Author</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>36</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>18</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ebony Grimes</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Russell Chavez</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity Butler</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>System Architect</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Miriam Weiss</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Odessa Jackson</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Elton Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna Snider</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$3,120</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 brush: js;">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
dom: 'T<"clear">lfrtip',
|
||||
tableTools: {
|
||||
"sRowSelect": "os",
|
||||
"aButtons": [ "select_all", "select_none" ]
|
||||
}
|
||||
} );
|
||||
} );</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="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
|
||||
<li><a href=
|
||||
"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
|
||||
<li><a href="../js/dataTables.tableTools.js">../js/dataTables.tableTools.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 brush: js;"></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/dataTables.tableTools.css">../css/dataTables.tableTools.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">Examples</a></h3>
|
||||
<ul class="toc active">
|
||||
<li><a href="./bootstrap.html">Bootstrap styling</a></li>
|
||||
<li><a href="./button_text.html">Custom button text</a></li>
|
||||
<li><a href="./collection.html">Button collections</a></li>
|
||||
<li><a href="./multi_instance.html">Multiple toolbars</a></li>
|
||||
<li><a href="./alter_buttons.html">Button arrangement</a></li>
|
||||
<li><a href="./multiple_tables.html">Multiple tables</a></li>
|
||||
<li><a href="./defaults.html">Defaults</a></li>
|
||||
<li><a href="./new_init.html">Initialisation with `new`</a></li>
|
||||
<li><a href="./pdf_message.html">PDF message</a></li>
|
||||
<li><a href="./plug-in.html">Plug-in button types</a></li>
|
||||
<li class="active"><a href="./select_os.html">Row selection - operating system
|
||||
style</a></li>
|
||||
<li><a href="./select_single.html">Row selection - single row select</a></li>
|
||||
<li><a href="./simple.html">Basic initialisation</a></li>
|
||||
<li><a href="./swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="./select_multi.html">Row selection - multi-row select</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/extras">extras</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-2014<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,654 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
|
||||
<title>TableTools example - Row selection - single row select</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/dataTables.tableTools.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="../../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../js/dataTables.tableTools.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: 'T<"clear">lfrtip',
|
||||
tableTools: {
|
||||
"sRowSelect": "single"
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>TableTools example <span>- Row selection - single row select</span></h1>
|
||||
|
||||
<div class="info">
|
||||
<p>As well as providing a button toolbar, TableTools provides everything needed to have selectable rows
|
||||
in the table. TableTools has four row selection modes of operation:</p>
|
||||
|
||||
<ul>
|
||||
<li><code>none</code> - Default, where no user row selection options are available</li>
|
||||
<li><code>single</code> - A single row can be selected</li>
|
||||
<li><code>multi</code> - Multiple rows can be selected simply by clicking on the rows</li>
|
||||
<li><code>os</code> - Operating System like selection where you can use the shift and ctrl / cmd
|
||||
keys on your keyboard to add / remove rows from the selection.</li>
|
||||
</ul>
|
||||
|
||||
<p>This example shows the <code>single</code> select option.</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>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenna Elliott</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena Gaines</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Silva</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$5,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>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai Rios</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri Berry</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Technical Author</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>36</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>18</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ebony Grimes</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Russell Chavez</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity Butler</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>System Architect</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Miriam Weiss</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Odessa Jackson</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Elton Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna Snider</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$3,120</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 brush: js;">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
dom: 'T<"clear">lfrtip',
|
||||
tableTools: {
|
||||
"sRowSelect": "single"
|
||||
}
|
||||
} );
|
||||
} );</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="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
|
||||
<li><a href=
|
||||
"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
|
||||
<li><a href="../js/dataTables.tableTools.js">../js/dataTables.tableTools.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 brush: js;"></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/dataTables.tableTools.css">../css/dataTables.tableTools.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">Examples</a></h3>
|
||||
<ul class="toc active">
|
||||
<li><a href="./bootstrap.html">Bootstrap styling</a></li>
|
||||
<li><a href="./button_text.html">Custom button text</a></li>
|
||||
<li><a href="./collection.html">Button collections</a></li>
|
||||
<li><a href="./multi_instance.html">Multiple toolbars</a></li>
|
||||
<li><a href="./alter_buttons.html">Button arrangement</a></li>
|
||||
<li><a href="./multiple_tables.html">Multiple tables</a></li>
|
||||
<li><a href="./defaults.html">Defaults</a></li>
|
||||
<li><a href="./new_init.html">Initialisation with `new`</a></li>
|
||||
<li><a href="./pdf_message.html">PDF message</a></li>
|
||||
<li><a href="./plug-in.html">Plug-in button types</a></li>
|
||||
<li><a href="./select_os.html">Row selection - operating system style</a></li>
|
||||
<li class="active"><a href="./select_single.html">Row selection - single row
|
||||
select</a></li>
|
||||
<li><a href="./simple.html">Basic initialisation</a></li>
|
||||
<li><a href="./swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="./select_multi.html">Row selection - multi-row select</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/extras">extras</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-2014<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,642 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
|
||||
<title>TableTools example - Basic initialisation</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/dataTables.tableTools.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="../../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../js/dataTables.tableTools.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: 'T<"clear">lfrtip'
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>TableTools example <span>- Basic initialisation</span></h1>
|
||||
|
||||
<div class="info">
|
||||
<p>This example shows the basic initialisation of TableTools by simply including the <code class=
|
||||
"string" title="String">T</code> option in DataTables' <a href=
|
||||
"//datatables.net/reference/option/dom"><code class="option" title=
|
||||
"Initialisation option">dom</code></a> parameter. This tell DataTables to insert the TableTools toolbar
|
||||
in that location. Remember to include the Javascript and CSS source files as well!</p>
|
||||
|
||||
<p>It is worth noting that you might need to <a href="swf_path.html">set the <code>sSwfPath</code>
|
||||
parameter</a> to tell TableTools where to find the SWF file for copy and file save.</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>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenna Elliott</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena Gaines</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Silva</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$5,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>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai Rios</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri Berry</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Technical Author</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>36</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>18</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ebony Grimes</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Russell Chavez</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity Butler</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>System Architect</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Miriam Weiss</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Odessa Jackson</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Elton Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna Snider</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$3,120</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 brush: js;">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
dom: 'T<"clear">lfrtip'
|
||||
} );
|
||||
} );</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="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
|
||||
<li><a href=
|
||||
"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
|
||||
<li><a href="../js/dataTables.tableTools.js">../js/dataTables.tableTools.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 brush: js;"></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/dataTables.tableTools.css">../css/dataTables.tableTools.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">Examples</a></h3>
|
||||
<ul class="toc active">
|
||||
<li><a href="./bootstrap.html">Bootstrap styling</a></li>
|
||||
<li><a href="./button_text.html">Custom button text</a></li>
|
||||
<li><a href="./collection.html">Button collections</a></li>
|
||||
<li><a href="./multi_instance.html">Multiple toolbars</a></li>
|
||||
<li><a href="./alter_buttons.html">Button arrangement</a></li>
|
||||
<li><a href="./multiple_tables.html">Multiple tables</a></li>
|
||||
<li><a href="./defaults.html">Defaults</a></li>
|
||||
<li><a href="./new_init.html">Initialisation with `new`</a></li>
|
||||
<li><a href="./pdf_message.html">PDF message</a></li>
|
||||
<li><a href="./plug-in.html">Plug-in button types</a></li>
|
||||
<li><a href="./select_os.html">Row selection - operating system style</a></li>
|
||||
<li><a href="./select_single.html">Row selection - single row select</a></li>
|
||||
<li class="active"><a href="./simple.html">Basic initialisation</a></li>
|
||||
<li><a href="./swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="./select_multi.html">Row selection - multi-row select</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/extras">extras</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-2014<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,648 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
|
||||
<title>TableTools example - Setting the SWF path</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/dataTables.tableTools.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="../../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../js/dataTables.tableTools.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: 'T<"clear">lfrtip',
|
||||
tableTools: {
|
||||
"sSwfPath": "../swf/copy_csv_xls_pdf.swf"
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>TableTools example <span>- Setting the SWF path</span></h1>
|
||||
|
||||
<div class="info">
|
||||
<p>TableTools uses a Flash SWF file to provide the ability to copy text to the system clipboard and
|
||||
save files locally. TableTools must be able to load the SWF file in order to provide these facilities.
|
||||
If you aren't using the same directory structure as the TableTools package, you will need to set the
|
||||
<code>sSwfPath</code> TableTools parameter, as shown in this example.</p>
|
||||
|
||||
<p>Note that TableTools ships with two different SWF files - the only difference between them is that
|
||||
one of them provides the ability to save PDF files while the other doesn't. The trade off is that the
|
||||
PDF capable file is significantly larger in size (56K v 2K).</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>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenna Elliott</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena Gaines</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Silva</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$5,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>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai Rios</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri Berry</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Technical Author</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>36</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>18</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ebony Grimes</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Russell Chavez</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity Butler</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>System Architect</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Miriam Weiss</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Odessa Jackson</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Elton Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna Snider</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$3,120</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 brush: js;">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
dom: 'T<"clear">lfrtip',
|
||||
tableTools: {
|
||||
"sSwfPath": "../swf/copy_csv_xls_pdf.swf"
|
||||
}
|
||||
} );
|
||||
} );</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="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
|
||||
<li><a href=
|
||||
"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
|
||||
<li><a href="../js/dataTables.tableTools.js">../js/dataTables.tableTools.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 brush: js;"></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/dataTables.tableTools.css">../css/dataTables.tableTools.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">Examples</a></h3>
|
||||
<ul class="toc active">
|
||||
<li><a href="./bootstrap.html">Bootstrap styling</a></li>
|
||||
<li><a href="./button_text.html">Custom button text</a></li>
|
||||
<li><a href="./collection.html">Button collections</a></li>
|
||||
<li><a href="./multi_instance.html">Multiple toolbars</a></li>
|
||||
<li><a href="./alter_buttons.html">Button arrangement</a></li>
|
||||
<li><a href="./multiple_tables.html">Multiple tables</a></li>
|
||||
<li><a href="./defaults.html">Defaults</a></li>
|
||||
<li><a href="./new_init.html">Initialisation with `new`</a></li>
|
||||
<li><a href="./pdf_message.html">PDF message</a></li>
|
||||
<li><a href="./plug-in.html">Plug-in button types</a></li>
|
||||
<li><a href="./select_os.html">Row selection - operating system style</a></li>
|
||||
<li><a href="./select_single.html">Row selection - single row select</a></li>
|
||||
<li><a href="./simple.html">Basic initialisation</a></li>
|
||||
<li class="active"><a href="./swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="./select_multi.html">Row selection - multi-row select</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/extras">extras</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-2014<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