mirror of
https://github.com/DataTables/DataTables.git
synced 2025-02-19 17:54:14 +01:00
Adding new integration files from the source repo. These are all currently proof of concept / technical previews and not ready for production use.
This commit is contained in:
Allan Jardine
parent
62f92f16f7
commit
b69ccaeb6c
906
examples/styling/bootstrap4.html
Normal file
906
examples/styling/bootstrap4.html
Normal file
@ -0,0 +1,906 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<title>DataTables example - Bootstrap 4 (Tech. preview)</title>
|
||||
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/dataTables.bootstrap4.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.0.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/dataTables.bootstrap4.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable();
|
||||
} );
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example dt-example-bootstrap4">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Bootstrap 4 (Tech. preview)</span></h1>
|
||||
<div class="info">
|
||||
<p>As with Bootstrap 3, DataTables can also be integrated seamlessly with Bootstrap 4. At the time of writing this example Bootstrap 4 was at the alpha stage, so
|
||||
things can, and probably still will change before DataTables integration with Bootstrap 4 is complete.</p>
|
||||
<p>This integration is done simply by including the DataTables Bootstrap 4 files (CSS and JS) which will set the defaults needed for DataTables to be initialised
|
||||
as normal, as shown in this examples.</p>
|
||||
<p>These integration libraries are not currently available in the DataTables download builder, but will become so when Bootstrap 4 is released. Until then they
|
||||
need to be included from source.</p>
|
||||
</div>
|
||||
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Airi Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>28</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Fiona Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shou Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Olivia Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sakura Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Serge Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$112,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable();
|
||||
} );</code>
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.0.min.js">//code.jquery.com/jquery-1.12.0.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/dataTables.bootstrap4.js">../../media/js/dataTables.bootstrap4.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href=
|
||||
"//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.css">//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/css/dataTables.bootstrap4.css">../../media/css/dataTables.bootstrap4.css</a>
|
||||
</li>
|
||||
</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="../basic_init/index.html">Basic initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../basic_init/zero_configuration.html">Zero configuration</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/filter_only.html">Feature enable / disable</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/multiple_tables.html">Multiple tables</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/hidden_columns.html">Hidden columns</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/dom.html">DOM positioning</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/flexible_width.html">Flexible table width</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/state_save.html">State saving</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/language.html">Language options</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/dt_events.html">DataTables events</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/column_render.html">Column rendering</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/length_menu.html">Page length options</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/language_file.html">Language file</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/defaults.html">Setting defaults</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/row_callback.html">Row created callback</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/row_grouping.html">Row grouping</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/footer_callback.html">Footer callback</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Styling</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./display.html">Base style</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./no-classes.html">Base style - no styling classes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./cell-border.html">Base style - cell borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./compact.html">Base style - compact</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./hover.html">Base style - hover</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./order-column.html">Base style - order-column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./row-border.html">Base style - row borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./stripe.html">Base style - stripe</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./bootstrap.html">Bootstrap 3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./foundation.html">Foundation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./jqueryUI.html">jQuery UI ThemeRoller</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./semanticui.html">Semantic UI (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./uikit.html">UIKit (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../data_sources/index.html">Data sources</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../data_sources/dom.html">HTML (DOM) sourced data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../data_sources/ajax.html">Ajax sourced data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../data_sources/js_array.html">Javascript sourced data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../data_sources/server_side.html">Server-side processing</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../api/index.html">API</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../api/add_row.html">Add rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/multi_filter.html">Individual column searching (text inputs)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/highlight.html">Highlighting rows and columns</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/row_details.html">Child rows (show extra / detailed information)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/select_row.html">Row selection (multiple rows)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/select_single_row.html">Row selection and deletion (single row)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/form.html">Form inputs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/counter_columns.html">Index column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/show_hide.html">Show / hide columns dynamically</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/api_in_init.html">Using API in callbacks</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/regex.html">Search API (regular expressions)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../ajax/index.html">Ajax</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../ajax/simple.html">Ajax data source (arrays)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../ajax/objects.html">Ajax data source (objects)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../ajax/deep.html">Nested object data (objects)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../ajax/orthogonal-data.html">Orthogonal data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../ajax/null_data_source.html">Generated content for a column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../ajax/custom_data_property.html">Custom data source property</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../ajax/custom_data_flat.html">Flat array data source</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../ajax/defer_render.html">Deferred rendering for speed</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../server_side/index.html">Server-side</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../server_side/simple.html">Server-side processing</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../server_side/custom_vars.html">Custom HTTP variables</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../server_side/post.html">POST data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../server_side/ids.html">Automatic addition of row ID attributes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../server_side/object_data.html">Object data source</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../server_side/row_details.html">Row details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../server_side/select_rows.html">Row selection</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../server_side/jsonp.html">JSONP data source for remote domains</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../server_side/defer_loading.html">Deferred loading of data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../plug-ins/api.html">API plug-in methods</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../plug-ins/range_filtering.html">Custom filtering - range search</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../plug-ins/dom_sort.html">Live DOM ordering</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
|
||||
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
|
||||
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
919
examples/styling/material.html
Normal file
919
examples/styling/material.html
Normal file
@ -0,0 +1,919 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<title>DataTables example - Material Design (Tech. preview)</title>
|
||||
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.1.0/material.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/dataTables.material.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.0.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/dataTables.material.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
columnDefs: [
|
||||
{
|
||||
targets: [ 0, 1, 2 ],
|
||||
className: 'mdl-data-table__cell--non-numeric'
|
||||
}
|
||||
]
|
||||
} );
|
||||
} );
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example dt-example-material">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Material Design (Tech. preview)</span></h1>
|
||||
<div class="info">
|
||||
<p>This example shows DataTables styled for <a href="https://www.google.com/design/spec/material-design/">Google's Material Design</a>. The <a href=
|
||||
"http://getmdl.io/">Material Design Lite</a> libraries are used to provide the styling implementation for Material.</p>
|
||||
<p>This is a technical preview example and the Material Design integration for DataTables is not yet complete. This tech preview is provided to gauge the interest
|
||||
in a Material integration for DataTables and also to estimate the work that would be involved in fully supporting the styling library. As such, the Material design
|
||||
implementation for DataTables can currently only be installed from source and is not available in package managers or the DataTables downloader.</p>
|
||||
</div>
|
||||
<table id="example" class="mdl-data-table" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Airi Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>28</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Fiona Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shou Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Olivia Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sakura Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Serge Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$112,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
columnDefs: [
|
||||
{
|
||||
targets: [ 0, 1, 2 ],
|
||||
className: 'mdl-data-table__cell--non-numeric'
|
||||
}
|
||||
]
|
||||
} );
|
||||
} );</code>
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.0.min.js">//code.jquery.com/jquery-1.12.0.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/dataTables.material.js">../../media/js/dataTables.material.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href=
|
||||
"//cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.1.0/material.min.css">//cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.1.0/material.min.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/css/dataTables.material.css">../../media/css/dataTables.material.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="../basic_init/index.html">Basic initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../basic_init/zero_configuration.html">Zero configuration</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/filter_only.html">Feature enable / disable</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/multiple_tables.html">Multiple tables</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/hidden_columns.html">Hidden columns</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/dom.html">DOM positioning</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/flexible_width.html">Flexible table width</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/state_save.html">State saving</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/language.html">Language options</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/dt_events.html">DataTables events</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/column_render.html">Column rendering</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/length_menu.html">Page length options</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/language_file.html">Language file</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/defaults.html">Setting defaults</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/row_callback.html">Row created callback</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/row_grouping.html">Row grouping</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/footer_callback.html">Footer callback</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Styling</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./display.html">Base style</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./no-classes.html">Base style - no styling classes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./cell-border.html">Base style - cell borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./compact.html">Base style - compact</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./hover.html">Base style - hover</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./order-column.html">Base style - order-column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./row-border.html">Base style - row borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./stripe.html">Base style - stripe</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./bootstrap.html">Bootstrap 3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./foundation.html">Foundation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./jqueryUI.html">jQuery UI ThemeRoller</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./semanticui.html">Semantic UI (Tech. preview)</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./uikit.html">UIKit (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../data_sources/index.html">Data sources</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../data_sources/dom.html">HTML (DOM) sourced data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../data_sources/ajax.html">Ajax sourced data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../data_sources/js_array.html">Javascript sourced data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../data_sources/server_side.html">Server-side processing</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../api/index.html">API</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../api/add_row.html">Add rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/multi_filter.html">Individual column searching (text inputs)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/highlight.html">Highlighting rows and columns</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/row_details.html">Child rows (show extra / detailed information)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/select_row.html">Row selection (multiple rows)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/select_single_row.html">Row selection and deletion (single row)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/form.html">Form inputs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/counter_columns.html">Index column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/show_hide.html">Show / hide columns dynamically</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/api_in_init.html">Using API in callbacks</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/regex.html">Search API (regular expressions)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../ajax/index.html">Ajax</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../ajax/simple.html">Ajax data source (arrays)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../ajax/objects.html">Ajax data source (objects)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../ajax/deep.html">Nested object data (objects)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../ajax/orthogonal-data.html">Orthogonal data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../ajax/null_data_source.html">Generated content for a column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../ajax/custom_data_property.html">Custom data source property</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../ajax/custom_data_flat.html">Flat array data source</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../ajax/defer_render.html">Deferred rendering for speed</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../server_side/index.html">Server-side</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../server_side/simple.html">Server-side processing</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../server_side/custom_vars.html">Custom HTTP variables</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../server_side/post.html">POST data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../server_side/ids.html">Automatic addition of row ID attributes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../server_side/object_data.html">Object data source</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../server_side/row_details.html">Row details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../server_side/select_rows.html">Row selection</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../server_side/jsonp.html">JSONP data source for remote domains</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../server_side/defer_loading.html">Deferred loading of data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../plug-ins/api.html">API plug-in methods</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../plug-ins/range_filtering.html">Custom filtering - range search</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../plug-ins/dom_sort.html">Live DOM ordering</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
|
||||
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
|
||||
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
908
examples/styling/semanticui.html
Normal file
908
examples/styling/semanticui.html
Normal file
@ -0,0 +1,908 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<title>DataTables example - Semantic UI (Tech. preview)</title>
|
||||
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/dataTables.semanticui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.0.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/dataTables.semanticui.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable();
|
||||
} );
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example dt-example-semanticui">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Semantic UI (Tech. preview)</span></h1>
|
||||
<div class="info">
|
||||
<p>This example shows DataTables integrated with <a href="http://semantic-ui.com/">Semantic UI</a>. Semantic UI is a comprehensive framework that uses CSS class
|
||||
names like words to create natural language styling library.</p>
|
||||
<p>The DataTables integration with Semantic UI is still in development and not all elements might work correctly yet. Only once all of DataTables extensions fully
|
||||
support Semantic UI will the integration be complete and available via the DataTables download builder.</p>
|
||||
</div>
|
||||
<table id="example" class="ui celled table" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Airi Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>28</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Fiona Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shou Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Olivia Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sakura Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Serge Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$112,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable();
|
||||
} );</code>
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.0.min.js">//code.jquery.com/jquery-1.12.0.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/dataTables.semanticui.js">../../media/js/dataTables.semanticui.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js">//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css">//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/css/dataTables.semanticui.css">../../media/css/dataTables.semanticui.css</a>
|
||||
</li>
|
||||
</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="../basic_init/index.html">Basic initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../basic_init/zero_configuration.html">Zero configuration</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/filter_only.html">Feature enable / disable</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/multiple_tables.html">Multiple tables</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/hidden_columns.html">Hidden columns</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/dom.html">DOM positioning</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/flexible_width.html">Flexible table width</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/state_save.html">State saving</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/language.html">Language options</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/dt_events.html">DataTables events</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/column_render.html">Column rendering</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/length_menu.html">Page length options</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/language_file.html">Language file</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/defaults.html">Setting defaults</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/row_callback.html">Row created callback</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/row_grouping.html">Row grouping</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/footer_callback.html">Footer callback</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Styling</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./display.html">Base style</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./no-classes.html">Base style - no styling classes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./cell-border.html">Base style - cell borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./compact.html">Base style - compact</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./hover.html">Base style - hover</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./order-column.html">Base style - order-column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./row-border.html">Base style - row borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./stripe.html">Base style - stripe</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./bootstrap.html">Bootstrap 3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./foundation.html">Foundation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./jqueryUI.html">jQuery UI ThemeRoller</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./semanticui.html">Semantic UI (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./uikit.html">UIKit (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../data_sources/index.html">Data sources</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../data_sources/dom.html">HTML (DOM) sourced data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../data_sources/ajax.html">Ajax sourced data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../data_sources/js_array.html">Javascript sourced data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../data_sources/server_side.html">Server-side processing</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../api/index.html">API</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../api/add_row.html">Add rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/multi_filter.html">Individual column searching (text inputs)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/highlight.html">Highlighting rows and columns</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/row_details.html">Child rows (show extra / detailed information)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/select_row.html">Row selection (multiple rows)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/select_single_row.html">Row selection and deletion (single row)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/form.html">Form inputs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/counter_columns.html">Index column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/show_hide.html">Show / hide columns dynamically</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/api_in_init.html">Using API in callbacks</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/regex.html">Search API (regular expressions)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../ajax/index.html">Ajax</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../ajax/simple.html">Ajax data source (arrays)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../ajax/objects.html">Ajax data source (objects)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../ajax/deep.html">Nested object data (objects)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../ajax/orthogonal-data.html">Orthogonal data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../ajax/null_data_source.html">Generated content for a column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../ajax/custom_data_property.html">Custom data source property</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../ajax/custom_data_flat.html">Flat array data source</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../ajax/defer_render.html">Deferred rendering for speed</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../server_side/index.html">Server-side</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../server_side/simple.html">Server-side processing</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../server_side/custom_vars.html">Custom HTTP variables</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../server_side/post.html">POST data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../server_side/ids.html">Automatic addition of row ID attributes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../server_side/object_data.html">Object data source</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../server_side/row_details.html">Row details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../server_side/select_rows.html">Row selection</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../server_side/jsonp.html">JSONP data source for remote domains</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../server_side/defer_loading.html">Deferred loading of data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../plug-ins/api.html">API plug-in methods</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../plug-ins/range_filtering.html">Custom filtering - range search</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../plug-ins/dom_sort.html">Live DOM ordering</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
|
||||
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
|
||||
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
902
examples/styling/uikit.html
Normal file
902
examples/styling/uikit.html
Normal file
@ -0,0 +1,902 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<title>DataTables example - UIKit (Tech. preview)</title>
|
||||
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/uikit/2.24.3/css/uikit.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/dataTables.uikit.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.0.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/dataTables.uikit.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable();
|
||||
} );
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example dt-example-uikit">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>UIKit (Tech. preview)</span></h1>
|
||||
<div class="info">
|
||||
<p>This example shows DataTables integrated with <a href="http://getuikit.com/">UIKit</a>.</p>
|
||||
<p>The DataTables integration with UIKit is still in development and not all elements might work correctly yet. Only once all of DataTables extensions fully
|
||||
support UIKit will the integration be complete and available via the DataTables download builder.</p>
|
||||
</div>
|
||||
<table id="example" class="uk-table uk-table-hover uk-table-striped" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Airi Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>28</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Fiona Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shou Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Olivia Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sakura Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Serge Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$112,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable();
|
||||
} );</code>
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.0.min.js">//code.jquery.com/jquery-1.12.0.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/dataTables.uikit.js">../../media/js/dataTables.uikit.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//cdnjs.cloudflare.com/ajax/libs/uikit/2.24.3/css/uikit.min.css">//cdnjs.cloudflare.com/ajax/libs/uikit/2.24.3/css/uikit.min.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/css/dataTables.uikit.css">../../media/css/dataTables.uikit.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="../basic_init/index.html">Basic initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../basic_init/zero_configuration.html">Zero configuration</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/filter_only.html">Feature enable / disable</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/multiple_tables.html">Multiple tables</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/hidden_columns.html">Hidden columns</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/dom.html">DOM positioning</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/flexible_width.html">Flexible table width</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/state_save.html">State saving</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../basic_init/language.html">Language options</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/dt_events.html">DataTables events</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/column_render.html">Column rendering</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/length_menu.html">Page length options</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/language_file.html">Language file</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/defaults.html">Setting defaults</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/row_callback.html">Row created callback</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/row_grouping.html">Row grouping</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/footer_callback.html">Footer callback</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Styling</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./display.html">Base style</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./no-classes.html">Base style - no styling classes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./cell-border.html">Base style - cell borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./compact.html">Base style - compact</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./hover.html">Base style - hover</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./order-column.html">Base style - order-column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./row-border.html">Base style - row borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./stripe.html">Base style - stripe</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./bootstrap.html">Bootstrap 3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./foundation.html">Foundation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./jqueryUI.html">jQuery UI ThemeRoller</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./semanticui.html">Semantic UI (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./uikit.html">UIKit (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../data_sources/index.html">Data sources</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../data_sources/dom.html">HTML (DOM) sourced data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../data_sources/ajax.html">Ajax sourced data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../data_sources/js_array.html">Javascript sourced data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../data_sources/server_side.html">Server-side processing</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../api/index.html">API</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../api/add_row.html">Add rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/multi_filter.html">Individual column searching (text inputs)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/highlight.html">Highlighting rows and columns</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/row_details.html">Child rows (show extra / detailed information)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/select_row.html">Row selection (multiple rows)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/select_single_row.html">Row selection and deletion (single row)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/form.html">Form inputs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/counter_columns.html">Index column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/show_hide.html">Show / hide columns dynamically</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/api_in_init.html">Using API in callbacks</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../api/regex.html">Search API (regular expressions)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../ajax/index.html">Ajax</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../ajax/simple.html">Ajax data source (arrays)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../ajax/objects.html">Ajax data source (objects)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../ajax/deep.html">Nested object data (objects)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../ajax/orthogonal-data.html">Orthogonal data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../ajax/null_data_source.html">Generated content for a column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../ajax/custom_data_property.html">Custom data source property</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../ajax/custom_data_flat.html">Flat array data source</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../ajax/defer_render.html">Deferred rendering for speed</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../server_side/index.html">Server-side</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../server_side/simple.html">Server-side processing</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../server_side/custom_vars.html">Custom HTTP variables</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../server_side/post.html">POST data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../server_side/ids.html">Automatic addition of row ID attributes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../server_side/object_data.html">Object data source</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../server_side/row_details.html">Row details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../server_side/select_rows.html">Row selection</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../server_side/jsonp.html">JSONP data source for remote domains</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../server_side/defer_loading.html">Deferred loading of data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../plug-ins/api.html">API plug-in methods</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../plug-ins/range_filtering.html">Custom filtering - range search</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../plug-ins/dom_sort.html">Live DOM ordering</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
|
||||
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
|
||||
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
196
media/css/dataTables.bootstrap4.css
Normal file
196
media/css/dataTables.bootstrap4.css
Normal file
@ -0,0 +1,196 @@
|
||||
table.dataTable {
|
||||
clear: both;
|
||||
margin-top: 6px !important;
|
||||
margin-bottom: 6px !important;
|
||||
max-width: none !important;
|
||||
}
|
||||
table.dataTable td,
|
||||
table.dataTable th {
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
table.dataTable td.dataTables_empty,
|
||||
table.dataTable th.dataTables_empty {
|
||||
text-align: center;
|
||||
}
|
||||
table.dataTable.nowrap th,
|
||||
table.dataTable.nowrap td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
div.dataTables_wrapper div.dataTables_length label {
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_length select {
|
||||
width: 75px;
|
||||
display: inline-block;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_filter {
|
||||
text-align: right;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_filter label {
|
||||
font-weight: normal;
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_filter input {
|
||||
margin-left: 0.5em;
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_info {
|
||||
padding-top: 0.85em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_paginate {
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
text-align: right;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
|
||||
margin: 2px 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_processing {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 200px;
|
||||
margin-left: -100px;
|
||||
margin-top: -26px;
|
||||
text-align: center;
|
||||
padding: 1em 0;
|
||||
}
|
||||
|
||||
table.dataTable thead > tr > th.sorting_asc, table.dataTable thead > tr > th.sorting_desc, table.dataTable thead > tr > th.sorting,
|
||||
table.dataTable thead > tr > td.sorting_asc,
|
||||
table.dataTable thead > tr > td.sorting_desc,
|
||||
table.dataTable thead > tr > td.sorting {
|
||||
padding-right: 30px;
|
||||
}
|
||||
table.dataTable thead > tr > th:active,
|
||||
table.dataTable thead > tr > td:active {
|
||||
outline: none;
|
||||
}
|
||||
table.dataTable thead .sorting,
|
||||
table.dataTable thead .sorting_asc,
|
||||
table.dataTable thead .sorting_desc,
|
||||
table.dataTable thead .sorting_asc_disabled,
|
||||
table.dataTable thead .sorting_desc_disabled {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
table.dataTable thead .sorting:before, table.dataTable thead .sorting:after,
|
||||
table.dataTable thead .sorting_asc:before,
|
||||
table.dataTable thead .sorting_asc:after,
|
||||
table.dataTable thead .sorting_desc:before,
|
||||
table.dataTable thead .sorting_desc:after,
|
||||
table.dataTable thead .sorting_asc_disabled:before,
|
||||
table.dataTable thead .sorting_asc_disabled:after,
|
||||
table.dataTable thead .sorting_desc_disabled:before,
|
||||
table.dataTable thead .sorting_desc_disabled:after {
|
||||
position: absolute;
|
||||
bottom: 0.9em;
|
||||
display: block;
|
||||
opacity: 0.3;
|
||||
}
|
||||
table.dataTable thead .sorting:before,
|
||||
table.dataTable thead .sorting_asc:before,
|
||||
table.dataTable thead .sorting_desc:before,
|
||||
table.dataTable thead .sorting_asc_disabled:before,
|
||||
table.dataTable thead .sorting_desc_disabled:before {
|
||||
right: 1em;
|
||||
content: "\2191";
|
||||
}
|
||||
table.dataTable thead .sorting:after,
|
||||
table.dataTable thead .sorting_asc:after,
|
||||
table.dataTable thead .sorting_desc:after,
|
||||
table.dataTable thead .sorting_asc_disabled:after,
|
||||
table.dataTable thead .sorting_desc_disabled:after {
|
||||
right: 0.5em;
|
||||
content: "\2193";
|
||||
}
|
||||
table.dataTable thead .sorting_asc:before,
|
||||
table.dataTable thead .sorting_desc:after {
|
||||
opacity: 1;
|
||||
}
|
||||
table.dataTable thead .sorting_asc_disabled:before,
|
||||
table.dataTable thead .sorting_desc_disabled:after {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
div.dataTables_scrollHead table.dataTable {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
div.dataTables_scrollBody table {
|
||||
border-top: none;
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
div.dataTables_scrollBody table thead .sorting:after,
|
||||
div.dataTables_scrollBody table thead .sorting_asc:after,
|
||||
div.dataTables_scrollBody table thead .sorting_desc:after {
|
||||
display: none;
|
||||
}
|
||||
div.dataTables_scrollBody table tbody tr:first-child th,
|
||||
div.dataTables_scrollBody table tbody tr:first-child td {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
div.dataTables_scrollFoot table {
|
||||
margin-top: 0 !important;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
div.dataTables_wrapper div.dataTables_length,
|
||||
div.dataTables_wrapper div.dataTables_filter,
|
||||
div.dataTables_wrapper div.dataTables_info,
|
||||
div.dataTables_wrapper div.dataTables_paginate {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
table.dataTable.table-condensed > thead > tr > th {
|
||||
padding-right: 20px;
|
||||
}
|
||||
table.dataTable.table-condensed .sorting:after,
|
||||
table.dataTable.table-condensed .sorting_asc:after,
|
||||
table.dataTable.table-condensed .sorting_desc:after {
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
}
|
||||
|
||||
table.table-bordered.dataTable {
|
||||
border-collapse: separate !important;
|
||||
}
|
||||
table.table-bordered.dataTable th,
|
||||
table.table-bordered.dataTable td {
|
||||
border-left-width: 0;
|
||||
}
|
||||
table.table-bordered.dataTable th:last-child, table.table-bordered.dataTable th:last-child,
|
||||
table.table-bordered.dataTable td:last-child,
|
||||
table.table-bordered.dataTable td:last-child {
|
||||
border-right-width: 0;
|
||||
}
|
||||
table.table-bordered.dataTable tbody th,
|
||||
table.table-bordered.dataTable tbody td {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
div.dataTables_scrollHead table.table-bordered {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
div.table-responsive > div.dataTables_wrapper > div.row {
|
||||
margin: 0;
|
||||
}
|
||||
div.table-responsive > div.dataTables_wrapper > div.row > div[class^="col-"]:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
div.table-responsive > div.dataTables_wrapper > div.row > div[class^="col-"]:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
1
media/css/dataTables.bootstrap4.min.css
vendored
Normal file
1
media/css/dataTables.bootstrap4.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
table.dataTable{clear:both;margin-top:6px !important;margin-bottom:6px !important;max-width:none !important}table.dataTable td,table.dataTable th{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}table.dataTable td.dataTables_empty,table.dataTable th.dataTables_empty{text-align:center}table.dataTable.nowrap th,table.dataTable.nowrap td{white-space:nowrap}div.dataTables_wrapper div.dataTables_length label{font-weight:normal;text-align:left;white-space:nowrap}div.dataTables_wrapper div.dataTables_length select{width:75px;display:inline-block}div.dataTables_wrapper div.dataTables_filter{text-align:right}div.dataTables_wrapper div.dataTables_filter label{font-weight:normal;white-space:nowrap;text-align:left}div.dataTables_wrapper div.dataTables_filter input{margin-left:0.5em;display:inline-block;width:auto}div.dataTables_wrapper div.dataTables_info{padding-top:0.85em;white-space:nowrap}div.dataTables_wrapper div.dataTables_paginate{margin:0;white-space:nowrap;text-align:right}div.dataTables_wrapper div.dataTables_paginate ul.pagination{margin:2px 0;white-space:nowrap}div.dataTables_wrapper div.dataTables_processing{position:absolute;top:50%;left:50%;width:200px;margin-left:-100px;margin-top:-26px;text-align:center;padding:1em 0}table.dataTable thead>tr>th.sorting_asc,table.dataTable thead>tr>th.sorting_desc,table.dataTable thead>tr>th.sorting,table.dataTable thead>tr>td.sorting_asc,table.dataTable thead>tr>td.sorting_desc,table.dataTable thead>tr>td.sorting{padding-right:30px}table.dataTable thead>tr>th:active,table.dataTable thead>tr>td:active{outline:none}table.dataTable thead .sorting,table.dataTable thead .sorting_asc,table.dataTable thead .sorting_desc,table.dataTable thead .sorting_asc_disabled,table.dataTable thead .sorting_desc_disabled{cursor:pointer;position:relative}table.dataTable thead .sorting:before,table.dataTable thead .sorting:after,table.dataTable thead .sorting_asc:before,table.dataTable thead .sorting_asc:after,table.dataTable thead .sorting_desc:before,table.dataTable thead .sorting_desc:after,table.dataTable thead .sorting_asc_disabled:before,table.dataTable thead .sorting_asc_disabled:after,table.dataTable thead .sorting_desc_disabled:before,table.dataTable thead .sorting_desc_disabled:after{position:absolute;bottom:0.9em;display:block;opacity:0.3}table.dataTable thead .sorting:before,table.dataTable thead .sorting_asc:before,table.dataTable thead .sorting_desc:before,table.dataTable thead .sorting_asc_disabled:before,table.dataTable thead .sorting_desc_disabled:before{right:1em;content:"\2191"}table.dataTable thead .sorting:after,table.dataTable thead .sorting_asc:after,table.dataTable thead .sorting_desc:after,table.dataTable thead .sorting_asc_disabled:after,table.dataTable thead .sorting_desc_disabled:after{right:0.5em;content:"\2193"}table.dataTable thead .sorting_asc:before,table.dataTable thead .sorting_desc:after{opacity:1}table.dataTable thead .sorting_asc_disabled:before,table.dataTable thead .sorting_desc_disabled:after{opacity:0}div.dataTables_scrollHead table.dataTable{margin-bottom:0 !important}div.dataTables_scrollBody table{border-top:none;margin-top:0 !important;margin-bottom:0 !important}div.dataTables_scrollBody table thead .sorting:after,div.dataTables_scrollBody table thead .sorting_asc:after,div.dataTables_scrollBody table thead .sorting_desc:after{display:none}div.dataTables_scrollBody table tbody tr:first-child th,div.dataTables_scrollBody table tbody tr:first-child td{border-top:none}div.dataTables_scrollFoot table{margin-top:0 !important;border-top:none}@media screen and (max-width: 767px){div.dataTables_wrapper div.dataTables_length,div.dataTables_wrapper div.dataTables_filter,div.dataTables_wrapper div.dataTables_info,div.dataTables_wrapper div.dataTables_paginate{text-align:center}}table.dataTable.table-condensed>thead>tr>th{padding-right:20px}table.dataTable.table-condensed .sorting:after,table.dataTable.table-condensed .sorting_asc:after,table.dataTable.table-condensed .sorting_desc:after{top:6px;right:6px}table.table-bordered.dataTable{border-collapse:separate !important}table.table-bordered.dataTable th,table.table-bordered.dataTable td{border-left-width:0}table.table-bordered.dataTable th:last-child,table.table-bordered.dataTable th:last-child,table.table-bordered.dataTable td:last-child,table.table-bordered.dataTable td:last-child{border-right-width:0}table.table-bordered.dataTable tbody th,table.table-bordered.dataTable tbody td{border-bottom-width:0}div.dataTables_scrollHead table.table-bordered{border-bottom-width:0}div.table-responsive>div.dataTables_wrapper>div.row{margin:0}div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:first-child{padding-left:0}div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:last-child{padding-right:0}
|
||||
87
media/css/dataTables.material.css
Normal file
87
media/css/dataTables.material.css
Normal file
@ -0,0 +1,87 @@
|
||||
div.dataTables_wrapper div.dataTables_filter {
|
||||
text-align: right;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_filter input {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_info {
|
||||
padding-top: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_processing {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 200px;
|
||||
margin-left: -100px;
|
||||
text-align: center;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_paginate {
|
||||
text-align: right;
|
||||
}
|
||||
div.dataTables_wrapper div.mdl-grid.dt-table {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
div.dataTables_wrapper div.mdl-grid.dt-table > div.mdl-cell {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
table.dataTable thead > tr > th.sorting_asc, table.dataTable thead > tr > th.sorting_desc, table.dataTable thead > tr > th.sorting,
|
||||
table.dataTable thead > tr > td.sorting_asc,
|
||||
table.dataTable thead > tr > td.sorting_desc,
|
||||
table.dataTable thead > tr > td.sorting {
|
||||
padding-right: 30px;
|
||||
}
|
||||
table.dataTable thead > tr > th:active,
|
||||
table.dataTable thead > tr > td:active {
|
||||
outline: none;
|
||||
}
|
||||
table.dataTable thead .sorting,
|
||||
table.dataTable thead .sorting_asc,
|
||||
table.dataTable thead .sorting_desc,
|
||||
table.dataTable thead .sorting_asc_disabled,
|
||||
table.dataTable thead .sorting_desc_disabled {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
table.dataTable thead .sorting:before, table.dataTable thead .sorting:after,
|
||||
table.dataTable thead .sorting_asc:before,
|
||||
table.dataTable thead .sorting_asc:after,
|
||||
table.dataTable thead .sorting_desc:before,
|
||||
table.dataTable thead .sorting_desc:after,
|
||||
table.dataTable thead .sorting_asc_disabled:before,
|
||||
table.dataTable thead .sorting_asc_disabled:after,
|
||||
table.dataTable thead .sorting_desc_disabled:before,
|
||||
table.dataTable thead .sorting_desc_disabled:after {
|
||||
position: absolute;
|
||||
bottom: 11px;
|
||||
display: block;
|
||||
opacity: 0.3;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
table.dataTable thead .sorting:before,
|
||||
table.dataTable thead .sorting_asc:before,
|
||||
table.dataTable thead .sorting_desc:before,
|
||||
table.dataTable thead .sorting_asc_disabled:before,
|
||||
table.dataTable thead .sorting_desc_disabled:before {
|
||||
right: 1em;
|
||||
content: "\2191";
|
||||
}
|
||||
table.dataTable thead .sorting:after,
|
||||
table.dataTable thead .sorting_asc:after,
|
||||
table.dataTable thead .sorting_desc:after,
|
||||
table.dataTable thead .sorting_asc_disabled:after,
|
||||
table.dataTable thead .sorting_desc_disabled:after {
|
||||
right: 0.5em;
|
||||
content: "\2193";
|
||||
}
|
||||
table.dataTable thead .sorting_asc:before,
|
||||
table.dataTable thead .sorting_desc:after {
|
||||
opacity: 1;
|
||||
}
|
||||
table.dataTable thead .sorting_asc_disabled:before,
|
||||
table.dataTable thead .sorting_desc_disabled:after {
|
||||
opacity: 0;
|
||||
}
|
||||
1
media/css/dataTables.material.min.css
vendored
Normal file
1
media/css/dataTables.material.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
div.dataTables_wrapper div.dataTables_filter{text-align:right}div.dataTables_wrapper div.dataTables_filter input{margin-left:0.5em}div.dataTables_wrapper div.dataTables_info{padding-top:10px;white-space:nowrap}div.dataTables_wrapper div.dataTables_processing{position:absolute;top:50%;left:50%;width:200px;margin-left:-100px;text-align:center}div.dataTables_wrapper div.dataTables_paginate{text-align:right}div.dataTables_wrapper div.mdl-grid.dt-table{padding-top:0;padding-bottom:0}div.dataTables_wrapper div.mdl-grid.dt-table>div.mdl-cell{margin-top:0;margin-bottom:0}table.dataTable thead>tr>th.sorting_asc,table.dataTable thead>tr>th.sorting_desc,table.dataTable thead>tr>th.sorting,table.dataTable thead>tr>td.sorting_asc,table.dataTable thead>tr>td.sorting_desc,table.dataTable thead>tr>td.sorting{padding-right:30px}table.dataTable thead>tr>th:active,table.dataTable thead>tr>td:active{outline:none}table.dataTable thead .sorting,table.dataTable thead .sorting_asc,table.dataTable thead .sorting_desc,table.dataTable thead .sorting_asc_disabled,table.dataTable thead .sorting_desc_disabled{cursor:pointer;position:relative}table.dataTable thead .sorting:before,table.dataTable thead .sorting:after,table.dataTable thead .sorting_asc:before,table.dataTable thead .sorting_asc:after,table.dataTable thead .sorting_desc:before,table.dataTable thead .sorting_desc:after,table.dataTable thead .sorting_asc_disabled:before,table.dataTable thead .sorting_asc_disabled:after,table.dataTable thead .sorting_desc_disabled:before,table.dataTable thead .sorting_desc_disabled:after{position:absolute;bottom:11px;display:block;opacity:0.3;font-size:1.3em}table.dataTable thead .sorting:before,table.dataTable thead .sorting_asc:before,table.dataTable thead .sorting_desc:before,table.dataTable thead .sorting_asc_disabled:before,table.dataTable thead .sorting_desc_disabled:before{right:1em;content:"\2191"}table.dataTable thead .sorting:after,table.dataTable thead .sorting_asc:after,table.dataTable thead .sorting_desc:after,table.dataTable thead .sorting_asc_disabled:after,table.dataTable thead .sorting_desc_disabled:after{right:0.5em;content:"\2193"}table.dataTable thead .sorting_asc:before,table.dataTable thead .sorting_desc:after{opacity:1}table.dataTable thead .sorting_asc_disabled:before,table.dataTable thead .sorting_desc_disabled:after{opacity:0}
|
||||
71
media/css/dataTables.semanticui.css
Normal file
71
media/css/dataTables.semanticui.css
Normal file
@ -0,0 +1,71 @@
|
||||
/*
|
||||
* Styling for DataTables with Semantic UI
|
||||
*/
|
||||
table.dataTable.table {
|
||||
margin: 0;
|
||||
}
|
||||
table.dataTable.table thead th,
|
||||
table.dataTable.table thead td {
|
||||
position: relative;
|
||||
}
|
||||
table.dataTable.table thead th.sorting:after, table.dataTable.table thead th.sorting_asc:after, table.dataTable.table thead th.sorting_desc:after,
|
||||
table.dataTable.table thead td.sorting:after,
|
||||
table.dataTable.table thead td.sorting_asc:after,
|
||||
table.dataTable.table thead td.sorting_desc:after {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 8px;
|
||||
display: block;
|
||||
font-family: Icons;
|
||||
}
|
||||
table.dataTable.table thead th.sorting:after,
|
||||
table.dataTable.table thead td.sorting:after {
|
||||
content: "\f0dc";
|
||||
color: #ddd;
|
||||
font-size: 0.8em;
|
||||
padding-top: 0.12em;
|
||||
}
|
||||
table.dataTable.table thead th.sorting_asc:after,
|
||||
table.dataTable.table thead td.sorting_asc:after {
|
||||
content: "\f0de";
|
||||
}
|
||||
table.dataTable.table thead th.sorting_desc:after,
|
||||
table.dataTable.table thead td.sorting_desc:after {
|
||||
content: "\f0dd";
|
||||
}
|
||||
table.dataTable.table td,
|
||||
table.dataTable.table th {
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
table.dataTable.table td.dataTables_empty,
|
||||
table.dataTable.table th.dataTables_empty {
|
||||
text-align: center;
|
||||
}
|
||||
table.dataTable.table.nowrap th,
|
||||
table.dataTable.table.nowrap td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
div.dataTables_wrapper div.dataTables_length .ui.selection.dropdown {
|
||||
min-width: 0;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_filter input {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_info {
|
||||
padding-top: 13px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_processing {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 200px;
|
||||
margin-left: -100px;
|
||||
text-align: center;
|
||||
}
|
||||
div.dataTables_wrapper div.row.dt-table {
|
||||
padding: 0;
|
||||
}
|
||||
1
media/css/dataTables.semanticui.min.css
vendored
Normal file
1
media/css/dataTables.semanticui.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
table.dataTable.table{margin:0}table.dataTable.table thead th,table.dataTable.table thead td{position:relative}table.dataTable.table thead th.sorting:after,table.dataTable.table thead th.sorting_asc:after,table.dataTable.table thead th.sorting_desc:after,table.dataTable.table thead td.sorting:after,table.dataTable.table thead td.sorting_asc:after,table.dataTable.table thead td.sorting_desc:after{position:absolute;top:12px;right:8px;display:block;font-family:Icons}table.dataTable.table thead th.sorting:after,table.dataTable.table thead td.sorting:after{content:"\f0dc";color:#ddd;font-size:0.8em;padding-top:0.12em}table.dataTable.table thead th.sorting_asc:after,table.dataTable.table thead td.sorting_asc:after{content:"\f0de"}table.dataTable.table thead th.sorting_desc:after,table.dataTable.table thead td.sorting_desc:after{content:"\f0dd"}table.dataTable.table td,table.dataTable.table th{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}table.dataTable.table td.dataTables_empty,table.dataTable.table th.dataTables_empty{text-align:center}table.dataTable.table.nowrap th,table.dataTable.table.nowrap td{white-space:nowrap}div.dataTables_wrapper div.dataTables_length .ui.selection.dropdown{min-width:0}div.dataTables_wrapper div.dataTables_filter input{margin-left:0.5em}div.dataTables_wrapper div.dataTables_info{padding-top:13px;white-space:nowrap}div.dataTables_wrapper div.dataTables_processing{position:absolute;top:50%;left:50%;width:200px;margin-left:-100px;text-align:center}div.dataTables_wrapper div.row.dt-table{padding:0}
|
||||
147
media/css/dataTables.uikit.css
Normal file
147
media/css/dataTables.uikit.css
Normal file
@ -0,0 +1,147 @@
|
||||
table.dataTable {
|
||||
clear: both;
|
||||
margin-top: 6px !important;
|
||||
margin-bottom: 6px !important;
|
||||
max-width: none !important;
|
||||
}
|
||||
table.dataTable td,
|
||||
table.dataTable th {
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
table.dataTable td.dataTables_empty,
|
||||
table.dataTable th.dataTables_empty {
|
||||
text-align: center;
|
||||
}
|
||||
table.dataTable.nowrap th,
|
||||
table.dataTable.nowrap td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
div.dataTables_wrapper div.row.uk-grid.dt-merge-grid {
|
||||
margin-top: 5px;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_length label {
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_length select {
|
||||
width: 75px;
|
||||
display: inline-block;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_filter {
|
||||
text-align: right;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_filter label {
|
||||
font-weight: normal;
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_filter input {
|
||||
margin-left: 0.5em;
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_info {
|
||||
padding-top: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_paginate {
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
text-align: right;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
|
||||
margin: 2px 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_processing {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 200px;
|
||||
margin-left: -100px;
|
||||
margin-top: -26px;
|
||||
text-align: center;
|
||||
padding: 1em 0;
|
||||
}
|
||||
|
||||
table.dataTable thead > tr > th,
|
||||
table.dataTable thead > tr > td {
|
||||
position: relative;
|
||||
}
|
||||
table.dataTable thead > tr > th.sorting_asc, table.dataTable thead > tr > th.sorting_desc, table.dataTable thead > tr > th.sorting,
|
||||
table.dataTable thead > tr > td.sorting_asc,
|
||||
table.dataTable thead > tr > td.sorting_desc,
|
||||
table.dataTable thead > tr > td.sorting {
|
||||
padding-right: 30px;
|
||||
}
|
||||
table.dataTable thead > tr > th.sorting:after, table.dataTable thead > tr > th.sorting_asc:after, table.dataTable thead > tr > th.sorting_desc:after,
|
||||
table.dataTable thead > tr > td.sorting:after,
|
||||
table.dataTable thead > tr > td.sorting_asc:after,
|
||||
table.dataTable thead > tr > td.sorting_desc:after {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
right: 8px;
|
||||
display: block;
|
||||
font-family: 'FontAwesome';
|
||||
}
|
||||
table.dataTable thead > tr > th.sorting:after,
|
||||
table.dataTable thead > tr > td.sorting:after {
|
||||
content: "\f0dc";
|
||||
color: #ddd;
|
||||
font-size: 0.8em;
|
||||
padding-top: 0.12em;
|
||||
}
|
||||
table.dataTable thead > tr > th.sorting_asc:after,
|
||||
table.dataTable thead > tr > td.sorting_asc:after {
|
||||
content: "\f0de";
|
||||
}
|
||||
table.dataTable thead > tr > th.sorting_desc:after,
|
||||
table.dataTable thead > tr > td.sorting_desc:after {
|
||||
content: "\f0dd";
|
||||
}
|
||||
|
||||
div.dataTables_scrollHead table.dataTable {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
div.dataTables_scrollBody table {
|
||||
border-top: none;
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
div.dataTables_scrollBody table thead .sorting:after,
|
||||
div.dataTables_scrollBody table thead .sorting_asc:after,
|
||||
div.dataTables_scrollBody table thead .sorting_desc:after {
|
||||
display: none;
|
||||
}
|
||||
div.dataTables_scrollBody table tbody tr:first-child th,
|
||||
div.dataTables_scrollBody table tbody tr:first-child td {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
div.dataTables_scrollFoot table {
|
||||
margin-top: 0 !important;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
div.dataTables_wrapper div.dataTables_length,
|
||||
div.dataTables_wrapper div.dataTables_filter,
|
||||
div.dataTables_wrapper div.dataTables_info,
|
||||
div.dataTables_wrapper div.dataTables_paginate {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
table.dataTable.uk-table-condensed > thead > tr > th {
|
||||
padding-right: 20px;
|
||||
}
|
||||
table.dataTable.uk-table-condensed .sorting:after,
|
||||
table.dataTable.uk-table-condensed .sorting_asc:after,
|
||||
table.dataTable.uk-table-condensed .sorting_desc:after {
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
}
|
||||
1
media/css/dataTables.uikit.min.css
vendored
Normal file
1
media/css/dataTables.uikit.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
table.dataTable{clear:both;margin-top:6px !important;margin-bottom:6px !important;max-width:none !important}table.dataTable td,table.dataTable th{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}table.dataTable td.dataTables_empty,table.dataTable th.dataTables_empty{text-align:center}table.dataTable.nowrap th,table.dataTable.nowrap td{white-space:nowrap}div.dataTables_wrapper div.row.uk-grid.dt-merge-grid{margin-top:5px}div.dataTables_wrapper div.dataTables_length label{font-weight:normal;text-align:left;white-space:nowrap}div.dataTables_wrapper div.dataTables_length select{width:75px;display:inline-block}div.dataTables_wrapper div.dataTables_filter{text-align:right}div.dataTables_wrapper div.dataTables_filter label{font-weight:normal;white-space:nowrap;text-align:left}div.dataTables_wrapper div.dataTables_filter input{margin-left:0.5em;display:inline-block;width:auto}div.dataTables_wrapper div.dataTables_info{padding-top:8px;white-space:nowrap}div.dataTables_wrapper div.dataTables_paginate{margin:0;white-space:nowrap;text-align:right}div.dataTables_wrapper div.dataTables_paginate ul.pagination{margin:2px 0;white-space:nowrap}div.dataTables_wrapper div.dataTables_processing{position:absolute;top:50%;left:50%;width:200px;margin-left:-100px;margin-top:-26px;text-align:center;padding:1em 0}table.dataTable thead>tr>th,table.dataTable thead>tr>td{position:relative}table.dataTable thead>tr>th.sorting_asc,table.dataTable thead>tr>th.sorting_desc,table.dataTable thead>tr>th.sorting,table.dataTable thead>tr>td.sorting_asc,table.dataTable thead>tr>td.sorting_desc,table.dataTable thead>tr>td.sorting{padding-right:30px}table.dataTable thead>tr>th.sorting:after,table.dataTable thead>tr>th.sorting_asc:after,table.dataTable thead>tr>th.sorting_desc:after,table.dataTable thead>tr>td.sorting:after,table.dataTable thead>tr>td.sorting_asc:after,table.dataTable thead>tr>td.sorting_desc:after{position:absolute;top:7px;right:8px;display:block;font-family:'FontAwesome'}table.dataTable thead>tr>th.sorting:after,table.dataTable thead>tr>td.sorting:after{content:"\f0dc";color:#ddd;font-size:0.8em;padding-top:0.12em}table.dataTable thead>tr>th.sorting_asc:after,table.dataTable thead>tr>td.sorting_asc:after{content:"\f0de"}table.dataTable thead>tr>th.sorting_desc:after,table.dataTable thead>tr>td.sorting_desc:after{content:"\f0dd"}div.dataTables_scrollHead table.dataTable{margin-bottom:0 !important}div.dataTables_scrollBody table{border-top:none;margin-top:0 !important;margin-bottom:0 !important}div.dataTables_scrollBody table thead .sorting:after,div.dataTables_scrollBody table thead .sorting_asc:after,div.dataTables_scrollBody table thead .sorting_desc:after{display:none}div.dataTables_scrollBody table tbody tr:first-child th,div.dataTables_scrollBody table tbody tr:first-child td{border-top:none}div.dataTables_scrollFoot table{margin-top:0 !important;border-top:none}@media screen and (max-width: 767px){div.dataTables_wrapper div.dataTables_length,div.dataTables_wrapper div.dataTables_filter,div.dataTables_wrapper div.dataTables_info,div.dataTables_wrapper div.dataTables_paginate{text-align:center}}table.dataTable.uk-table-condensed>thead>tr>th{padding-right:20px}table.dataTable.uk-table-condensed .sorting:after,table.dataTable.uk-table-condensed .sorting_asc:after,table.dataTable.uk-table-condensed .sorting_desc:after{top:6px;right:6px}
|
||||
184
media/js/dataTables.bootstrap4.js
Normal file
184
media/js/dataTables.bootstrap4.js
Normal file
@ -0,0 +1,184 @@
|
||||
/*! DataTables Bootstrap 3 integration
|
||||
* ©2011-2015 SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
|
||||
/**
|
||||
* DataTables integration for Bootstrap 3. This requires Bootstrap 3 and
|
||||
* DataTables 1.10 or newer.
|
||||
*
|
||||
* This file sets the defaults and adds options to DataTables to style its
|
||||
* controls using Bootstrap. See http://datatables.net/manual/styling/bootstrap
|
||||
* for further information.
|
||||
*/
|
||||
(function( factory ){
|
||||
if ( typeof define === 'function' && define.amd ) {
|
||||
// AMD
|
||||
define( ['jquery', 'datatables.net'], function ( $ ) {
|
||||
return factory( $, window, document );
|
||||
} );
|
||||
}
|
||||
else if ( typeof exports === 'object' ) {
|
||||
// CommonJS
|
||||
module.exports = function (root, $) {
|
||||
if ( ! root ) {
|
||||
root = window;
|
||||
}
|
||||
|
||||
if ( ! $ || ! $.fn.dataTable ) {
|
||||
// Require DataTables, which attaches to jQuery, including
|
||||
// jQuery if needed and have a $ property so we can access the
|
||||
// jQuery object that is used
|
||||
$ = require('datatables.net')(root, $).$;
|
||||
}
|
||||
|
||||
return factory( $, root, root.document );
|
||||
};
|
||||
}
|
||||
else {
|
||||
// Browser
|
||||
factory( jQuery, window, document );
|
||||
}
|
||||
}(function( $, window, document, undefined ) {
|
||||
'use strict';
|
||||
var DataTable = $.fn.dataTable;
|
||||
|
||||
|
||||
/* Set the defaults for DataTables initialisation */
|
||||
$.extend( true, DataTable.defaults, {
|
||||
dom:
|
||||
"<'row'<'col-md-6'l><'col-md-6'f>>" +
|
||||
"<'row'<'col-md-12'tr>>" +
|
||||
"<'row'<'col-md-5'i><'col-md-7'p>>",
|
||||
renderer: 'bootstrap'
|
||||
} );
|
||||
|
||||
|
||||
/* Default class modification */
|
||||
$.extend( DataTable.ext.classes, {
|
||||
sWrapper: "dataTables_wrapper form-inline dt-bootstrap4",
|
||||
sFilterInput: "form-control input-sm",
|
||||
sLengthSelect: "form-control input-sm",
|
||||
sProcessing: "dataTables_processing panel panel-default",
|
||||
sPageButton: "paginate_button page-item"
|
||||
} );
|
||||
|
||||
|
||||
/* Bootstrap paging button renderer */
|
||||
DataTable.ext.renderer.pageButton.bootstrap = function ( settings, host, idx, buttons, page, pages ) {
|
||||
var api = new DataTable.Api( settings );
|
||||
var classes = settings.oClasses;
|
||||
var lang = settings.oLanguage.oPaginate;
|
||||
var aria = settings.oLanguage.oAria.paginate || {};
|
||||
var btnDisplay, btnClass, counter=0;
|
||||
|
||||
var attach = function( container, buttons ) {
|
||||
var i, ien, node, button;
|
||||
var clickHandler = function ( e ) {
|
||||
e.preventDefault();
|
||||
if ( !$(e.currentTarget).hasClass('disabled') && api.page() != e.data.action ) {
|
||||
api.page( e.data.action ).draw( 'page' );
|
||||
}
|
||||
};
|
||||
|
||||
for ( i=0, ien=buttons.length ; i<ien ; i++ ) {
|
||||
button = buttons[i];
|
||||
|
||||
if ( $.isArray( button ) ) {
|
||||
attach( container, button );
|
||||
}
|
||||
else {
|
||||
btnDisplay = '';
|
||||
btnClass = '';
|
||||
|
||||
switch ( button ) {
|
||||
case 'ellipsis':
|
||||
btnDisplay = '…';
|
||||
btnClass = 'disabled';
|
||||
break;
|
||||
|
||||
case 'first':
|
||||
btnDisplay = lang.sFirst;
|
||||
btnClass = button + (page > 0 ?
|
||||
'' : ' disabled');
|
||||
break;
|
||||
|
||||
case 'previous':
|
||||
btnDisplay = lang.sPrevious;
|
||||
btnClass = button + (page > 0 ?
|
||||
'' : ' disabled');
|
||||
break;
|
||||
|
||||
case 'next':
|
||||
btnDisplay = lang.sNext;
|
||||
btnClass = button + (page < pages-1 ?
|
||||
'' : ' disabled');
|
||||
break;
|
||||
|
||||
case 'last':
|
||||
btnDisplay = lang.sLast;
|
||||
btnClass = button + (page < pages-1 ?
|
||||
'' : ' disabled');
|
||||
break;
|
||||
|
||||
default:
|
||||
btnDisplay = button + 1;
|
||||
btnClass = page === button ?
|
||||
'active' : '';
|
||||
break;
|
||||
}
|
||||
|
||||
if ( btnDisplay ) {
|
||||
node = $('<li>', {
|
||||
'class': classes.sPageButton+' '+btnClass,
|
||||
'id': idx === 0 && typeof button === 'string' ?
|
||||
settings.sTableId +'_'+ button :
|
||||
null
|
||||
} )
|
||||
.append( $('<a>', {
|
||||
'href': '#',
|
||||
'aria-controls': settings.sTableId,
|
||||
'aria-label': aria[ button ],
|
||||
'data-dt-idx': counter,
|
||||
'tabindex': settings.iTabIndex,
|
||||
'class': 'page-link'
|
||||
} )
|
||||
.html( btnDisplay )
|
||||
)
|
||||
.appendTo( container );
|
||||
|
||||
settings.oApi._fnBindAction(
|
||||
node, {action: button}, clickHandler
|
||||
);
|
||||
|
||||
counter++;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// IE9 throws an 'unknown error' if document.activeElement is used
|
||||
// inside an iframe or frame.
|
||||
var activeEl;
|
||||
|
||||
try {
|
||||
// Because this approach is destroying and recreating the paging
|
||||
// elements, focus is lost on the select button which is bad for
|
||||
// accessibility. So we want to restore focus once the draw has
|
||||
// completed
|
||||
activeEl = $(host).find(document.activeElement).data('dt-idx');
|
||||
}
|
||||
catch (e) {}
|
||||
|
||||
attach(
|
||||
$(host).empty().html('<ul class="pagination"/>').children('ul'),
|
||||
buttons
|
||||
);
|
||||
|
||||
if ( activeEl ) {
|
||||
$(host).find( '[data-dt-idx='+activeEl+']' ).focus();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return DataTable;
|
||||
}));
|
||||
8
media/js/dataTables.bootstrap4.min.js
vendored
Normal file
8
media/js/dataTables.bootstrap4.min.js
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
/*!
|
||||
DataTables Bootstrap 3 integration
|
||||
©2011-2015 SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
(function(b){"function"===typeof define&&define.amd?define(["jquery","datatables.net"],function(a){return b(a,window,document)}):"object"===typeof exports?module.exports=function(a,d){a||(a=window);if(!d||!d.fn.dataTable)d=require("datatables.net")(a,d).$;return b(d,a,a.document)}:b(jQuery,window,document)})(function(b,a,d){var f=b.fn.dataTable;b.extend(!0,f.defaults,{dom:"<'row'<'col-md-6'l><'col-md-6'f>><'row'<'col-md-12'tr>><'row'<'col-md-5'i><'col-md-7'p>>",renderer:"bootstrap"});b.extend(f.ext.classes,
|
||||
{sWrapper:"dataTables_wrapper form-inline dt-bootstrap4",sFilterInput:"form-control input-sm",sLengthSelect:"form-control input-sm",sProcessing:"dataTables_processing panel panel-default",sPageButton:"paginate_button page-item"});f.ext.renderer.pageButton.bootstrap=function(a,h,r,m,j,n){var o=new f.Api(a),s=a.oClasses,k=a.oLanguage.oPaginate,t=a.oLanguage.oAria.paginate||{},e,g,p=0,q=function(d,f){var l,h,i,c,m=function(a){a.preventDefault();!b(a.currentTarget).hasClass("disabled")&&o.page()!=a.data.action&&
|
||||
o.page(a.data.action).draw("page")};l=0;for(h=f.length;l<h;l++)if(c=f[l],b.isArray(c))q(d,c);else{g=e="";switch(c){case "ellipsis":e="…";g="disabled";break;case "first":e=k.sFirst;g=c+(0<j?"":" disabled");break;case "previous":e=k.sPrevious;g=c+(0<j?"":" disabled");break;case "next":e=k.sNext;g=c+(j<n-1?"":" disabled");break;case "last":e=k.sLast;g=c+(j<n-1?"":" disabled");break;default:e=c+1,g=j===c?"active":""}e&&(i=b("<li>",{"class":s.sPageButton+" "+g,id:0===r&&"string"===typeof c?a.sTableId+
|
||||
"_"+c:null}).append(b("<a>",{href:"#","aria-controls":a.sTableId,"aria-label":t[c],"data-dt-idx":p,tabindex:a.iTabIndex,"class":"page-link"}).html(e)).appendTo(d),a.oApi._fnBindAction(i,{action:c},m),p++)}},i;try{i=b(h).find(d.activeElement).data("dt-idx")}catch(u){}q(b(h).empty().html('<ul class="pagination"/>').children("ul"),m);i&&b(h).find("[data-dt-idx="+i+"]").focus()};return f});
|
||||
191
media/js/dataTables.material.js
Normal file
191
media/js/dataTables.material.js
Normal file
@ -0,0 +1,191 @@
|
||||
/*! DataTables Bootstrap 3 integration
|
||||
* ©2011-2015 SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
|
||||
/**
|
||||
* DataTables integration for Bootstrap 3. This requires Bootstrap 3 and
|
||||
* DataTables 1.10 or newer.
|
||||
*
|
||||
* This file sets the defaults and adds options to DataTables to style its
|
||||
* controls using Bootstrap. See http://datatables.net/manual/styling/bootstrap
|
||||
* for further information.
|
||||
*/
|
||||
(function( factory ){
|
||||
if ( typeof define === 'function' && define.amd ) {
|
||||
// AMD
|
||||
define( ['jquery', 'datatables.net'], function ( $ ) {
|
||||
return factory( $, window, document );
|
||||
} );
|
||||
}
|
||||
else if ( typeof exports === 'object' ) {
|
||||
// CommonJS
|
||||
module.exports = function (root, $) {
|
||||
if ( ! root ) {
|
||||
root = window;
|
||||
}
|
||||
|
||||
if ( ! $ || ! $.fn.dataTable ) {
|
||||
// Require DataTables, which attaches to jQuery, including
|
||||
// jQuery if needed and have a $ property so we can access the
|
||||
// jQuery object that is used
|
||||
$ = require('datatables.net')(root, $).$;
|
||||
}
|
||||
|
||||
return factory( $, root, root.document );
|
||||
};
|
||||
}
|
||||
else {
|
||||
// Browser
|
||||
factory( jQuery, window, document );
|
||||
}
|
||||
}(function( $, window, document, undefined ) {
|
||||
'use strict';
|
||||
var DataTable = $.fn.dataTable;
|
||||
|
||||
|
||||
/* Set the defaults for DataTables initialisation */
|
||||
$.extend( true, DataTable.defaults, {
|
||||
dom:
|
||||
"<'mdl-grid'"+
|
||||
"<'mdl-cell mdl-cell--6-col'l>"+
|
||||
"<'mdl-cell mdl-cell--6-col'f>"+
|
||||
">"+
|
||||
"<'mdl-grid dt-table'"+
|
||||
"<'mdl-cell mdl-cell--12-col'tr>"+
|
||||
">"+
|
||||
"<'mdl-grid'"+
|
||||
"<'mdl-cell mdl-cell--4-col'i>"+
|
||||
"<'mdl-cell mdl-cell--8-col'p>"+
|
||||
">",
|
||||
renderer: 'material'
|
||||
} );
|
||||
|
||||
|
||||
/* Default class modification */
|
||||
$.extend( DataTable.ext.classes, {
|
||||
sWrapper: "dataTables_wrapper form-inline dt-material",
|
||||
sFilterInput: "form-control input-sm",
|
||||
sLengthSelect: "form-control input-sm",
|
||||
sProcessing: "dataTables_processing panel panel-default"
|
||||
} );
|
||||
|
||||
|
||||
/* Bootstrap paging button renderer */
|
||||
DataTable.ext.renderer.pageButton.material = function ( settings, host, idx, buttons, page, pages ) {
|
||||
var api = new DataTable.Api( settings );
|
||||
var classes = settings.oClasses;
|
||||
var lang = settings.oLanguage.oPaginate;
|
||||
var aria = settings.oLanguage.oAria.paginate || {};
|
||||
var btnDisplay, btnClass, counter=0;
|
||||
|
||||
var attach = function( container, buttons ) {
|
||||
var i, ien, node, button, disabled, active;
|
||||
var clickHandler = function ( e ) {
|
||||
e.preventDefault();
|
||||
if ( !$(e.currentTarget).hasClass('disabled') && api.page() != e.data.action ) {
|
||||
api.page( e.data.action ).draw( 'page' );
|
||||
}
|
||||
};
|
||||
|
||||
for ( i=0, ien=buttons.length ; i<ien ; i++ ) {
|
||||
button = buttons[i];
|
||||
|
||||
if ( $.isArray( button ) ) {
|
||||
attach( container, button );
|
||||
}
|
||||
else {
|
||||
btnDisplay = '';
|
||||
active = false;
|
||||
|
||||
switch ( button ) {
|
||||
case 'ellipsis':
|
||||
btnDisplay = '…';
|
||||
btnClass = 'disabled';
|
||||
break;
|
||||
|
||||
case 'first':
|
||||
btnDisplay = lang.sFirst;
|
||||
btnClass = button + (page > 0 ?
|
||||
'' : ' disabled');
|
||||
break;
|
||||
|
||||
case 'previous':
|
||||
btnDisplay = lang.sPrevious;
|
||||
btnClass = button + (page > 0 ?
|
||||
'' : ' disabled');
|
||||
break;
|
||||
|
||||
case 'next':
|
||||
btnDisplay = lang.sNext;
|
||||
btnClass = button + (page < pages-1 ?
|
||||
'' : ' disabled');
|
||||
break;
|
||||
|
||||
case 'last':
|
||||
btnDisplay = lang.sLast;
|
||||
btnClass = button + (page < pages-1 ?
|
||||
'' : ' disabled');
|
||||
break;
|
||||
|
||||
default:
|
||||
btnDisplay = button + 1;
|
||||
btnClass = '';
|
||||
active = page === button;
|
||||
break;
|
||||
}
|
||||
|
||||
if ( active ) {
|
||||
btnClass += ' mdl-button--raised mdl-button--colored';
|
||||
}
|
||||
|
||||
if ( btnDisplay ) {
|
||||
node = $('<button>', {
|
||||
'class': 'mdl-button '+btnClass,
|
||||
'id': idx === 0 && typeof button === 'string' ?
|
||||
settings.sTableId +'_'+ button :
|
||||
null,
|
||||
'aria-controls': settings.sTableId,
|
||||
'aria-label': aria[ button ],
|
||||
'data-dt-idx': counter,
|
||||
'tabindex': settings.iTabIndex,
|
||||
'disabled': btnClass.indexOf('disabled') !== -1
|
||||
} )
|
||||
.html( btnDisplay )
|
||||
.appendTo( container );
|
||||
|
||||
settings.oApi._fnBindAction(
|
||||
node, {action: button}, clickHandler
|
||||
);
|
||||
|
||||
counter++;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// IE9 throws an 'unknown error' if document.activeElement is used
|
||||
// inside an iframe or frame.
|
||||
var activeEl;
|
||||
|
||||
try {
|
||||
// Because this approach is destroying and recreating the paging
|
||||
// elements, focus is lost on the select button which is bad for
|
||||
// accessibility. So we want to restore focus once the draw has
|
||||
// completed
|
||||
activeEl = $(host).find(document.activeElement).data('dt-idx');
|
||||
}
|
||||
catch (e) {}
|
||||
|
||||
attach(
|
||||
$(host).empty().html('<div class="pagination"/>').children(),
|
||||
buttons
|
||||
);
|
||||
|
||||
if ( activeEl ) {
|
||||
$(host).find( '[data-dt-idx='+activeEl+']' ).focus();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return DataTable;
|
||||
}));
|
||||
8
media/js/dataTables.material.min.js
vendored
Normal file
8
media/js/dataTables.material.min.js
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
/*!
|
||||
DataTables Bootstrap 3 integration
|
||||
©2011-2015 SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
(function(c){"function"===typeof define&&define.amd?define(["jquery","datatables.net"],function(a){return c(a,window,document)}):"object"===typeof exports?module.exports=function(a,d){a||(a=window);if(!d||!d.fn.dataTable)d=require("datatables.net")(a,d).$;return c(d,a,a.document)}:c(jQuery,window,document)})(function(c,a,d){var g=c.fn.dataTable;c.extend(!0,g.defaults,{dom:"<'mdl-grid'<'mdl-cell mdl-cell--6-col'l><'mdl-cell mdl-cell--6-col'f>><'mdl-grid dt-table'<'mdl-cell mdl-cell--12-col'tr>><'mdl-grid'<'mdl-cell mdl-cell--4-col'i><'mdl-cell mdl-cell--8-col'p>>",
|
||||
renderer:"material"});c.extend(g.ext.classes,{sWrapper:"dataTables_wrapper form-inline dt-material",sFilterInput:"form-control input-sm",sLengthSelect:"form-control input-sm",sProcessing:"dataTables_processing panel panel-default"});g.ext.renderer.pageButton.material=function(a,h,r,s,i,n){var o=new g.Api(a),l=a.oLanguage.oPaginate,t=a.oLanguage.oAria.paginate||{},f,e,p=0,q=function(d,g){var m,h,j,b,k=function(a){a.preventDefault();!c(a.currentTarget).hasClass("disabled")&&o.page()!=a.data.action&&
|
||||
o.page(a.data.action).draw("page")};m=0;for(h=g.length;m<h;m++)if(b=g[m],c.isArray(b))q(d,b);else{f="";j=!1;switch(b){case "ellipsis":f="…";e="disabled";break;case "first":f=l.sFirst;e=b+(0<i?"":" disabled");break;case "previous":f=l.sPrevious;e=b+(0<i?"":" disabled");break;case "next":f=l.sNext;e=b+(i<n-1?"":" disabled");break;case "last":f=l.sLast;e=b+(i<n-1?"":" disabled");break;default:f=b+1,e="",j=i===b}j&&(e+=" mdl-button--raised mdl-button--colored");f&&(j=c("<button>",{"class":"mdl-button "+
|
||||
e,id:0===r&&"string"===typeof b?a.sTableId+"_"+b:null,"aria-controls":a.sTableId,"aria-label":t[b],"data-dt-idx":p,tabindex:a.iTabIndex,disabled:-1!==e.indexOf("disabled")}).html(f).appendTo(d),a.oApi._fnBindAction(j,{action:b},k),p++)}},k;try{k=c(h).find(d.activeElement).data("dt-idx")}catch(u){}q(c(h).empty().html('<div class="pagination"/>').children(),s);k&&c(h).find("[data-dt-idx="+k+"]").focus()};return g});
|
||||
208
media/js/dataTables.semanticui.js
Normal file
208
media/js/dataTables.semanticui.js
Normal file
@ -0,0 +1,208 @@
|
||||
/*! DataTables Bootstrap 3 integration
|
||||
* ©2011-2015 SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
|
||||
/**
|
||||
* DataTables integration for Bootstrap 3. This requires Bootstrap 3 and
|
||||
* DataTables 1.10 or newer.
|
||||
*
|
||||
* This file sets the defaults and adds options to DataTables to style its
|
||||
* controls using Bootstrap. See http://datatables.net/manual/styling/bootstrap
|
||||
* for further information.
|
||||
*/
|
||||
(function( factory ){
|
||||
if ( typeof define === 'function' && define.amd ) {
|
||||
// AMD
|
||||
define( ['jquery', 'datatables.net'], function ( $ ) {
|
||||
return factory( $, window, document );
|
||||
} );
|
||||
}
|
||||
else if ( typeof exports === 'object' ) {
|
||||
// CommonJS
|
||||
module.exports = function (root, $) {
|
||||
if ( ! root ) {
|
||||
root = window;
|
||||
}
|
||||
|
||||
if ( ! $ || ! $.fn.dataTable ) {
|
||||
// Require DataTables, which attaches to jQuery, including
|
||||
// jQuery if needed and have a $ property so we can access the
|
||||
// jQuery object that is used
|
||||
$ = require('datatables.net')(root, $).$;
|
||||
}
|
||||
|
||||
return factory( $, root, root.document );
|
||||
};
|
||||
}
|
||||
else {
|
||||
// Browser
|
||||
factory( jQuery, window, document );
|
||||
}
|
||||
}(function( $, window, document, undefined ) {
|
||||
'use strict';
|
||||
var DataTable = $.fn.dataTable;
|
||||
|
||||
|
||||
/* Set the defaults for DataTables initialisation */
|
||||
$.extend( true, DataTable.defaults, {
|
||||
dom:
|
||||
"<'ui grid'"+
|
||||
"<'row'"+
|
||||
"<'eight wide column'l>"+
|
||||
"<'right aligned eight wide column'f>"+
|
||||
">"+
|
||||
"<'row dt-table'"+
|
||||
"<'sixteen wide column'tr>"+
|
||||
">"+
|
||||
"<'row'"+
|
||||
"<'seven wide column'i>"+
|
||||
"<'right aligned nine wide column'p>"+
|
||||
">"+
|
||||
">",
|
||||
renderer: 'semanticUI'
|
||||
} );
|
||||
|
||||
|
||||
/* Default class modification */
|
||||
$.extend( DataTable.ext.classes, {
|
||||
sWrapper: "dataTables_wrapper dt-semanticUI",
|
||||
sFilter: "dataTables_filter ui input",
|
||||
sProcessing: "dataTables_processing ui segment",
|
||||
sPageButton: "paginate_button item"
|
||||
} );
|
||||
|
||||
|
||||
/* Bootstrap paging button renderer */
|
||||
DataTable.ext.renderer.pageButton.semanticUI = function ( settings, host, idx, buttons, page, pages ) {
|
||||
var api = new DataTable.Api( settings );
|
||||
var classes = settings.oClasses;
|
||||
var lang = settings.oLanguage.oPaginate;
|
||||
var aria = settings.oLanguage.oAria.paginate || {};
|
||||
var btnDisplay, btnClass, counter=0;
|
||||
|
||||
var attach = function( container, buttons ) {
|
||||
var i, ien, node, button;
|
||||
var clickHandler = function ( e ) {
|
||||
e.preventDefault();
|
||||
if ( !$(e.currentTarget).hasClass('disabled') && api.page() != e.data.action ) {
|
||||
api.page( e.data.action ).draw( 'page' );
|
||||
}
|
||||
};
|
||||
|
||||
for ( i=0, ien=buttons.length ; i<ien ; i++ ) {
|
||||
button = buttons[i];
|
||||
|
||||
if ( $.isArray( button ) ) {
|
||||
attach( container, button );
|
||||
}
|
||||
else {
|
||||
btnDisplay = '';
|
||||
btnClass = '';
|
||||
|
||||
switch ( button ) {
|
||||
case 'ellipsis':
|
||||
btnDisplay = '…';
|
||||
btnClass = 'disabled';
|
||||
break;
|
||||
|
||||
case 'first':
|
||||
btnDisplay = lang.sFirst;
|
||||
btnClass = button + (page > 0 ?
|
||||
'' : ' disabled');
|
||||
break;
|
||||
|
||||
case 'previous':
|
||||
btnDisplay = lang.sPrevious;
|
||||
btnClass = button + (page > 0 ?
|
||||
'' : ' disabled');
|
||||
break;
|
||||
|
||||
case 'next':
|
||||
btnDisplay = lang.sNext;
|
||||
btnClass = button + (page < pages-1 ?
|
||||
'' : ' disabled');
|
||||
break;
|
||||
|
||||
case 'last':
|
||||
btnDisplay = lang.sLast;
|
||||
btnClass = button + (page < pages-1 ?
|
||||
'' : ' disabled');
|
||||
break;
|
||||
|
||||
default:
|
||||
btnDisplay = button + 1;
|
||||
btnClass = page === button ?
|
||||
'active' : '';
|
||||
break;
|
||||
}
|
||||
|
||||
var tag = btnClass.indexOf( 'disabled' ) === -1 ?
|
||||
'a' :
|
||||
'div';
|
||||
|
||||
if ( btnDisplay ) {
|
||||
node = $('<'+tag+'>', {
|
||||
'class': classes.sPageButton+' '+btnClass,
|
||||
'id': idx === 0 && typeof button === 'string' ?
|
||||
settings.sTableId +'_'+ button :
|
||||
null,
|
||||
'href': '#',
|
||||
'aria-controls': settings.sTableId,
|
||||
'aria-label': aria[ button ],
|
||||
'data-dt-idx': counter,
|
||||
'tabindex': settings.iTabIndex
|
||||
} )
|
||||
.html( btnDisplay )
|
||||
.appendTo( container );
|
||||
|
||||
settings.oApi._fnBindAction(
|
||||
node, {action: button}, clickHandler
|
||||
);
|
||||
|
||||
counter++;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// IE9 throws an 'unknown error' if document.activeElement is used
|
||||
// inside an iframe or frame.
|
||||
var activeEl;
|
||||
|
||||
try {
|
||||
// Because this approach is destroying and recreating the paging
|
||||
// elements, focus is lost on the select button which is bad for
|
||||
// accessibility. So we want to restore focus once the draw has
|
||||
// completed
|
||||
activeEl = $(host).find(document.activeElement).data('dt-idx');
|
||||
}
|
||||
catch (e) {}
|
||||
|
||||
attach(
|
||||
$(host).empty().html('<div class="ui pagination menu"/>').children(),
|
||||
buttons
|
||||
);
|
||||
|
||||
if ( activeEl ) {
|
||||
$(host).find( '[data-dt-idx='+activeEl+']' ).focus();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// Javascript enhancements on table initialisation
|
||||
$(document).on( 'init.dt', function (e, ctx) {
|
||||
if ( e.namespace !== 'dt' ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Length menu drop down
|
||||
if ( $.fn.dropdown ) {
|
||||
var api = new $.fn.dataTable.Api( ctx );
|
||||
|
||||
$( 'div.dataTables_length select', api.table().container() ).dropdown();
|
||||
}
|
||||
} );
|
||||
|
||||
|
||||
return DataTable;
|
||||
}));
|
||||
9
media/js/dataTables.semanticui.min.js
vendored
Normal file
9
media/js/dataTables.semanticui.min.js
vendored
Normal file
@ -0,0 +1,9 @@
|
||||
/*!
|
||||
DataTables Bootstrap 3 integration
|
||||
©2011-2015 SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
(function(b){"function"===typeof define&&define.amd?define(["jquery","datatables.net"],function(a){return b(a,window,document)}):"object"===typeof exports?module.exports=function(a,d){a||(a=window);if(!d||!d.fn.dataTable)d=require("datatables.net")(a,d).$;return b(d,a,a.document)}:b(jQuery,window,document)})(function(b,a,d){var e=b.fn.dataTable;b.extend(!0,e.defaults,{dom:"<'ui grid'<'row'<'eight wide column'l><'right aligned eight wide column'f>><'row dt-table'<'sixteen wide column'tr>><'row'<'seven wide column'i><'right aligned nine wide column'p>>>",
|
||||
renderer:"semanticUI"});b.extend(e.ext.classes,{sWrapper:"dataTables_wrapper dt-semanticUI",sFilter:"dataTables_filter ui input",sProcessing:"dataTables_processing ui segment",sPageButton:"paginate_button item"});e.ext.renderer.pageButton.semanticUI=function(h,a,r,s,j,m){var n=new e.Api(h),t=h.oClasses,k=h.oLanguage.oPaginate,u=h.oLanguage.oAria.paginate||{},f,g,o=0,p=function(a,d){var e,i,l,c,q=function(a){a.preventDefault();!b(a.currentTarget).hasClass("disabled")&&n.page()!=a.data.action&&n.page(a.data.action).draw("page")};
|
||||
e=0;for(i=d.length;e<i;e++)if(c=d[e],b.isArray(c))p(a,c);else{g=f="";switch(c){case "ellipsis":f="…";g="disabled";break;case "first":f=k.sFirst;g=c+(0<j?"":" disabled");break;case "previous":f=k.sPrevious;g=c+(0<j?"":" disabled");break;case "next":f=k.sNext;g=c+(j<m-1?"":" disabled");break;case "last":f=k.sLast;g=c+(j<m-1?"":" disabled");break;default:f=c+1,g=j===c?"active":""}l=-1===g.indexOf("disabled")?"a":"div";f&&(l=b("<"+l+">",{"class":t.sPageButton+" "+g,id:0===r&&"string"===typeof c?
|
||||
h.sTableId+"_"+c:null,href:"#","aria-controls":h.sTableId,"aria-label":u[c],"data-dt-idx":o,tabindex:h.iTabIndex}).html(f).appendTo(a),h.oApi._fnBindAction(l,{action:c},q),o++)}},i;try{i=b(a).find(d.activeElement).data("dt-idx")}catch(v){}p(b(a).empty().html('<div class="ui pagination menu"/>').children(),s);i&&b(a).find("[data-dt-idx="+i+"]").focus()};b(d).on("init.dt",function(a,d){if("dt"===a.namespace&&b.fn.dropdown){var e=new b.fn.dataTable.Api(d);b("div.dataTables_length select",e.table().container()).dropdown()}});
|
||||
return e});
|
||||
176
media/js/dataTables.uikit.js
Normal file
176
media/js/dataTables.uikit.js
Normal file
@ -0,0 +1,176 @@
|
||||
/*! DataTables UIkit 3 integration
|
||||
*/
|
||||
|
||||
/**
|
||||
* This is a tech preview of UIKit integration with DataTables.
|
||||
*/
|
||||
(function( factory ){
|
||||
if ( typeof define === 'function' && define.amd ) {
|
||||
// AMD
|
||||
define( ['jquery', 'datatables.net'], function ( $ ) {
|
||||
return factory( $, window, document );
|
||||
} );
|
||||
}
|
||||
else if ( typeof exports === 'object' ) {
|
||||
// CommonJS
|
||||
module.exports = function (root, $) {
|
||||
if ( ! root ) {
|
||||
root = window;
|
||||
}
|
||||
|
||||
if ( ! $ || ! $.fn.dataTable ) {
|
||||
// Require DataTables, which attaches to jQuery, including
|
||||
// jQuery if needed and have a $ property so we can access the
|
||||
// jQuery object that is used
|
||||
$ = require('datatables.net')(root, $).$;
|
||||
}
|
||||
|
||||
return factory( $, root, root.document );
|
||||
};
|
||||
}
|
||||
else {
|
||||
// Browser
|
||||
factory( jQuery, window, document );
|
||||
}
|
||||
}(function( $, window, document, undefined ) {
|
||||
'use strict';
|
||||
var DataTable = $.fn.dataTable;
|
||||
|
||||
|
||||
/* Set the defaults for DataTables initialisation */
|
||||
$.extend( true, DataTable.defaults, {
|
||||
dom:
|
||||
"<'row uk-grid'<'uk-width-1-2'l><'uk-width-1-2'f>>" +
|
||||
"<'row uk-grid dt-merge-grid'<'uk-width-1-1'tr>>" +
|
||||
"<'row uk-grid dt-merge-grid'<'uk-width-2-5'i><'uk-width-3-5'p>>",
|
||||
renderer: 'uikit'
|
||||
} );
|
||||
|
||||
|
||||
/* Default class modification */
|
||||
$.extend( DataTable.ext.classes, {
|
||||
sWrapper: "dataTables_wrapper uk-form dt-uikit",
|
||||
sFilterInput: "uk-form-small",
|
||||
sLengthSelect: "uk-form-small",
|
||||
sProcessing: "dataTables_processing uk-panel"
|
||||
} );
|
||||
|
||||
|
||||
/* UIkit paging button renderer */
|
||||
DataTable.ext.renderer.pageButton.uikit = function ( settings, host, idx, buttons, page, pages ) {
|
||||
var api = new DataTable.Api( settings );
|
||||
var classes = settings.oClasses;
|
||||
var lang = settings.oLanguage.oPaginate;
|
||||
var aria = settings.oLanguage.oAria.paginate || {};
|
||||
var btnDisplay, btnClass, counter=0;
|
||||
|
||||
var attach = function( container, buttons ) {
|
||||
var i, ien, node, button;
|
||||
var clickHandler = function ( e ) {
|
||||
e.preventDefault();
|
||||
if ( !$(e.currentTarget).hasClass('disabled') && api.page() != e.data.action ) {
|
||||
api.page( e.data.action ).draw( 'page' );
|
||||
}
|
||||
};
|
||||
|
||||
for ( i=0, ien=buttons.length ; i<ien ; i++ ) {
|
||||
button = buttons[i];
|
||||
|
||||
if ( $.isArray( button ) ) {
|
||||
attach( container, button );
|
||||
}
|
||||
else {
|
||||
btnDisplay = '';
|
||||
btnClass = '';
|
||||
|
||||
switch ( button ) {
|
||||
case 'ellipsis':
|
||||
btnDisplay = '<i class="uk-icon-ellipsis-h"></i>';
|
||||
btnClass = 'uk-disabled disabled';
|
||||
break;
|
||||
|
||||
case 'first':
|
||||
btnDisplay = '<i class="uk-icon-angle-double-left"></i> ' + lang.sFirst;
|
||||
btnClass = (page > 0 ?
|
||||
'' : ' uk-disabled disabled');
|
||||
break;
|
||||
|
||||
case 'previous':
|
||||
btnDisplay = '<i class="uk-icon-angle-left"></i> ' + lang.sPrevious;
|
||||
btnClass = (page > 0 ?
|
||||
'' : 'uk-disabled disabled');
|
||||
break;
|
||||
|
||||
case 'next':
|
||||
btnDisplay = lang.sNext + ' <i class="uk-icon-angle-right"></i>';
|
||||
btnClass = (page < pages-1 ?
|
||||
'' : 'uk-disabled disabled');
|
||||
break;
|
||||
|
||||
case 'last':
|
||||
btnDisplay = lang.sLast + ' <i class="uk-icon-angle-double-right"></i>';
|
||||
btnClass = (page < pages-1 ?
|
||||
'' : ' uk-disabled disabled');
|
||||
break;
|
||||
|
||||
default:
|
||||
btnDisplay = button + 1;
|
||||
btnClass = page === button ?
|
||||
'uk-active' : '';
|
||||
break;
|
||||
}
|
||||
|
||||
if ( btnDisplay ) {
|
||||
node = $('<li>', {
|
||||
'class': classes.sPageButton+' '+btnClass,
|
||||
'id': idx === 0 && typeof button === 'string' ?
|
||||
settings.sTableId +'_'+ button :
|
||||
null
|
||||
} )
|
||||
.append( $(( -1 != btnClass.indexOf('disabled') || -1 != btnClass.indexOf('active') ) ? '<span>' : '<a>', {
|
||||
'href': '#',
|
||||
'aria-controls': settings.sTableId,
|
||||
'aria-label': aria[ button ],
|
||||
'data-dt-idx': counter,
|
||||
'tabindex': settings.iTabIndex
|
||||
} )
|
||||
.html( btnDisplay )
|
||||
)
|
||||
.appendTo( container );
|
||||
|
||||
settings.oApi._fnBindAction(
|
||||
node, {action: button}, clickHandler
|
||||
);
|
||||
|
||||
counter++;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// IE9 throws an 'unknown error' if document.activeElement is used
|
||||
// inside an iframe or frame.
|
||||
var activeEl;
|
||||
|
||||
try {
|
||||
// Because this approach is destroying and recreating the paging
|
||||
// elements, focus is lost on the select button which is bad for
|
||||
// accessibility. So we want to restore focus once the draw has
|
||||
// completed
|
||||
activeEl = $(host).find(document.activeElement).data('dt-idx');
|
||||
}
|
||||
catch (e) {}
|
||||
|
||||
attach(
|
||||
$(host).empty().html('<ul class="uk-pagination uk-pagination-right"/>').children('ul'),
|
||||
buttons
|
||||
);
|
||||
|
||||
if ( activeEl ) {
|
||||
$(host).find( '[data-dt-idx='+activeEl+']' ).focus();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return DataTable;
|
||||
}));
|
||||
8
media/js/dataTables.uikit.min.js
vendored
Normal file
8
media/js/dataTables.uikit.min.js
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
/*!
|
||||
DataTables UIkit 3 integration
|
||||
*/
|
||||
(function(b){"function"===typeof define&&define.amd?define(["jquery","datatables.net"],function(a){return b(a,window,document)}):"object"===typeof exports?module.exports=function(a,c){a||(a=window);if(!c||!c.fn.dataTable)c=require("datatables.net")(a,c).$;return b(c,a,a.document)}:b(jQuery,window,document)})(function(b,a,c){var g=b.fn.dataTable;b.extend(!0,g.defaults,{dom:"<'row uk-grid'<'uk-width-1-2'l><'uk-width-1-2'f>><'row uk-grid dt-merge-grid'<'uk-width-1-1'tr>><'row uk-grid dt-merge-grid'<'uk-width-2-5'i><'uk-width-3-5'p>>",
|
||||
renderer:"uikit"});b.extend(g.ext.classes,{sWrapper:"dataTables_wrapper uk-form dt-uikit",sFilterInput:"uk-form-small",sLengthSelect:"uk-form-small",sProcessing:"dataTables_processing uk-panel"});g.ext.renderer.pageButton.uikit=function(a,h,r,m,j,n){var o=new g.Api(a),s=a.oClasses,k=a.oLanguage.oPaginate,t=a.oLanguage.oAria.paginate||{},f,d,p=0,q=function(c,g){var l,h,i,e,m=function(a){a.preventDefault();!b(a.currentTarget).hasClass("disabled")&&o.page()!=a.data.action&&o.page(a.data.action).draw("page")};
|
||||
l=0;for(h=g.length;l<h;l++)if(e=g[l],b.isArray(e))q(c,e);else{d=f="";switch(e){case "ellipsis":f='<i class="uk-icon-ellipsis-h"></i>';d="uk-disabled disabled";break;case "first":f='<i class="uk-icon-angle-double-left"></i> '+k.sFirst;d=0<j?"":" uk-disabled disabled";break;case "previous":f='<i class="uk-icon-angle-left"></i> '+k.sPrevious;d=0<j?"":"uk-disabled disabled";break;case "next":f=k.sNext+' <i class="uk-icon-angle-right"></i>';d=j<n-1?"":"uk-disabled disabled";break;case "last":f=k.sLast+
|
||||
' <i class="uk-icon-angle-double-right"></i>';d=j<n-1?"":" uk-disabled disabled";break;default:f=e+1,d=j===e?"uk-active":""}f&&(i=b("<li>",{"class":s.sPageButton+" "+d,id:0===r&&"string"===typeof e?a.sTableId+"_"+e:null}).append(b(-1!=d.indexOf("disabled")||-1!=d.indexOf("active")?"<span>":"<a>",{href:"#","aria-controls":a.sTableId,"aria-label":t[e],"data-dt-idx":p,tabindex:a.iTabIndex}).html(f)).appendTo(c),a.oApi._fnBindAction(i,{action:e},m),p++)}},i;try{i=b(h).find(c.activeElement).data("dt-idx")}catch(u){}q(b(h).empty().html('<ul class="uk-pagination uk-pagination-right"/>').children("ul"),
|
||||
m);i&&b(h).find("[data-dt-idx="+i+"]").focus()};return g});
|
||||
Loading…
x
Reference in New Issue
Block a user