mirror of
https://github.com/DataTables/DataTables.git
synced 2024-11-28 10:24:10 +01:00
Dev: Output a warning if html tidy is not installed
- I just updated my PHP and HTML Tidy was not installed which resulted in the examples in the dist repo all being rewritten unfortunately. This should stop that happening again.
This commit is contained in:
Allan Jardine
parent
b84cc6063e
commit
ea9e926b53
@ -1 +1 @@
|
||||
b22e92021558eb1bfb221c71ab37c079ba925af0
|
||||
2c4420e7aa2a97ee195f8e6f1e847c7bfce87a9b
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,683 +1,893 @@
|
||||
<!doctype html>
|
||||
<!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 - HTML5 data-* attributes - table options</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js"></script><script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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">
|
||||
|
||||
<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 - HTML5 data-* attributes - table options</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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 ">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>HTML5 data-* attributes - table options</span></h1>
|
||||
<div class="info">
|
||||
<p>As of DataTables 1.10.5 it is now possible to define <a href="//datatables.net/reference/option">initialisation options</a> using HTML5 <code>data-*</code> attributes. The attribute names are read by DataTables and used, potentially in combination with, the standard Javascript initialisation options (with the <code>data-*</code> attributes taking priority).</p>
|
||||
|
||||
<p>Please note that the attribute values must contain valid JSON data or a Javascript primitive (as require by <a href="http://api.jquery.com/data/#data-html5">jQuery's <code>$().data()</code> method</a> - this means that double quotes should be used inside the attribute if needed for a string (see the <code>data-order</code> example below).</p>
|
||||
|
||||
<p>Additionally, jQuery will convert a dashed string into the camel-case notation used by DataTables for its options. For example <code>data-page-length</code> is used to represent <a href="//datatables.net/reference/option/pageLength"><code class="option" title="DataTables initialisation option">pageLength</code></a>.</p>
|
||||
|
||||
<p>The table below shows the use of <a href="//datatables.net/reference/option/pageLength"><code class="option" title="DataTables initialisation option">pageLength</code></a> and <a href="//datatables.net/reference/option/order"><code class="option" title="DataTables initialisation option">order</code></a> on the main table. Column options can also be defined on the table column cells, as shown by the use of the <a href="//datatables.net/reference/option/columns.orderable"><code class="option" title="DataTables initialisation option">columns.orderable</code></a> option on the fifth column below.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<table id="example" class="display" width="100%" data-page-length="25" data-order="[[ 1, "asc" ]]">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th data-orderable="false">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() {
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>HTML5 data-* attributes - table options</span></h1>
|
||||
<div class="info">
|
||||
<p>As of DataTables 1.10.5 it is now possible to define <a href="//datatables.net/reference/option">initialisation options</a> using HTML5 <code>data-*</code>
|
||||
attributes. The attribute names are read by DataTables and used, potentially in combination with, the standard Javascript initialisation options (with the
|
||||
<code>data-*</code> attributes taking priority).</p>
|
||||
<p>Please note that the attribute values must contain valid JSON data or a Javascript primitive (as require by <a href=
|
||||
"http://api.jquery.com/data/#data-html5">jQuery's <code>$().data()</code> method</a> - this means that double quotes should be used inside the attribute if needed
|
||||
for a string (see the <code>data-order</code> example below).</p>
|
||||
<p>Additionally, jQuery will convert a dashed string into the camel-case notation used by DataTables for its options. For example <code>data-page-length</code> is
|
||||
used to represent <a href="//datatables.net/reference/option/pageLength"><code class="option" title="DataTables initialisation option">pageLength</code></a>.</p>
|
||||
<p>The table below shows the use of <a href="//datatables.net/reference/option/pageLength"><code class="option" title=
|
||||
"DataTables initialisation option">pageLength</code></a> and <a href="//datatables.net/reference/option/order"><code class="option" title=
|
||||
"DataTables initialisation option">order</code></a> on the main table. Column options can also be defined on the table column cells, as shown by the use of the
|
||||
<a href="//datatables.net/reference/option/columns.orderable"><code class="option" title="DataTables initialisation option">columns.orderable</code></a> option on
|
||||
the fifth column below.</p>
|
||||
</div>
|
||||
<table id="example" class="display" width="100%" data-page-length="25" data-order="[[ 1, "asc" ]]">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th data-orderable="false">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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li><li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li></ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:</p>
|
||||
<code class="multiline language-css"></code>
|
||||
</div>
|
||||
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul><li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li></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>
|
||||
<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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</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="./index.html
|
||||
">Advanced initialisation</a></h3><ul class="toc active"><li><a href="./events_live.html
|
||||
">DOM / jQuery events</a></li><li><a href="./dt_events.html
|
||||
">DataTables events</a></li><li><a href="./column_render.html
|
||||
">Column rendering</a></li><li><a href="./length_menu.html
|
||||
">Page length options</a></li><li><a href="./dom_multiple_elements.html
|
||||
">Multiple table control elements</a></li><li><a href="./complex_header.html
|
||||
">Complex headers with column visibility</a></li><li><a href="./object_dom_read.html
|
||||
">Read HTML to data objects</a></li><li><a href="./html5-data-attributes.html
|
||||
">HTML5 data-* attributes - cell data</a></li><li class="active"><a href="./html5-data-options.html
|
||||
">HTML5 data-* attributes - table options</a></li><li><a href="./language_file.html
|
||||
">Language file</a></li><li><a href="./defaults.html
|
||||
">Setting defaults</a></li><li><a href="./row_callback.html
|
||||
">Row created callback</a></li><li><a href="./row_grouping.html
|
||||
">Row grouping</a></li><li><a href="./footer_callback.html
|
||||
">Footer callback</a></li><li><a href="./dom_toolbar.html
|
||||
">Custom toolbar elements</a></li><li><a href="./sort_direction_control.html
|
||||
">Order direction sequence control</a></li></ul></div><div class="toc-group"><h3><a href="../styling/index.html
|
||||
">Styling</a></h3><ul class="toc"><li><a href="../styling/display.html
|
||||
">Base style</a></li><li><a href="../styling/no-classes.html
|
||||
">Base style - no styling classes</a></li><li><a href="../styling/cell-border.html
|
||||
">Base style - cell borders</a></li><li><a href="../styling/compact.html
|
||||
">Base style - compact</a></li><li><a href="../styling/hover.html
|
||||
">Base style - hover</a></li><li><a href="../styling/order-column.html
|
||||
">Base style - order-column</a></li><li><a href="../styling/row-border.html
|
||||
">Base style - row borders</a></li><li><a href="../styling/stripe.html
|
||||
">Base style - stripe</a></li><li><a href="../styling/bootstrap.html
|
||||
">Bootstrap</a></li><li><a href="../styling/foundation.html
|
||||
">Foundation</a></li><li><a href="../styling/jqueryUI.html
|
||||
">jQuery UI ThemeRoller</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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.
|
||||
</p>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
</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>
|
||||
</body>
|
||||
</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="./index.html">Advanced initialisation</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./events_live.html">DOM / jQuery events</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./dt_events.html">DataTables events</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./column_render.html">Column rendering</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./length_menu.html">Page length options</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./dom_multiple_elements.html">Multiple table control elements</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./complex_header.html">Complex headers with column visibility</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./object_dom_read.html">Read HTML to data objects</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./language_file.html">Language file</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./defaults.html">Setting defaults</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./row_callback.html">Row created callback</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./row_grouping.html">Row grouping</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./footer_callback.html">Footer callback</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./dom_toolbar.html">Custom toolbar elements</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./sort_direction_control.html">Order direction sequence control</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/display.html">Base style</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/no-classes.html">Base style - no styling classes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/cell-border.html">Base style - cell borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Base style - compact</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/hover.html">Base style - hover</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/order-column.html">Base style - order-column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/row-border.html">Base style - row borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/stripe.html">Base style - stripe</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,65 +1,100 @@
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0" />
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"><link rel="stylesheet" type="text/css" href="../resources/demo.css">
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.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>
|
||||
<title>DataTables examples - Advanced initialisation</title>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Advanced initialisation</span></h1>
|
||||
<div class="info">
|
||||
<p>The configuration options offered by DataTables extend much further than the options shown in the basic initialisation of this documentation. Through combinations of the options available and the use of callbacks, DataTables is completely customisable and will fit into exactly what you need for your table display.</p>
|
||||
|
||||
<p>This section shows some more advanced initialisation options. Keep in mind also that each example can be combined with the other examples to get what you want!</p>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.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>
|
||||
<title>DataTables examples - Advanced initialisation</title>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<div class="toc">
|
||||
<div class="toc-group"><h3><a href="./index.html
|
||||
">Advanced initialisation</a></h3><ul class="toc"><li><a href="./events_live.html
|
||||
">DOM / jQuery events</a></li><li><a href="./dt_events.html
|
||||
">DataTables events</a></li><li><a href="./column_render.html
|
||||
">Column rendering</a></li><li><a href="./length_menu.html
|
||||
">Page length options</a></li><li><a href="./dom_multiple_elements.html
|
||||
">Multiple table control elements</a></li><li><a href="./complex_header.html
|
||||
">Complex headers with column visibility</a></li><li><a href="./object_dom_read.html
|
||||
">Read HTML to data objects</a></li><li><a href="./html5-data-attributes.html
|
||||
">HTML5 data-* attributes - cell data</a></li><li><a href="./html5-data-options.html
|
||||
">HTML5 data-* attributes - table options</a></li><li><a href="./language_file.html
|
||||
">Language file</a></li><li><a href="./defaults.html
|
||||
">Setting defaults</a></li><li><a href="./row_callback.html
|
||||
">Row created callback</a></li><li><a href="./row_grouping.html
|
||||
">Row grouping</a></li><li><a href="./footer_callback.html
|
||||
">Footer callback</a></li><li><a href="./dom_toolbar.html
|
||||
">Custom toolbar elements</a></li><li><a href="./sort_direction_control.html
|
||||
">Order direction sequence control</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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<h1>DataTables example <span>Advanced initialisation</span></h1>
|
||||
<div class="info">
|
||||
<p>The configuration options offered by DataTables extend much further than the options shown in the basic initialisation of this documentation. Through
|
||||
combinations of the options available and the use of callbacks, DataTables is completely customisable and will fit into exactly what you need for your table
|
||||
display.</p>
|
||||
<p>This section shows some more advanced initialisation options. Keep in mind also that each example can be combined with the other examples to get what you
|
||||
want!</p>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Advanced initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="./events_live.html">DOM / jQuery events</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./dt_events.html">DataTables events</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./column_render.html">Column rendering</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./length_menu.html">Page length options</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./dom_multiple_elements.html">Multiple table control elements</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./complex_header.html">Complex headers with column visibility</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./object_dom_read.html">Read HTML to data objects</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./language_file.html">Language file</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./defaults.html">Setting defaults</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./row_callback.html">Row created callback</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./row_grouping.html">Row grouping</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./footer_callback.html">Footer callback</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./dom_toolbar.html">Custom toolbar elements</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./sort_direction_control.html">Order direction sequence control</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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,19 +1,26 @@
|
||||
<!doctype html>
|
||||
<!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 - Flat array data source</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js"></script><script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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">
|
||||
|
||||
<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 - Flat array data source</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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( {
|
||||
"ajax": {
|
||||
@ -31,42 +38,60 @@ $(document).ready(function() {
|
||||
} );
|
||||
} );
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example ">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Flat array data source</span></h1>
|
||||
<div class="info">
|
||||
<p>When loading data from an Ajax source, by default, DataTables will look for the data to use in the <code>data</code> parameter of a returned object (e.g. <code>{ "data": [...] }</code>). This can easily be change by using the <code>dataSrc</code> option of the <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> initiation option.</p>
|
||||
|
||||
<p>The <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title="DataTables initialisation option">ajax.dataSrc</code></a> has a number of ways in which it can be used:</p>
|
||||
|
||||
<ul class="markdown">
|
||||
<li>As a string (e.g. <code>dataSrc: 'myData'</code>) - obtain data from a different property in the source object.</li>
|
||||
<li>As an empty string (e.g. <code>dataSrc: ''</code>) - the data source is not an object but an array.</li>
|
||||
<li>As a function (e.g. <code>dataSrc: function(json) {}</code>) - a function can be used to transform the data from one source format to another (for example you could convert from XML to a Javascript object). The value returned from the function is used as the data for the table.</li>
|
||||
</ul>
|
||||
|
||||
<p>The example below shows <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title="DataTables initialisation option">ajax.dataSrc</code></a> being used as an empty string. This tells DataTables that the JSON loaded is a plain array, not an object with an array inside it as is the default.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%"><thead><tr><th>Name</th><th>Position</th><th>Office</th><th>Extn.</th><th>Start date</th><th>Salary</th></tr></thead><tfoot><tr><th>Name</th><th>Position</th><th>Office</th><th>Extn.</th><th>Start date</th><th>Salary</th></tr></tfoot></table>
|
||||
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Flat array data source</span></h1>
|
||||
<div class="info">
|
||||
<p>When loading data from an Ajax source, by default, DataTables will look for the data to use in the <code>data</code> parameter of a returned object (e.g.
|
||||
<code>{ "data": [...] }</code>). This can easily be change by using the <code>dataSrc</code> option of the <a href=
|
||||
"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> initiation option.</p>
|
||||
<p>The <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title="DataTables initialisation option">ajax.dataSrc</code></a> has a number
|
||||
of ways in which it can be used:</p>
|
||||
<ul class="markdown">
|
||||
<li>As a string (e.g. <code>dataSrc: 'myData'</code>) - obtain data from a different property in the source object.</li>
|
||||
<li>As an empty string (e.g. <code>dataSrc: ''</code>) - the data source is not an object but an array.</li>
|
||||
<li>As a function (e.g. <code>dataSrc: function(json) {}</code>) - a function can be used to transform the data from one source format to another (for example
|
||||
you could convert from XML to a Javascript object). The value returned from the function is used as the data for the table.</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() {
|
||||
<p>The example below shows <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title=
|
||||
"DataTables initialisation option">ajax.dataSrc</code></a> being used as an empty string. This tells DataTables that the JSON loaded is a plain array, not an
|
||||
object with an array inside it as is the default.</p>
|
||||
</div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Extn.</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Extn.</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
"ajax": {
|
||||
"url": "data/objects_root_array.txt",
|
||||
@ -82,149 +107,354 @@ $(document).ready(function() {
|
||||
]
|
||||
} );
|
||||
} );</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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li><li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li></ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:</p>
|
||||
<code class="multiline language-css"></code>
|
||||
</div>
|
||||
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul><li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li></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>
|
||||
<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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</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-attributes.html
|
||||
">HTML5 data-* attributes - cell data</a></li><li><a href="../advanced_init/html5-data-options.html
|
||||
">HTML5 data-* attributes - table options</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="../styling/index.html
|
||||
">Styling</a></h3><ul class="toc"><li><a href="../styling/display.html
|
||||
">Base style</a></li><li><a href="../styling/no-classes.html
|
||||
">Base style - no styling classes</a></li><li><a href="../styling/cell-border.html
|
||||
">Base style - cell borders</a></li><li><a href="../styling/compact.html
|
||||
">Base style - compact</a></li><li><a href="../styling/hover.html
|
||||
">Base style - hover</a></li><li><a href="../styling/order-column.html
|
||||
">Base style - order-column</a></li><li><a href="../styling/row-border.html
|
||||
">Base style - row borders</a></li><li><a href="../styling/stripe.html
|
||||
">Base style - stripe</a></li><li><a href="../styling/bootstrap.html
|
||||
">Bootstrap</a></li><li><a href="../styling/foundation.html
|
||||
">Foundation</a></li><li><a href="../styling/jqueryUI.html
|
||||
">jQuery UI ThemeRoller</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="./index.html
|
||||
">Ajax</a></h3><ul class="toc active"><li><a href="./simple.html
|
||||
">Ajax data source (arrays)</a></li><li><a href="./objects.html
|
||||
">Ajax data source (objects)</a></li><li><a href="./deep.html
|
||||
">Nested object data (objects)</a></li><li><a href="./objects_subarrays.html
|
||||
">Nested object data (arrays)</a></li><li><a href="./orthogonal-data.html
|
||||
">Orthogonal data</a></li><li><a href="./null_data_source.html
|
||||
">Generated content for a column</a></li><li><a href="./custom_data_property.html
|
||||
">Custom data source property</a></li><li class="active"><a href="./custom_data_flat.html
|
||||
">Flat array data source</a></li><li><a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.
|
||||
</p>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
</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>
|
||||
</body>
|
||||
</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-attributes.html">HTML5 data-* attributes - cell data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/display.html">Base style</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/no-classes.html">Base style - no styling classes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/cell-border.html">Base style - cell borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Base style - compact</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/hover.html">Base style - hover</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/order-column.html">Base style - order-column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/row-border.html">Base style - row borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/stripe.html">Base style - stripe</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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="./index.html">Ajax</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./simple.html">Ajax data source (arrays)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./objects.html">Ajax data source (objects)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./deep.html">Nested object data (objects)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./objects_subarrays.html">Nested object data (arrays)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./orthogonal-data.html">Orthogonal data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./null_data_source.html">Generated content for a column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./custom_data_property.html">Custom data source property</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./custom_data_flat.html">Flat array data source</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,19 +1,26 @@
|
||||
<!doctype html>
|
||||
<!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 - Custom data source property</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js"></script><script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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">
|
||||
|
||||
<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 - Custom data source property</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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( {
|
||||
"ajax": {
|
||||
@ -23,44 +30,61 @@ $(document).ready(function() {
|
||||
} );
|
||||
} );
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example ">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Custom data source property</span></h1>
|
||||
<div class="info">
|
||||
<p>When loading data from an Ajax source, by default, DataTables will look for the data to use in the <code>data</code> parameter of a returned object (e.g. <code>{ "data": [...] }</code>). This can easily be change by using the <code>dataSrc</code> option of the <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> initiation option.</p>
|
||||
|
||||
<p>The <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title="DataTables initialisation option">ajax.dataSrc</code></a> has a number of ways in which it can be used:</p>
|
||||
|
||||
<ul class="markdown">
|
||||
<li>As a string (e.g. <code>dataSrc: 'myData'</code>) - obtain data from a different property in the source object.</li>
|
||||
<li>As an empty string (e.g. <code>dataSrc: ''</code>) - the data source is not an object but an array.</li>
|
||||
<li>As a function (e.g. <code>dataSrc: function(json) {}</code>) - a function can be used to transform the data from one source format to another (for example you could convert from XML to a Javascript object). The value returned from the function is used as the data for the table.</li>
|
||||
</ul>
|
||||
|
||||
<p>The example below shows <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title="DataTables initialisation option">ajax.dataSrc</code></a> being used as a string to get the data from a different source property, in this case <code class="string" title="String">demo</code> but it could be any value, included a nested property by using standard dotted Javascript object notation.</p>
|
||||
|
||||
<p>For more details on loading a DataTable with Ajax data, please refer to the <a href="https://datatables.net/manual/ajax">Ajax section of the manual</a>.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%"><thead><tr><th>Name</th><th>Position</th><th>Office</th><th>Extn.</th><th>Start date</th><th>Salary</th></tr></thead><tfoot><tr><th>Name</th><th>Position</th><th>Office</th><th>Extn.</th><th>Start date</th><th>Salary</th></tr></tfoot></table>
|
||||
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Custom data source property</span></h1>
|
||||
<div class="info">
|
||||
<p>When loading data from an Ajax source, by default, DataTables will look for the data to use in the <code>data</code> parameter of a returned object (e.g.
|
||||
<code>{ "data": [...] }</code>). This can easily be change by using the <code>dataSrc</code> option of the <a href=
|
||||
"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> initiation option.</p>
|
||||
<p>The <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title="DataTables initialisation option">ajax.dataSrc</code></a> has a number
|
||||
of ways in which it can be used:</p>
|
||||
<ul class="markdown">
|
||||
<li>As a string (e.g. <code>dataSrc: 'myData'</code>) - obtain data from a different property in the source object.</li>
|
||||
<li>As an empty string (e.g. <code>dataSrc: ''</code>) - the data source is not an object but an array.</li>
|
||||
<li>As a function (e.g. <code>dataSrc: function(json) {}</code>) - a function can be used to transform the data from one source format to another (for example
|
||||
you could convert from XML to a Javascript object). The value returned from the function is used as the data for the table.</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() {
|
||||
<p>The example below shows <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title=
|
||||
"DataTables initialisation option">ajax.dataSrc</code></a> being used as a string to get the data from a different source property, in this case <code class=
|
||||
"string" title="String">demo</code> but it could be any value, included a nested property by using standard dotted Javascript object notation.</p>
|
||||
<p>For more details on loading a DataTable with Ajax data, please refer to the <a href="https://datatables.net/manual/ajax">Ajax section of the manual</a>.</p>
|
||||
</div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Extn.</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Extn.</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
"ajax": {
|
||||
"url": "data/arrays_custom_prop.txt",
|
||||
@ -68,149 +92,354 @@ $(document).ready(function() {
|
||||
}
|
||||
} );
|
||||
} );</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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li><li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li></ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:</p>
|
||||
<code class="multiline language-css"></code>
|
||||
</div>
|
||||
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul><li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li></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>
|
||||
<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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</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-attributes.html
|
||||
">HTML5 data-* attributes - cell data</a></li><li><a href="../advanced_init/html5-data-options.html
|
||||
">HTML5 data-* attributes - table options</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="../styling/index.html
|
||||
">Styling</a></h3><ul class="toc"><li><a href="../styling/display.html
|
||||
">Base style</a></li><li><a href="../styling/no-classes.html
|
||||
">Base style - no styling classes</a></li><li><a href="../styling/cell-border.html
|
||||
">Base style - cell borders</a></li><li><a href="../styling/compact.html
|
||||
">Base style - compact</a></li><li><a href="../styling/hover.html
|
||||
">Base style - hover</a></li><li><a href="../styling/order-column.html
|
||||
">Base style - order-column</a></li><li><a href="../styling/row-border.html
|
||||
">Base style - row borders</a></li><li><a href="../styling/stripe.html
|
||||
">Base style - stripe</a></li><li><a href="../styling/bootstrap.html
|
||||
">Bootstrap</a></li><li><a href="../styling/foundation.html
|
||||
">Foundation</a></li><li><a href="../styling/jqueryUI.html
|
||||
">jQuery UI ThemeRoller</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="./index.html
|
||||
">Ajax</a></h3><ul class="toc active"><li><a href="./simple.html
|
||||
">Ajax data source (arrays)</a></li><li><a href="./objects.html
|
||||
">Ajax data source (objects)</a></li><li><a href="./deep.html
|
||||
">Nested object data (objects)</a></li><li><a href="./objects_subarrays.html
|
||||
">Nested object data (arrays)</a></li><li><a href="./orthogonal-data.html
|
||||
">Orthogonal data</a></li><li><a href="./null_data_source.html
|
||||
">Generated content for a column</a></li><li class="active"><a href="./custom_data_property.html
|
||||
">Custom data source property</a></li><li><a href="./custom_data_flat.html
|
||||
">Flat array data source</a></li><li><a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.
|
||||
</p>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
</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>
|
||||
</body>
|
||||
</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-attributes.html">HTML5 data-* attributes - cell data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/display.html">Base style</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/no-classes.html">Base style - no styling classes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/cell-border.html">Base style - cell borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Base style - compact</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/hover.html">Base style - hover</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/order-column.html">Base style - order-column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/row-border.html">Base style - row borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/stripe.html">Base style - stripe</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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="./index.html">Ajax</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./simple.html">Ajax data source (arrays)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./objects.html">Ajax data source (objects)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./deep.html">Nested object data (objects)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./objects_subarrays.html">Nested object data (arrays)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./orthogonal-data.html">Orthogonal data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./null_data_source.html">Generated content for a column</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./custom_data_property.html">Custom data source property</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./custom_data_flat.html">Flat array data source</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,19 +1,26 @@
|
||||
<!doctype html>
|
||||
<!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 - Nested object data (objects)</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js"></script><script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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">
|
||||
|
||||
<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 - Nested object data (objects)</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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( {
|
||||
"processing": true,
|
||||
@ -29,50 +36,70 @@ $(document).ready(function() {
|
||||
} );
|
||||
} );
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example ">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Nested object data (objects)</span></h1>
|
||||
<div class="info">
|
||||
<p>DataTables has the ability to use data from almost data JSON data source through the use of the <a href="//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option. In its simplest case, it can be used to read arbitrary object properties, but can also be extended to <em>n</em> levels of nested objects / arrays through the use of standard Javascript dotted object notation. Each dot (<code>.</code>) in the <a href="//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option represents another object level.</p>
|
||||
|
||||
<p>In this example <code>hr.position</code> refers to the <code>position</code> property of the <code>hr</code> object in the row's data source object, while <code>contact.0</code> refers to the first element of the <code>contact</code> array. Any number of dots can be used to obtain deeply nested data.</p>
|
||||
|
||||
<p>The example below shows DataTables reading information for the columns from nested objects and arrays, where the structure of the row's data source in this example is:</p>
|
||||
|
||||
<pre><code class="multiline">{
|
||||
"name": "Tiger Nixon",
|
||||
"hr": {
|
||||
"position": "System Architect",
|
||||
"salary": "$3,120",
|
||||
"start_date": "2011/04/25"
|
||||
},
|
||||
"contact": [
|
||||
"Edinburgh",
|
||||
"5421"
|
||||
]
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Nested object data (objects)</span></h1>
|
||||
<div class="info">
|
||||
<p>DataTables has the ability to use data from almost data JSON data source through the use of the <a href=
|
||||
"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option. In its simplest
|
||||
case, it can be used to read arbitrary object properties, but can also be extended to <em>n</em> levels of nested objects / arrays through the use of standard
|
||||
Javascript dotted object notation. Each dot (<code>.</code>) in the <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
|
||||
"DataTables initialisation option">columns.data</code></a> option represents another object level.</p>
|
||||
<p>In this example <code>hr.position</code> refers to the <code>position</code> property of the <code>hr</code> object in the row's data source object, while
|
||||
<code>contact.0</code> refers to the first element of the <code>contact</code> array. Any number of dots can be used to obtain deeply nested data.</p>
|
||||
<p>The example below shows DataTables reading information for the columns from nested objects and arrays, where the structure of the row's data source in this
|
||||
example is:</p>
|
||||
<pre>
|
||||
<code class="multiline">{
|
||||
"name": "Tiger Nixon",
|
||||
"hr": {
|
||||
"position": "System Architect",
|
||||
"salary": "$3,120",
|
||||
"start_date": "2011/04/25"
|
||||
},
|
||||
"contact": [
|
||||
"Edinburgh",
|
||||
"5421"
|
||||
]
|
||||
}
|
||||
</code></pre>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%"><thead><tr><th>Name</th><th>Position</th><th>Office</th><th>Extn.</th><th>Start date</th><th>Salary</th></tr></thead><tfoot><tr><th>Name</th><th>Position</th><th>Office</th><th>Extn.</th><th>Start date</th><th>Salary</th></tr></tfoot></table>
|
||||
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
|
||||
<code class="multiline language-js">$(document).ready(function() {
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Extn.</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Extn.</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
"processing": true,
|
||||
"ajax": "data/objects_deep.txt",
|
||||
@ -86,149 +113,354 @@ $(document).ready(function() {
|
||||
]
|
||||
} );
|
||||
} );</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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li><li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li></ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:</p>
|
||||
<code class="multiline language-css"></code>
|
||||
</div>
|
||||
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul><li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li></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>
|
||||
<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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</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-attributes.html
|
||||
">HTML5 data-* attributes - cell data</a></li><li><a href="../advanced_init/html5-data-options.html
|
||||
">HTML5 data-* attributes - table options</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="../styling/index.html
|
||||
">Styling</a></h3><ul class="toc"><li><a href="../styling/display.html
|
||||
">Base style</a></li><li><a href="../styling/no-classes.html
|
||||
">Base style - no styling classes</a></li><li><a href="../styling/cell-border.html
|
||||
">Base style - cell borders</a></li><li><a href="../styling/compact.html
|
||||
">Base style - compact</a></li><li><a href="../styling/hover.html
|
||||
">Base style - hover</a></li><li><a href="../styling/order-column.html
|
||||
">Base style - order-column</a></li><li><a href="../styling/row-border.html
|
||||
">Base style - row borders</a></li><li><a href="../styling/stripe.html
|
||||
">Base style - stripe</a></li><li><a href="../styling/bootstrap.html
|
||||
">Bootstrap</a></li><li><a href="../styling/foundation.html
|
||||
">Foundation</a></li><li><a href="../styling/jqueryUI.html
|
||||
">jQuery UI ThemeRoller</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="./index.html
|
||||
">Ajax</a></h3><ul class="toc active"><li><a href="./simple.html
|
||||
">Ajax data source (arrays)</a></li><li><a href="./objects.html
|
||||
">Ajax data source (objects)</a></li><li class="active"><a href="./deep.html
|
||||
">Nested object data (objects)</a></li><li><a href="./objects_subarrays.html
|
||||
">Nested object data (arrays)</a></li><li><a href="./orthogonal-data.html
|
||||
">Orthogonal data</a></li><li><a href="./null_data_source.html
|
||||
">Generated content for a column</a></li><li><a href="./custom_data_property.html
|
||||
">Custom data source property</a></li><li><a href="./custom_data_flat.html
|
||||
">Flat array data source</a></li><li><a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.
|
||||
</p>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
</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>
|
||||
</body>
|
||||
</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-attributes.html">HTML5 data-* attributes - cell data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/display.html">Base style</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/no-classes.html">Base style - no styling classes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/cell-border.html">Base style - cell borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Base style - compact</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/hover.html">Base style - hover</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/order-column.html">Base style - order-column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/row-border.html">Base style - row borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/stripe.html">Base style - stripe</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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="./index.html">Ajax</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./simple.html">Ajax data source (arrays)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./objects.html">Ajax data source (objects)</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./deep.html">Nested object data (objects)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./objects_subarrays.html">Nested object data (arrays)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./orthogonal-data.html">Orthogonal data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./null_data_source.html">Generated content for a column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./custom_data_property.html">Custom data source property</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./custom_data_flat.html">Flat array data source</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,19 +1,26 @@
|
||||
<!doctype html>
|
||||
<!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 - Deferred rendering for speed</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js"></script><script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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">
|
||||
|
||||
<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 - Deferred rendering for speed</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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( {
|
||||
"ajax": "data/arrays.txt",
|
||||
@ -21,184 +28,408 @@ $(document).ready(function() {
|
||||
} );
|
||||
} );
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example ">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Deferred rendering for speed</span></h1>
|
||||
<div class="info">
|
||||
<p>When working with large data sources, you might seek to improve the speed at which DataTables runs. One method to do this is to make use of the built-in deferred rendering option in DataTables with the <a href="//datatables.net/reference/option/deferRender"><code class="option" title="DataTables initialisation option">deferRender</code></a> option.</p>
|
||||
|
||||
<p>When deferred rendering is enabled, rather than having DataTables create all <code class="tag" title="HTML tag">TR</code> and <code class="tag" title="HTML tag">TD</code> nodes required for the table when the data is loaded, DataTables will only create the nodes required for each individual row at the time of that row being drawn on the page (these nodes are then retained in case they are needed again so they aren't created multiple times). This can give a significant performance increase, since a lot less work is done at initialisation time.</p>
|
||||
|
||||
<p>The example below shows DataTables with deferred rendering enabled. For this small example you'll likely notice no difference, but larger tables can benefit significantly from simply enabling this parameter.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%"><thead><tr><th>Name</th><th>Position</th><th>Office</th><th>Extn.</th><th>Start date</th><th>Salary</th></tr></thead><tfoot><tr><th>Name</th><th>Position</th><th>Office</th><th>Extn.</th><th>Start date</th><th>Salary</th></tr></tfoot></table>
|
||||
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
|
||||
<code class="multiline language-js">$(document).ready(function() {
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Deferred rendering for speed</span></h1>
|
||||
<div class="info">
|
||||
<p>When working with large data sources, you might seek to improve the speed at which DataTables runs. One method to do this is to make use of the built-in
|
||||
deferred rendering option in DataTables with the <a href="//datatables.net/reference/option/deferRender"><code class="option" title=
|
||||
"DataTables initialisation option">deferRender</code></a> option.</p>
|
||||
<p>When deferred rendering is enabled, rather than having DataTables create all <code class="tag" title="HTML tag">TR</code> and <code class="tag" title=
|
||||
"HTML tag">TD</code> nodes required for the table when the data is loaded, DataTables will only create the nodes required for each individual row at the time of
|
||||
that row being drawn on the page (these nodes are then retained in case they are needed again so they aren't created multiple times). This can give a significant
|
||||
performance increase, since a lot less work is done at initialisation time.</p>
|
||||
<p>The example below shows DataTables with deferred rendering enabled. For this small example you'll likely notice no difference, but larger tables can benefit
|
||||
significantly from simply enabling this parameter.</p>
|
||||
</div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Extn.</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Extn.</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
"ajax": "data/arrays.txt",
|
||||
"deferRender": true
|
||||
} );
|
||||
} );</code>
|
||||
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||
<ul><li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li><li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li></ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:</p>
|
||||
<code class="multiline language-css"></code>
|
||||
</div>
|
||||
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul><li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li></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>
|
||||
<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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</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-attributes.html
|
||||
">HTML5 data-* attributes - cell data</a></li><li><a href="../advanced_init/html5-data-options.html
|
||||
">HTML5 data-* attributes - table options</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="../styling/index.html
|
||||
">Styling</a></h3><ul class="toc"><li><a href="../styling/display.html
|
||||
">Base style</a></li><li><a href="../styling/no-classes.html
|
||||
">Base style - no styling classes</a></li><li><a href="../styling/cell-border.html
|
||||
">Base style - cell borders</a></li><li><a href="../styling/compact.html
|
||||
">Base style - compact</a></li><li><a href="../styling/hover.html
|
||||
">Base style - hover</a></li><li><a href="../styling/order-column.html
|
||||
">Base style - order-column</a></li><li><a href="../styling/row-border.html
|
||||
">Base style - row borders</a></li><li><a href="../styling/stripe.html
|
||||
">Base style - stripe</a></li><li><a href="../styling/bootstrap.html
|
||||
">Bootstrap</a></li><li><a href="../styling/foundation.html
|
||||
">Foundation</a></li><li><a href="../styling/jqueryUI.html
|
||||
">jQuery UI ThemeRoller</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="./index.html
|
||||
">Ajax</a></h3><ul class="toc active"><li><a href="./simple.html
|
||||
">Ajax data source (arrays)</a></li><li><a href="./objects.html
|
||||
">Ajax data source (objects)</a></li><li><a href="./deep.html
|
||||
">Nested object data (objects)</a></li><li><a href="./objects_subarrays.html
|
||||
">Nested object data (arrays)</a></li><li><a href="./orthogonal-data.html
|
||||
">Orthogonal data</a></li><li><a href="./null_data_source.html
|
||||
">Generated content for a column</a></li><li><a href="./custom_data_property.html
|
||||
">Custom data source property</a></li><li><a href="./custom_data_flat.html
|
||||
">Flat array data source</a></li><li class="active"><a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.
|
||||
</p>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
</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>
|
||||
</body>
|
||||
</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-attributes.html">HTML5 data-* attributes - cell data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/display.html">Base style</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/no-classes.html">Base style - no styling classes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/cell-border.html">Base style - cell borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Base style - compact</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/hover.html">Base style - hover</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/order-column.html">Base style - order-column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/row-border.html">Base style - row borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/stripe.html">Base style - stripe</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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="./index.html">Ajax</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./simple.html">Ajax data source (arrays)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./objects.html">Ajax data source (objects)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./deep.html">Nested object data (objects)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./objects_subarrays.html">Nested object data (arrays)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./orthogonal-data.html">Orthogonal data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./null_data_source.html">Generated content for a column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./custom_data_property.html">Custom data source property</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./custom_data_flat.html">Flat array data source</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,58 +1,78 @@
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0" />
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"><link rel="stylesheet" type="text/css" href="../resources/demo.css">
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.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>
|
||||
<title>DataTables examples - Ajax sourced data</title>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Ajax sourced data</span></h1>
|
||||
<div class="info">
|
||||
<p>DataTables can read data from a server via Ajax, while still performing searching, ordering, paging etc on the client-side. This is done through use of the <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option, which has a number of options to customise how the data is retrieved from the server.</p>
|
||||
|
||||
<p>The examples in this section demonstrate the use of Ajax loading data in DataTables, with client-side processing.</p>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.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>
|
||||
<title>DataTables examples - Ajax sourced data</title>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<div class="toc">
|
||||
<div class="toc-group"><h3><a href="./index.html
|
||||
">Ajax</a></h3><ul class="toc"><li><a href="./simple.html
|
||||
">Ajax data source (arrays)</a></li><li><a href="./objects.html
|
||||
">Ajax data source (objects)</a></li><li><a href="./deep.html
|
||||
">Nested object data (objects)</a></li><li><a href="./objects_subarrays.html
|
||||
">Nested object data (arrays)</a></li><li><a href="./orthogonal-data.html
|
||||
">Orthogonal data</a></li><li><a href="./null_data_source.html
|
||||
">Generated content for a column</a></li><li><a href="./custom_data_property.html
|
||||
">Custom data source property</a></li><li><a href="./custom_data_flat.html
|
||||
">Flat array data source</a></li><li><a href="./defer_render.html
|
||||
">Deferred rendering for speed</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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<h1>DataTables example <span>Ajax sourced data</span></h1>
|
||||
<div class="info">
|
||||
<p>DataTables can read data from a server via Ajax, while still performing searching, ordering, paging etc on the client-side. This is done through use of the
|
||||
<a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option, which has a number of
|
||||
options to customise how the data is retrieved from the server.</p>
|
||||
<p>The examples in this section demonstrate the use of Ajax loading data in DataTables, with client-side processing.</p>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Ajax</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="./simple.html">Ajax data source (arrays)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./objects.html">Ajax data source (objects)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./deep.html">Nested object data (objects)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./objects_subarrays.html">Nested object data (arrays)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./orthogonal-data.html">Orthogonal data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./null_data_source.html">Generated content for a column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./custom_data_property.html">Custom data source property</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./custom_data_flat.html">Flat array data source</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./defer_render.html">Deferred rendering for speed</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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,19 +1,26 @@
|
||||
<!doctype html>
|
||||
<!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 - Generated content for a column</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js"></script><script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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">
|
||||
|
||||
<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 - Generated content for a column</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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() {
|
||||
var table = $('#example').DataTable( {
|
||||
"ajax": "data/arrays.txt",
|
||||
@ -30,41 +37,65 @@ $(document).ready(function() {
|
||||
} );
|
||||
} );
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example ">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Generated content for a column</span></h1>
|
||||
<div class="info">
|
||||
<p>In some tables you might wish to have some content generated automatically. This can be done in a number of ways:</p>
|
||||
|
||||
<ul class="markdown">
|
||||
<li><a href="//datatables.net/reference/option/columns.render"><code class="option" title="DataTables initialisation option">columns.render</code></a> for content that is dynamic (i.e. based upon the row's data)</li>
|
||||
<li><a href="//datatables.net/reference/option/columns.defaultContent"><code class="option" title="DataTables initialisation option">columns.defaultContent</code></a> for static content (i.e. simple strings)</li>
|
||||
</ul>
|
||||
|
||||
<p>This examples shows the use of <a href="//datatables.net/reference/option/columns.defaultContent"><code class="option" title="DataTables initialisation option">columns.defaultContent</code></a> to create a <em>button</em> element in the last column of the table. A simple jQuery <code>click</code> event listener is used to watch for clicks on the row, and when activated uses the <a href="//datatables.net/reference/api/row().data()"><code class="api" title="DataTables API method">row().data()</code></a> method to get the data for the row and show a bit of information about it in an <code>alert</code> box. This is a simple use case, but it can be built up to be arbitrarily complex.</p>
|
||||
|
||||
<p>Note also that the <a href="//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option for the column has been set to <code>null</code> to indicate that the column has no information that should be obtained data source object.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%"><thead><tr><th>Name</th><th>Position</th><th>Office</th><th>Extn.</th><th>Start date</th><th>Salary</th></tr></thead><tfoot><tr><th>Name</th><th>Position</th><th>Office</th><th>Extn.</th><th>Start date</th><th>Salary</th></tr></tfoot></table>
|
||||
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Generated content for a column</span></h1>
|
||||
<div class="info">
|
||||
<p>In some tables you might wish to have some content generated automatically. This can be done in a number of ways:</p>
|
||||
<ul class="markdown">
|
||||
<li>
|
||||
<a href="//datatables.net/reference/option/columns.render"><code class="option" title="DataTables initialisation option">columns.render</code></a> for
|
||||
content that is dynamic (i.e. based upon the row's data)
|
||||
</li>
|
||||
<li>
|
||||
<a href="//datatables.net/reference/option/columns.defaultContent"><code class="option" title=
|
||||
"DataTables initialisation option">columns.defaultContent</code></a> for static content (i.e. simple strings)
|
||||
</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() {
|
||||
<p>This examples shows the use of <a href="//datatables.net/reference/option/columns.defaultContent"><code class="option" title=
|
||||
"DataTables initialisation option">columns.defaultContent</code></a> to create a <em>button</em> element in the last column of the table. A simple jQuery
|
||||
<code>click</code> event listener is used to watch for clicks on the row, and when activated uses the <a href=
|
||||
"//datatables.net/reference/api/row().data()"><code class="api" title="DataTables API method">row().data()</code></a> method to get the data for the row and show a
|
||||
bit of information about it in an <code>alert</code> box. This is a simple use case, but it can be built up to be arbitrarily complex.</p>
|
||||
<p>Note also that the <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
|
||||
"DataTables initialisation option">columns.data</code></a> option for the column has been set to <code>null</code> to indicate that the column has no information
|
||||
that should be obtained data source object.</p>
|
||||
</div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Extn.</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Extn.</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
var table = $('#example').DataTable( {
|
||||
"ajax": "data/arrays.txt",
|
||||
"columnDefs": [ {
|
||||
@ -79,149 +110,354 @@ $(document).ready(function() {
|
||||
alert( data[0] +"'s salary is: "+ data[ 5 ] );
|
||||
} );
|
||||
} );</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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li><li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li></ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:</p>
|
||||
<code class="multiline language-css"></code>
|
||||
</div>
|
||||
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul><li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li></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>
|
||||
<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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</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-attributes.html
|
||||
">HTML5 data-* attributes - cell data</a></li><li><a href="../advanced_init/html5-data-options.html
|
||||
">HTML5 data-* attributes - table options</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="../styling/index.html
|
||||
">Styling</a></h3><ul class="toc"><li><a href="../styling/display.html
|
||||
">Base style</a></li><li><a href="../styling/no-classes.html
|
||||
">Base style - no styling classes</a></li><li><a href="../styling/cell-border.html
|
||||
">Base style - cell borders</a></li><li><a href="../styling/compact.html
|
||||
">Base style - compact</a></li><li><a href="../styling/hover.html
|
||||
">Base style - hover</a></li><li><a href="../styling/order-column.html
|
||||
">Base style - order-column</a></li><li><a href="../styling/row-border.html
|
||||
">Base style - row borders</a></li><li><a href="../styling/stripe.html
|
||||
">Base style - stripe</a></li><li><a href="../styling/bootstrap.html
|
||||
">Bootstrap</a></li><li><a href="../styling/foundation.html
|
||||
">Foundation</a></li><li><a href="../styling/jqueryUI.html
|
||||
">jQuery UI ThemeRoller</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="./index.html
|
||||
">Ajax</a></h3><ul class="toc active"><li><a href="./simple.html
|
||||
">Ajax data source (arrays)</a></li><li><a href="./objects.html
|
||||
">Ajax data source (objects)</a></li><li><a href="./deep.html
|
||||
">Nested object data (objects)</a></li><li><a href="./objects_subarrays.html
|
||||
">Nested object data (arrays)</a></li><li><a href="./orthogonal-data.html
|
||||
">Orthogonal data</a></li><li class="active"><a href="./null_data_source.html
|
||||
">Generated content for a column</a></li><li><a href="./custom_data_property.html
|
||||
">Custom data source property</a></li><li><a href="./custom_data_flat.html
|
||||
">Flat array data source</a></li><li><a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.
|
||||
</p>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
</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>
|
||||
</body>
|
||||
</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-attributes.html">HTML5 data-* attributes - cell data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/display.html">Base style</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/no-classes.html">Base style - no styling classes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/cell-border.html">Base style - cell borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Base style - compact</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/hover.html">Base style - hover</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/order-column.html">Base style - order-column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/row-border.html">Base style - row borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/stripe.html">Base style - stripe</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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="./index.html">Ajax</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./simple.html">Ajax data source (arrays)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./objects.html">Ajax data source (objects)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./deep.html">Nested object data (objects)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./objects_subarrays.html">Nested object data (arrays)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./orthogonal-data.html">Orthogonal data</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./null_data_source.html">Generated content for a column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./custom_data_property.html">Custom data source property</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./custom_data_flat.html">Flat array data source</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,19 +1,26 @@
|
||||
<!doctype html>
|
||||
<!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 - Ajax data source (objects)</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js"></script><script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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">
|
||||
|
||||
<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 - Ajax data source (objects)</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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( {
|
||||
"ajax": "data/objects.txt",
|
||||
@ -28,48 +35,66 @@ $(document).ready(function() {
|
||||
} );
|
||||
} );
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example ">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Ajax data source (objects)</span></h1>
|
||||
<div class="info">
|
||||
<p>To try and make life easy, by default, DataTables expects arrays to be used as the data source for rows in the table. However, this isn't always useful, and you may wish to have DataTables use objects as the data source for each row (i.e. each row has its data described by an object) as this can make working with the data much more understandable, particularly if you are using the API and you don't need to keep track of array indexes.</p>
|
||||
|
||||
<p>This can be done quite simply by using the <a href="//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option which you use to tell DataTables which property to use from the data source object for each column.</p>
|
||||
|
||||
<p>In this example the Ajax source returns an array of objects, which DataTables uses to display the table. The structure of the row's data source in this example is:</p>
|
||||
|
||||
<pre><code class="multiline">{
|
||||
"name": "Tiger Nixon",
|
||||
"position": "System Architect",
|
||||
"salary": "$3,120",
|
||||
"start_date": "2011/04/25",
|
||||
"office": "Edinburgh",
|
||||
"extn": "5421"
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Ajax data source (objects)</span></h1>
|
||||
<div class="info">
|
||||
<p>To try and make life easy, by default, DataTables expects arrays to be used as the data source for rows in the table. However, this isn't always useful, and you
|
||||
may wish to have DataTables use objects as the data source for each row (i.e. each row has its data described by an object) as this can make working with the data
|
||||
much more understandable, particularly if you are using the API and you don't need to keep track of array indexes.</p>
|
||||
<p>This can be done quite simply by using the <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
|
||||
"DataTables initialisation option">columns.data</code></a> option which you use to tell DataTables which property to use from the data source object for each
|
||||
column.</p>
|
||||
<p>In this example the Ajax source returns an array of objects, which DataTables uses to display the table. The structure of the row's data source in this example
|
||||
is:</p>
|
||||
<pre>
|
||||
<code class="multiline">{
|
||||
"name": "Tiger Nixon",
|
||||
"position": "System Architect",
|
||||
"salary": "$3,120",
|
||||
"start_date": "2011/04/25",
|
||||
"office": "Edinburgh",
|
||||
"extn": "5421"
|
||||
}
|
||||
</code></pre>
|
||||
|
||||
<p>For more details on loading a DataTable with Ajax data, please refer to the <a href="https://datatables.net/manual/ajax">Ajax section of the manual</a>.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%"><thead><tr><th>Name</th><th>Position</th><th>Office</th><th>Extn.</th><th>Start date</th><th>Salary</th></tr></thead><tfoot><tr><th>Name</th><th>Position</th><th>Office</th><th>Extn.</th><th>Start date</th><th>Salary</th></tr></tfoot></table>
|
||||
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
|
||||
<code class="multiline language-js">$(document).ready(function() {
|
||||
</code>
|
||||
</pre>
|
||||
<p>For more details on loading a DataTable with Ajax data, please refer to the <a href="https://datatables.net/manual/ajax">Ajax section of the manual</a>.</p>
|
||||
</div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Extn.</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Extn.</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
"ajax": "data/objects.txt",
|
||||
"columns": [
|
||||
@ -82,149 +107,354 @@ $(document).ready(function() {
|
||||
]
|
||||
} );
|
||||
} );</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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li><li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li></ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:</p>
|
||||
<code class="multiline language-css"></code>
|
||||
</div>
|
||||
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul><li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li></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>
|
||||
<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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</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-attributes.html
|
||||
">HTML5 data-* attributes - cell data</a></li><li><a href="../advanced_init/html5-data-options.html
|
||||
">HTML5 data-* attributes - table options</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="../styling/index.html
|
||||
">Styling</a></h3><ul class="toc"><li><a href="../styling/display.html
|
||||
">Base style</a></li><li><a href="../styling/no-classes.html
|
||||
">Base style - no styling classes</a></li><li><a href="../styling/cell-border.html
|
||||
">Base style - cell borders</a></li><li><a href="../styling/compact.html
|
||||
">Base style - compact</a></li><li><a href="../styling/hover.html
|
||||
">Base style - hover</a></li><li><a href="../styling/order-column.html
|
||||
">Base style - order-column</a></li><li><a href="../styling/row-border.html
|
||||
">Base style - row borders</a></li><li><a href="../styling/stripe.html
|
||||
">Base style - stripe</a></li><li><a href="../styling/bootstrap.html
|
||||
">Bootstrap</a></li><li><a href="../styling/foundation.html
|
||||
">Foundation</a></li><li><a href="../styling/jqueryUI.html
|
||||
">jQuery UI ThemeRoller</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="./index.html
|
||||
">Ajax</a></h3><ul class="toc active"><li><a href="./simple.html
|
||||
">Ajax data source (arrays)</a></li><li class="active"><a href="./objects.html
|
||||
">Ajax data source (objects)</a></li><li><a href="./deep.html
|
||||
">Nested object data (objects)</a></li><li><a href="./objects_subarrays.html
|
||||
">Nested object data (arrays)</a></li><li><a href="./orthogonal-data.html
|
||||
">Orthogonal data</a></li><li><a href="./null_data_source.html
|
||||
">Generated content for a column</a></li><li><a href="./custom_data_property.html
|
||||
">Custom data source property</a></li><li><a href="./custom_data_flat.html
|
||||
">Flat array data source</a></li><li><a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.
|
||||
</p>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
</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>
|
||||
</body>
|
||||
</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-attributes.html">HTML5 data-* attributes - cell data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/display.html">Base style</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/no-classes.html">Base style - no styling classes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/cell-border.html">Base style - cell borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Base style - compact</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/hover.html">Base style - hover</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/order-column.html">Base style - order-column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/row-border.html">Base style - row borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/stripe.html">Base style - stripe</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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="./index.html">Ajax</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./simple.html">Ajax data source (arrays)</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./objects.html">Ajax data source (objects)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./deep.html">Nested object data (objects)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./objects_subarrays.html">Nested object data (arrays)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./orthogonal-data.html">Orthogonal data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./null_data_source.html">Generated content for a column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./custom_data_property.html">Custom data source property</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./custom_data_flat.html">Flat array data source</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,19 +1,26 @@
|
||||
<!doctype html>
|
||||
<!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 - Nested object data (arrays)</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js"></script><script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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">
|
||||
|
||||
<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 - Nested object data (arrays)</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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( {
|
||||
"ajax": "data/objects_subarrays.txt",
|
||||
@ -28,56 +35,80 @@ $(document).ready(function() {
|
||||
} );
|
||||
} );
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example ">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Nested object data (arrays)</span></h1>
|
||||
<div class="info">
|
||||
<p>The information read from an Ajax data source can be arbitrarily complex, but still be displayed by DataTables through the <a href="//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option, which is particularly useful for working with JSON feeds in an already defined format.</p>
|
||||
|
||||
<p>The <a href="//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option has the ability to read information not only from objects, but also from arrays using the same dotted object syntax as for objects. In addition to this, when working with an array data source <a href="//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> can process the data to combine and display the data in simple forms (more complex forms can be defined by using <a href="//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> as a function).</p>
|
||||
|
||||
<p>This example shows two different aspects of using <a href="//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> to read arrays:</p>
|
||||
|
||||
<ul class="markdown">
|
||||
<li>The <em>Name</em> column is sourced from an array of two elements (first and last name), which are automatically concatenated together. This is done by using array bracket syntax, with the characters between the brackets being used as the glue between elements (e.g. <code>name[, ]</code>).</li>
|
||||
<li>The <em>Position</em>, <em>Start date</em> and <em>Salary</em> columns are read directly from array elements using dotted object notation (e.g. <code>hr.0</code>). Note that the order in which the data can be used in the columns does not have to match the order in which it is defined in the data source. The structure of the row's data source in this example is:</li>
|
||||
</ul>
|
||||
|
||||
<pre><code class="multiline">{
|
||||
"name": [
|
||||
"Nixon",
|
||||
"Tiger"
|
||||
],
|
||||
"hr": [
|
||||
"System Architect",
|
||||
"$3,120",
|
||||
"2011/04/25"
|
||||
],
|
||||
"office": "Edinburgh",
|
||||
"extn": "5421"
|
||||
}
|
||||
</code></pre>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%"><thead><tr><th>Name</th><th>Position</th><th>Office</th><th>Extn.</th><th>Start date</th><th>Salary</th></tr></thead><tfoot><tr><th>Name</th><th>Position</th><th>Office</th><th>Extn.</th><th>Start date</th><th>Salary</th></tr></tfoot></table>
|
||||
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Nested object data (arrays)</span></h1>
|
||||
<div class="info">
|
||||
<p>The information read from an Ajax data source can be arbitrarily complex, but still be displayed by DataTables through the <a href=
|
||||
"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option, which is
|
||||
particularly useful for working with JSON feeds in an already defined format.</p>
|
||||
<p>The <a href="//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option has
|
||||
the ability to read information not only from objects, but also from arrays using the same dotted object syntax as for objects. In addition to this, when working
|
||||
with an array data source <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
|
||||
"DataTables initialisation option">columns.data</code></a> can process the data to combine and display the data in simple forms (more complex forms can be defined
|
||||
by using <a href="//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> as a
|
||||
function).</p>
|
||||
<p>This example shows two different aspects of using <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
|
||||
"DataTables initialisation option">columns.data</code></a> to read arrays:</p>
|
||||
<ul class="markdown">
|
||||
<li>The <em>Name</em> column is sourced from an array of two elements (first and last name), which are automatically concatenated together. This is done by
|
||||
using array bracket syntax, with the characters between the brackets being used as the glue between elements (e.g. <code>name[, ]</code>).</li>
|
||||
<li>The <em>Position</em>, <em>Start date</em> and <em>Salary</em> columns are read directly from array elements using dotted object notation (e.g.
|
||||
<code>hr.0</code>). Note that the order in which the data can be used in the columns does not have to match the order in which it is defined in the data
|
||||
source. The structure of the row's data source in this example is:</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() {
|
||||
<pre>
|
||||
<code class="multiline">{
|
||||
"name": [
|
||||
"Nixon",
|
||||
"Tiger"
|
||||
],
|
||||
"hr": [
|
||||
"System Architect",
|
||||
"$3,120",
|
||||
"2011/04/25"
|
||||
],
|
||||
"office": "Edinburgh",
|
||||
"extn": "5421"
|
||||
}
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Extn.</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Extn.</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
"ajax": "data/objects_subarrays.txt",
|
||||
"columns": [
|
||||
@ -90,149 +121,354 @@ $(document).ready(function() {
|
||||
]
|
||||
} );
|
||||
} );</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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li><li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li></ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:</p>
|
||||
<code class="multiline language-css"></code>
|
||||
</div>
|
||||
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul><li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li></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>
|
||||
<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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</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-attributes.html
|
||||
">HTML5 data-* attributes - cell data</a></li><li><a href="../advanced_init/html5-data-options.html
|
||||
">HTML5 data-* attributes - table options</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="../styling/index.html
|
||||
">Styling</a></h3><ul class="toc"><li><a href="../styling/display.html
|
||||
">Base style</a></li><li><a href="../styling/no-classes.html
|
||||
">Base style - no styling classes</a></li><li><a href="../styling/cell-border.html
|
||||
">Base style - cell borders</a></li><li><a href="../styling/compact.html
|
||||
">Base style - compact</a></li><li><a href="../styling/hover.html
|
||||
">Base style - hover</a></li><li><a href="../styling/order-column.html
|
||||
">Base style - order-column</a></li><li><a href="../styling/row-border.html
|
||||
">Base style - row borders</a></li><li><a href="../styling/stripe.html
|
||||
">Base style - stripe</a></li><li><a href="../styling/bootstrap.html
|
||||
">Bootstrap</a></li><li><a href="../styling/foundation.html
|
||||
">Foundation</a></li><li><a href="../styling/jqueryUI.html
|
||||
">jQuery UI ThemeRoller</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="./index.html
|
||||
">Ajax</a></h3><ul class="toc active"><li><a href="./simple.html
|
||||
">Ajax data source (arrays)</a></li><li><a href="./objects.html
|
||||
">Ajax data source (objects)</a></li><li><a href="./deep.html
|
||||
">Nested object data (objects)</a></li><li class="active"><a href="./objects_subarrays.html
|
||||
">Nested object data (arrays)</a></li><li><a href="./orthogonal-data.html
|
||||
">Orthogonal data</a></li><li><a href="./null_data_source.html
|
||||
">Generated content for a column</a></li><li><a href="./custom_data_property.html
|
||||
">Custom data source property</a></li><li><a href="./custom_data_flat.html
|
||||
">Flat array data source</a></li><li><a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.
|
||||
</p>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
</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>
|
||||
</body>
|
||||
</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-attributes.html">HTML5 data-* attributes - cell data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/display.html">Base style</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/no-classes.html">Base style - no styling classes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/cell-border.html">Base style - cell borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Base style - compact</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/hover.html">Base style - hover</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/order-column.html">Base style - order-column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/row-border.html">Base style - row borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/stripe.html">Base style - stripe</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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="./index.html">Ajax</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./simple.html">Ajax data source (arrays)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./objects.html">Ajax data source (objects)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./deep.html">Nested object data (objects)</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./objects_subarrays.html">Nested object data (arrays)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./orthogonal-data.html">Orthogonal data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./null_data_source.html">Generated content for a column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./custom_data_property.html">Custom data source property</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./custom_data_flat.html">Flat array data source</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,19 +1,26 @@
|
||||
<!doctype html>
|
||||
<!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 - Orthogonal data</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js"></script><script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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">
|
||||
|
||||
<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 - Orthogonal data</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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( {
|
||||
ajax: "data/orthogonal.txt",
|
||||
@ -31,49 +38,68 @@ $(document).ready(function() {
|
||||
} );
|
||||
} );
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example ">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Orthogonal data</span></h1>
|
||||
<div class="info">
|
||||
<p>To try and make life easy, by default, DataTables expects arrays to be used as the data source for rows in the table. However, this isn't always useful, and you may wish to have DataTables use objects as the data source for each row (i.e. each row has its data described by an object) as this can make working with the data much more understandable, particularly if you are using the API and you don't need to keep track of array indexes.</p>
|
||||
|
||||
<p>This can be done quite simply by using the <a href="//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option which you use to tell DataTables which property to use from the data source object for each column.</p>
|
||||
|
||||
<p>In this example the Ajax source returns an array of objects, which DataTables uses to display the table. The structure of the row's data source in this example is:</p>
|
||||
|
||||
<pre><code class="multiline">{
|
||||
"name": "Tiger Nixon",
|
||||
"position": "System Architect",
|
||||
"salary": "$3,120",
|
||||
"start_date": {
|
||||
"display": "Mon 25th Apr 11",
|
||||
"timestamp": "1303682400"
|
||||
},
|
||||
"office": "Edinburgh",
|
||||
"extn": "5421"
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Orthogonal data</span></h1>
|
||||
<div class="info">
|
||||
<p>To try and make life easy, by default, DataTables expects arrays to be used as the data source for rows in the table. However, this isn't always useful, and you
|
||||
may wish to have DataTables use objects as the data source for each row (i.e. each row has its data described by an object) as this can make working with the data
|
||||
much more understandable, particularly if you are using the API and you don't need to keep track of array indexes.</p>
|
||||
<p>This can be done quite simply by using the <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
|
||||
"DataTables initialisation option">columns.data</code></a> option which you use to tell DataTables which property to use from the data source object for each
|
||||
column.</p>
|
||||
<p>In this example the Ajax source returns an array of objects, which DataTables uses to display the table. The structure of the row's data source in this example
|
||||
is:</p>
|
||||
<pre>
|
||||
<code class="multiline">{
|
||||
"name": "Tiger Nixon",
|
||||
"position": "System Architect",
|
||||
"salary": "$3,120",
|
||||
"start_date": {
|
||||
"display": "Mon 25th Apr 11",
|
||||
"timestamp": "1303682400"
|
||||
},
|
||||
"office": "Edinburgh",
|
||||
"extn": "5421"
|
||||
}
|
||||
</code></pre>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%"><thead><tr><th>Name</th><th>Position</th><th>Office</th><th>Extn.</th><th>Start date</th><th>Salary</th></tr></thead><tfoot><tr><th>Name</th><th>Position</th><th>Office</th><th>Extn.</th><th>Start date</th><th>Salary</th></tr></tfoot></table>
|
||||
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
|
||||
<code class="multiline language-js">$(document).ready(function() {
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Extn.</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Extn.</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
ajax: "data/orthogonal.txt",
|
||||
columns: [
|
||||
@ -89,149 +115,354 @@ $(document).ready(function() {
|
||||
]
|
||||
} );
|
||||
} );</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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li><li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li></ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:</p>
|
||||
<code class="multiline language-css"></code>
|
||||
</div>
|
||||
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul><li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li></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>
|
||||
<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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</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-attributes.html
|
||||
">HTML5 data-* attributes - cell data</a></li><li><a href="../advanced_init/html5-data-options.html
|
||||
">HTML5 data-* attributes - table options</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="../styling/index.html
|
||||
">Styling</a></h3><ul class="toc"><li><a href="../styling/display.html
|
||||
">Base style</a></li><li><a href="../styling/no-classes.html
|
||||
">Base style - no styling classes</a></li><li><a href="../styling/cell-border.html
|
||||
">Base style - cell borders</a></li><li><a href="../styling/compact.html
|
||||
">Base style - compact</a></li><li><a href="../styling/hover.html
|
||||
">Base style - hover</a></li><li><a href="../styling/order-column.html
|
||||
">Base style - order-column</a></li><li><a href="../styling/row-border.html
|
||||
">Base style - row borders</a></li><li><a href="../styling/stripe.html
|
||||
">Base style - stripe</a></li><li><a href="../styling/bootstrap.html
|
||||
">Bootstrap</a></li><li><a href="../styling/foundation.html
|
||||
">Foundation</a></li><li><a href="../styling/jqueryUI.html
|
||||
">jQuery UI ThemeRoller</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="./index.html
|
||||
">Ajax</a></h3><ul class="toc active"><li><a href="./simple.html
|
||||
">Ajax data source (arrays)</a></li><li><a href="./objects.html
|
||||
">Ajax data source (objects)</a></li><li><a href="./deep.html
|
||||
">Nested object data (objects)</a></li><li><a href="./objects_subarrays.html
|
||||
">Nested object data (arrays)</a></li><li class="active"><a href="./orthogonal-data.html
|
||||
">Orthogonal data</a></li><li><a href="./null_data_source.html
|
||||
">Generated content for a column</a></li><li><a href="./custom_data_property.html
|
||||
">Custom data source property</a></li><li><a href="./custom_data_flat.html
|
||||
">Flat array data source</a></li><li><a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.
|
||||
</p>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
</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>
|
||||
</body>
|
||||
</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-attributes.html">HTML5 data-* attributes - cell data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/display.html">Base style</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/no-classes.html">Base style - no styling classes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/cell-border.html">Base style - cell borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Base style - compact</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/hover.html">Base style - hover</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/order-column.html">Base style - order-column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/row-border.html">Base style - row borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/stripe.html">Base style - stripe</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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="./index.html">Ajax</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./simple.html">Ajax data source (arrays)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./objects.html">Ajax data source (objects)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./deep.html">Nested object data (objects)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./objects_subarrays.html">Nested object data (arrays)</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./orthogonal-data.html">Orthogonal data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./null_data_source.html">Generated content for a column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./custom_data_property.html">Custom data source property</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./custom_data_flat.html">Flat array data source</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,216 +1,447 @@
|
||||
<!doctype html>
|
||||
<!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 - Ajax data source (arrays)</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js"></script><script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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">
|
||||
|
||||
<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 - Ajax data source (arrays)</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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( {
|
||||
"ajax": "data/arrays.txt"
|
||||
} );
|
||||
} );
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example ">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Ajax data source (arrays)</span></h1>
|
||||
<div class="info">
|
||||
<p>DataTables has the ability to read data from virtually any JSON data source that can be obtained by Ajax. This can be done, in its most simple form, by setting the <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option to the address of the JSON data source.</p>
|
||||
|
||||
<p>The <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option also allows for more advanced configuration such as altering how the Ajax request is made. See the <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> documentation or the other Ajax examples for DataTables for further information.</p>
|
||||
|
||||
<p>By default DataTables will assume that an array data source is to be used and will read the information to be displayed in each column from the row's array using the column index, making working with arrays very simple (note that this can be changed, or objects used may using the <a href="//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option, shown in other examples).</p>
|
||||
|
||||
<p>The example below shows DataTables loading data for a table from arrays as the data source, where the structure of the row's data source in this example is:</p>
|
||||
|
||||
<pre><code class="multiline">[
|
||||
"Tiger Nixon",
|
||||
"System Architect",
|
||||
"Edinburgh",
|
||||
"5421",
|
||||
"2011/04/25",
|
||||
"$3,120"
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Ajax data source (arrays)</span></h1>
|
||||
<div class="info">
|
||||
<p>DataTables has the ability to read data from virtually any JSON data source that can be obtained by Ajax. This can be done, in its most simple form, by setting
|
||||
the <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option to the address of the
|
||||
JSON data source.</p>
|
||||
<p>The <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option also allows for more
|
||||
advanced configuration such as altering how the Ajax request is made. See the <a href="//datatables.net/reference/option/ajax"><code class="option" title=
|
||||
"DataTables initialisation option">ajax</code></a> documentation or the other Ajax examples for DataTables for further information.</p>
|
||||
<p>By default DataTables will assume that an array data source is to be used and will read the information to be displayed in each column from the row's array
|
||||
using the column index, making working with arrays very simple (note that this can be changed, or objects used may using the <a href=
|
||||
"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option, shown in other
|
||||
examples).</p>
|
||||
<p>The example below shows DataTables loading data for a table from arrays as the data source, where the structure of the row's data source in this example is:</p>
|
||||
<pre>
|
||||
<code class="multiline">[
|
||||
"Tiger Nixon",
|
||||
"System Architect",
|
||||
"Edinburgh",
|
||||
"5421",
|
||||
"2011/04/25",
|
||||
"$3,120"
|
||||
]
|
||||
</code></pre>
|
||||
|
||||
<p>For more details on loading a DataTable with Ajax data, please refer to the <a href="https://datatables.net/manual/ajax">Ajax section of the manual</a>.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%"><thead><tr><th>Name</th><th>Position</th><th>Office</th><th>Extn.</th><th>Start date</th><th>Salary</th></tr></thead><tfoot><tr><th>Name</th><th>Position</th><th>Office</th><th>Extn.</th><th>Start date</th><th>Salary</th></tr></tfoot></table>
|
||||
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
|
||||
<code class="multiline language-js">$(document).ready(function() {
|
||||
</code>
|
||||
</pre>
|
||||
<p>For more details on loading a DataTable with Ajax data, please refer to the <a href="https://datatables.net/manual/ajax">Ajax section of the manual</a>.</p>
|
||||
</div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Extn.</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Extn.</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
"ajax": "data/arrays.txt"
|
||||
} );
|
||||
} );</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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li><li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li></ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:</p>
|
||||
<code class="multiline language-css"></code>
|
||||
</div>
|
||||
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul><li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li></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>
|
||||
<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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</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-attributes.html
|
||||
">HTML5 data-* attributes - cell data</a></li><li><a href="../advanced_init/html5-data-options.html
|
||||
">HTML5 data-* attributes - table options</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="../styling/index.html
|
||||
">Styling</a></h3><ul class="toc"><li><a href="../styling/display.html
|
||||
">Base style</a></li><li><a href="../styling/no-classes.html
|
||||
">Base style - no styling classes</a></li><li><a href="../styling/cell-border.html
|
||||
">Base style - cell borders</a></li><li><a href="../styling/compact.html
|
||||
">Base style - compact</a></li><li><a href="../styling/hover.html
|
||||
">Base style - hover</a></li><li><a href="../styling/order-column.html
|
||||
">Base style - order-column</a></li><li><a href="../styling/row-border.html
|
||||
">Base style - row borders</a></li><li><a href="../styling/stripe.html
|
||||
">Base style - stripe</a></li><li><a href="../styling/bootstrap.html
|
||||
">Bootstrap</a></li><li><a href="../styling/foundation.html
|
||||
">Foundation</a></li><li><a href="../styling/jqueryUI.html
|
||||
">jQuery UI ThemeRoller</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="./index.html
|
||||
">Ajax</a></h3><ul class="toc active"><li class="active"><a href="./simple.html
|
||||
">Ajax data source (arrays)</a></li><li><a href="./objects.html
|
||||
">Ajax data source (objects)</a></li><li><a href="./deep.html
|
||||
">Nested object data (objects)</a></li><li><a href="./objects_subarrays.html
|
||||
">Nested object data (arrays)</a></li><li><a href="./orthogonal-data.html
|
||||
">Orthogonal data</a></li><li><a href="./null_data_source.html
|
||||
">Generated content for a column</a></li><li><a href="./custom_data_property.html
|
||||
">Custom data source property</a></li><li><a href="./custom_data_flat.html
|
||||
">Flat array data source</a></li><li><a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.
|
||||
</p>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
</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>
|
||||
</body>
|
||||
</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-attributes.html">HTML5 data-* attributes - cell data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/display.html">Base style</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/no-classes.html">Base style - no styling classes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/cell-border.html">Base style - cell borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Base style - compact</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/hover.html">Base style - hover</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/order-column.html">Base style - order-column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/row-border.html">Base style - row borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/stripe.html">Base style - stripe</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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="./index.html">Ajax</a></h3>
|
||||
<ul class="toc active">
|
||||
<li class="active">
|
||||
<a href="./simple.html">Ajax data source (arrays)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./objects.html">Ajax data source (objects)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./deep.html">Nested object data (objects)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./objects_subarrays.html">Nested object data (arrays)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./orthogonal-data.html">Orthogonal data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./null_data_source.html">Generated content for a column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./custom_data_property.html">Custom data source property</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./custom_data_flat.html">Flat array data source</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,19 +1,26 @@
|
||||
<!doctype html>
|
||||
<!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 - Add rows</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js"></script><script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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">
|
||||
|
||||
<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 - Add rows</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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() {
|
||||
var t = $('#example').DataTable();
|
||||
@ -36,38 +43,55 @@ $(document).ready(function() {
|
||||
} );
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example ">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Add rows</span></h1>
|
||||
<div class="info">
|
||||
<p>New rows can be added to a DataTable very easily using the <a href="//datatables.net/reference/api/row.add()"><code class="api" title="DataTables API method">row.add()</code></a> API method. Simply call the API function with the data that is to be used for the new row (be it an array or object). Multiple rows can be added using the <a href="//datatables.net/reference/api/rows.add()"><code class="api" title="DataTables API method">rows.add()</code></a> method (note the plural). Data can be likewise be updated with the <a href="//datatables.net/reference/api/row().data()"><code class="api" title="DataTables API method">row().data()</code></a> and <a href="//datatables.net/reference/api/row().remove()"><code class="api" title="DataTables API method">row().remove()</code></a> methods.</p>
|
||||
|
||||
<p>Note that in order to see the new row in the table you must call the <a href="//datatables.net/reference/api/draw()"><code class="api" title="DataTables API method">draw()</code></a> method, which is easily done through the chaining that the DataTables API makes use of.</p>
|
||||
|
||||
<p>This example shows a single row being added each time the button below is clicked upon.</p>
|
||||
|
||||
<p>The <a href="https://editor.datatables.net/">Editor extension</a> adds full table editing controls, including creating, editing and deleting rows, to a DataTable.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<button id="addRow">Add new row</button>
|
||||
<table id="example" class="display" cellspacing="0" width="100%"><thead><tr><th>Column 1</th><th>Column 2</th><th>Column 3</th><th>Column 4</th><th>Column 5</th></tr></thead><tfoot><tr><th>Column 1</th><th>Column 2</th><th>Column 3</th><th>Column 4</th><th>Column 5</th></tr></tfoot><tbody></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() {
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Add rows</span></h1>
|
||||
<div class="info">
|
||||
<p>New rows can be added to a DataTable very easily using the <a href="//datatables.net/reference/api/row.add()"><code class="api" title=
|
||||
"DataTables API method">row.add()</code></a> API method. Simply call the API function with the data that is to be used for the new row (be it an array or object).
|
||||
Multiple rows can be added using the <a href="//datatables.net/reference/api/rows.add()"><code class="api" title="DataTables API method">rows.add()</code></a>
|
||||
method (note the plural). Data can be likewise be updated with the <a href="//datatables.net/reference/api/row().data()"><code class="api" title=
|
||||
"DataTables API method">row().data()</code></a> and <a href="//datatables.net/reference/api/row().remove()"><code class="api" title=
|
||||
"DataTables API method">row().remove()</code></a> methods.</p>
|
||||
<p>Note that in order to see the new row in the table you must call the <a href="//datatables.net/reference/api/draw()"><code class="api" title=
|
||||
"DataTables API method">draw()</code></a> method, which is easily done through the chaining that the DataTables API makes use of.</p>
|
||||
<p>This example shows a single row being added each time the button below is clicked upon.</p>
|
||||
<p>The <a href="https://editor.datatables.net/">Editor extension</a> adds full table editing controls, including creating, editing and deleting rows, to a
|
||||
DataTable.</p>
|
||||
</div><button id="addRow">Add new row</button>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Column 1</th>
|
||||
<th>Column 2</th>
|
||||
<th>Column 3</th>
|
||||
<th>Column 4</th>
|
||||
<th>Column 5</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Column 1</th>
|
||||
<th>Column 2</th>
|
||||
<th>Column 3</th>
|
||||
<th>Column 4</th>
|
||||
<th>Column 5</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
var t = $('#example').DataTable();
|
||||
var counter = 1;
|
||||
|
||||
@ -86,149 +110,354 @@ $(document).ready(function() {
|
||||
// Automatically add a first row of data
|
||||
$('#addRow').click();
|
||||
} );</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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li><li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li></ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:</p>
|
||||
<code class="multiline language-css"></code>
|
||||
</div>
|
||||
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul><li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li></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>
|
||||
<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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</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-attributes.html
|
||||
">HTML5 data-* attributes - cell data</a></li><li><a href="../advanced_init/html5-data-options.html
|
||||
">HTML5 data-* attributes - table options</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="../styling/index.html
|
||||
">Styling</a></h3><ul class="toc"><li><a href="../styling/display.html
|
||||
">Base style</a></li><li><a href="../styling/no-classes.html
|
||||
">Base style - no styling classes</a></li><li><a href="../styling/cell-border.html
|
||||
">Base style - cell borders</a></li><li><a href="../styling/compact.html
|
||||
">Base style - compact</a></li><li><a href="../styling/hover.html
|
||||
">Base style - hover</a></li><li><a href="../styling/order-column.html
|
||||
">Base style - order-column</a></li><li><a href="../styling/row-border.html
|
||||
">Base style - row borders</a></li><li><a href="../styling/stripe.html
|
||||
">Base style - stripe</a></li><li><a href="../styling/bootstrap.html
|
||||
">Bootstrap</a></li><li><a href="../styling/foundation.html
|
||||
">Foundation</a></li><li><a href="../styling/jqueryUI.html
|
||||
">jQuery UI ThemeRoller</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="./index.html
|
||||
">API</a></h3><ul class="toc active"><li class="active"><a href="./add_row.html
|
||||
">Add rows</a></li><li><a href="./multi_filter.html
|
||||
">Individual column searching (text inputs)</a></li><li><a href="./multi_filter_select.html
|
||||
">Individual column searching (select inputs)</a></li><li><a href="./highlight.html
|
||||
">Highlighting rows and columns</a></li><li><a href="./row_details.html
|
||||
">Child rows (show extra / detailed information)</a></li><li><a href="./select_row.html
|
||||
">Row selection (multiple rows)</a></li><li><a href="./select_single_row.html
|
||||
">Row selection and deletion (single row)</a></li><li><a href="./form.html
|
||||
">Form inputs</a></li><li><a href="./counter_columns.html
|
||||
">Index column</a></li><li><a href="./show_hide.html
|
||||
">Show / hide columns dynamically</a></li><li><a href="./api_in_init.html
|
||||
">Using API in callbacks</a></li><li><a href="./tabs_and_scrolling.html
|
||||
">Scrolling and Bootstrap tabs</a></li><li><a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.
|
||||
</p>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
</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>
|
||||
</body>
|
||||
</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-attributes.html">HTML5 data-* attributes - cell data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/display.html">Base style</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/no-classes.html">Base style - no styling classes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/cell-border.html">Base style - cell borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Base style - compact</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/hover.html">Base style - hover</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/order-column.html">Base style - order-column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/row-border.html">Base style - row borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/stripe.html">Base style - stripe</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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="./index.html">API</a></h3>
|
||||
<ul class="toc active">
|
||||
<li class="active">
|
||||
<a href="./add_row.html">Add rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./multi_filter.html">Individual column searching (text inputs)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./multi_filter_select.html">Individual column searching (select inputs)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./highlight.html">Highlighting rows and columns</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./row_details.html">Child rows (show extra / detailed information)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./select_row.html">Row selection (multiple rows)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./select_single_row.html">Row selection and deletion (single row)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./form.html">Form inputs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./counter_columns.html">Index column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./show_hide.html">Show / hide columns dynamically</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./api_in_init.html">Using API in callbacks</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,60 +1,88 @@
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0" />
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"><link rel="stylesheet" type="text/css" href="../resources/demo.css">
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.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>
|
||||
<title>DataTables examples - API</title>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>API</span></h1>
|
||||
<div class="info">
|
||||
<p>The real power of DataTables can be exploited through the use of the API that it presents. The DataTables API is designed to be simple, consistent and easy to use. The examples in this section show how the API may be used.</p>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.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>
|
||||
<title>DataTables examples - API</title>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<div class="toc">
|
||||
<div class="toc-group"><h3><a href="./index.html
|
||||
">API</a></h3><ul class="toc"><li><a href="./add_row.html
|
||||
">Add rows</a></li><li><a href="./multi_filter.html
|
||||
">Individual column searching (text inputs)</a></li><li><a href="./multi_filter_select.html
|
||||
">Individual column searching (select inputs)</a></li><li><a href="./highlight.html
|
||||
">Highlighting rows and columns</a></li><li><a href="./row_details.html
|
||||
">Child rows (show extra / detailed information)</a></li><li><a href="./select_row.html
|
||||
">Row selection (multiple rows)</a></li><li><a href="./select_single_row.html
|
||||
">Row selection and deletion (single row)</a></li><li><a href="./form.html
|
||||
">Form inputs</a></li><li><a href="./counter_columns.html
|
||||
">Index column</a></li><li><a href="./show_hide.html
|
||||
">Show / hide columns dynamically</a></li><li><a href="./api_in_init.html
|
||||
">Using API in callbacks</a></li><li><a href="./tabs_and_scrolling.html
|
||||
">Scrolling and Bootstrap tabs</a></li><li><a href="./regex.html
|
||||
">Search API (regular expressions)</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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<h1>DataTables example <span>API</span></h1>
|
||||
<div class="info">
|
||||
<p>The real power of DataTables can be exploited through the use of the API that it presents. The DataTables API is designed to be simple, consistent and easy to
|
||||
use. The examples in this section show how the API may be used.</p>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">API</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="./add_row.html">Add rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./multi_filter.html">Individual column searching (text inputs)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./multi_filter_select.html">Individual column searching (select inputs)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./highlight.html">Highlighting rows and columns</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./row_details.html">Child rows (show extra / detailed information)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./select_row.html">Row selection (multiple rows)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./select_single_row.html">Row selection and deletion (single row)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./form.html">Form inputs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./counter_columns.html">Index column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./show_hide.html">Show / hide columns dynamically</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./api_in_init.html">Using API in callbacks</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./regex.html">Search API (regular expressions)</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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,15 +1,15 @@
|
||||
<!doctype html>
|
||||
<!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 - Child rows (show extra / detailed information)</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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">
|
||||
|
||||
<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 - Child rows (show extra / detailed information)</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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">
|
||||
|
||||
td.details-control {
|
||||
background: url('../resources/details_open.png') no-repeat center center;
|
||||
cursor: pointer;
|
||||
@ -18,10 +18,17 @@ tr.shown td.details-control {
|
||||
background: url('../resources/details_close.png') no-repeat center center;
|
||||
}
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script><script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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">
|
||||
|
||||
|
||||
/* Formatting function for row details - modify as you need */
|
||||
function format ( d ) {
|
||||
@ -79,34 +86,52 @@ $(document).ready(function() {
|
||||
} );
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example ">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Child rows (show extra / detailed information)</span></h1>
|
||||
<div class="info">
|
||||
<p>The DataTables API has a number of methods available for attaching child rows to a <em>parent</em> row in the DataTable. This can be used to show additional information about a row, useful for cases where you wish to convey more information about a row than there is space for in the host table.</p>
|
||||
|
||||
<p>The example below makes use of the <a href="//datatables.net/reference/api/row().child"><code class="api" title="DataTables API method">row().child</code></a> methods to firstly check if a row is already displayed, and if so hide it (<a href="//datatables.net/reference/api/row().child.hide()"><code class="api" title="DataTables API method">row().child.hide()</code></a>), otherwise show it (<a href="//datatables.net/reference/api/row().child.show()"><code class="api" title="DataTables API method">row().child.show()</code></a>). The content of the child row is, in this example, defined by the <code>formatDetails()</code> function, but you would replace that with whatever you wanted to show the content required, possibly including, for example, an Ajax call to the server to obtain the extra information to show.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%"><thead><tr><th></th><th>Name</th><th>Position</th><th>Office</th><th>Salary</th></tr></thead><tfoot><tr><th></th><th>Name</th><th>Position</th><th>Office</th><th>Salary</th></tr></tfoot></table>
|
||||
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
|
||||
<code class="multiline language-js">/* Formatting function for row details - modify as you need */
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Child rows (show extra / detailed information)</span></h1>
|
||||
<div class="info">
|
||||
<p>The DataTables API has a number of methods available for attaching child rows to a <em>parent</em> row in the DataTable. This can be used to show additional
|
||||
information about a row, useful for cases where you wish to convey more information about a row than there is space for in the host table.</p>
|
||||
<p>The example below makes use of the <a href="//datatables.net/reference/api/row().child"><code class="api" title="DataTables API method">row().child</code></a>
|
||||
methods to firstly check if a row is already displayed, and if so hide it (<a href="//datatables.net/reference/api/row().child.hide()"><code class="api" title=
|
||||
"DataTables API method">row().child.hide()</code></a>), otherwise show it (<a href="//datatables.net/reference/api/row().child.show()"><code class="api" title=
|
||||
"DataTables API method">row().child.show()</code></a>). The content of the child row is, in this example, defined by the <code>formatDetails()</code> function, but
|
||||
you would replace that with whatever you wanted to show the content required, possibly including, for example, an Ajax call to the server to obtain the extra
|
||||
information to show.</p>
|
||||
</div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">/* Formatting function for row details - modify as you need */
|
||||
function format ( d ) {
|
||||
// `d` is the original data object for the row
|
||||
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
|
||||
@ -160,155 +185,360 @@ $(document).ready(function() {
|
||||
}
|
||||
} );
|
||||
} );</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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li><li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.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">td.details-control {
|
||||
<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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.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">td.details-control {
|
||||
background: url('../resources/details_open.png') no-repeat center center;
|
||||
cursor: pointer;
|
||||
}
|
||||
tr.shown td.details-control {
|
||||
background: url('../resources/details_close.png') no-repeat center center;
|
||||
}</code>
|
||||
</div>
|
||||
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul><li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li></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>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
</ul>
|
||||
</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-attributes.html
|
||||
">HTML5 data-* attributes - cell data</a></li><li><a href="../advanced_init/html5-data-options.html
|
||||
">HTML5 data-* attributes - table options</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="../styling/index.html
|
||||
">Styling</a></h3><ul class="toc"><li><a href="../styling/display.html
|
||||
">Base style</a></li><li><a href="../styling/no-classes.html
|
||||
">Base style - no styling classes</a></li><li><a href="../styling/cell-border.html
|
||||
">Base style - cell borders</a></li><li><a href="../styling/compact.html
|
||||
">Base style - compact</a></li><li><a href="../styling/hover.html
|
||||
">Base style - hover</a></li><li><a href="../styling/order-column.html
|
||||
">Base style - order-column</a></li><li><a href="../styling/row-border.html
|
||||
">Base style - row borders</a></li><li><a href="../styling/stripe.html
|
||||
">Base style - stripe</a></li><li><a href="../styling/bootstrap.html
|
||||
">Bootstrap</a></li><li><a href="../styling/foundation.html
|
||||
">Foundation</a></li><li><a href="../styling/jqueryUI.html
|
||||
">jQuery UI ThemeRoller</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="./index.html
|
||||
">API</a></h3><ul class="toc active"><li><a href="./add_row.html
|
||||
">Add rows</a></li><li><a href="./multi_filter.html
|
||||
">Individual column searching (text inputs)</a></li><li><a href="./multi_filter_select.html
|
||||
">Individual column searching (select inputs)</a></li><li><a href="./highlight.html
|
||||
">Highlighting rows and columns</a></li><li class="active"><a href="./row_details.html
|
||||
">Child rows (show extra / detailed information)</a></li><li><a href="./select_row.html
|
||||
">Row selection (multiple rows)</a></li><li><a href="./select_single_row.html
|
||||
">Row selection and deletion (single row)</a></li><li><a href="./form.html
|
||||
">Form inputs</a></li><li><a href="./counter_columns.html
|
||||
">Index column</a></li><li><a href="./show_hide.html
|
||||
">Show / hide columns dynamically</a></li><li><a href="./api_in_init.html
|
||||
">Using API in callbacks</a></li><li><a href="./tabs_and_scrolling.html
|
||||
">Scrolling and Bootstrap tabs</a></li><li><a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.
|
||||
</p>
|
||||
</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>
|
||||
</body>
|
||||
</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-attributes.html">HTML5 data-* attributes - cell data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/display.html">Base style</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/no-classes.html">Base style - no styling classes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/cell-border.html">Base style - cell borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Base style - compact</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/hover.html">Base style - hover</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/order-column.html">Base style - order-column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/row-border.html">Base style - row borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/stripe.html">Base style - stripe</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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="./index.html">API</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./add_row.html">Add rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./multi_filter.html">Individual column searching (text inputs)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./multi_filter_select.html">Individual column searching (select inputs)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./highlight.html">Highlighting rows and columns</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./row_details.html">Child rows (show extra / detailed information)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./select_row.html">Row selection (multiple rows)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./select_single_row.html">Row selection and deletion (single row)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./form.html">Form inputs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./counter_columns.html">Index column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./show_hide.html">Show / hide columns dynamically</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./api_in_init.html">Using API in callbacks</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,19 +1,31 @@
|
||||
<!doctype html>
|
||||
<!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 - Scrolling and Bootstrap tabs</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"><link rel="stylesheet" type="text/css" href="../../media/css/dataTables.bootstrap.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.11.3.min.js"></script><script type="text/javascript" language="javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script><script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script><script type="text/javascript" language="javascript" src="../../media/js/dataTables.bootstrap.js"></script><script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script><script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
<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 - Scrolling and Bootstrap tabs</title>
|
||||
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/dataTables.bootstrap.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.11.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/dataTables.bootstrap.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../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() {
|
||||
$('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
|
||||
@ -32,75 +44,74 @@ $(document).ready(function() {
|
||||
} );
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example dt-example-bootstrap">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Scrolling and Bootstrap tabs</span></h1>
|
||||
<div class="info">
|
||||
<p>This example shows how DataTables with scrolling can be used together with <a href="http://getbootstrap.com/javascript/#tabs">Bootstrap tabs</a> (or indeed any other method whereby the table is in a hidden, <code>display:none</code>, element when it is initialised).</p>
|
||||
|
||||
<p>The reason this requires special consideration is that when the DataTable is initialised in a hidden element the browser doesn't have any measurements with which to give the DataTable, and this will result in the misalignment of columns when scrolling is enabled.</p>
|
||||
|
||||
<p>This misalignment can be corrected by the <a href="//datatables.net/reference/api/columns.adjust()"><code class="api" title="DataTables API method">columns.adjust()</code></a> method when the table is made visible (i.e. it has dimensions).</p>
|
||||
|
||||
<p>This example shows how the Bootstrap <code>shown.bs.tab</code> event can be used to trigger this method call. The visible tables on the page are selected using the static <a href="//datatables.net/reference/api/%24.fn.dataTable.tables()"><code class="api" title="DataTables API method">$.fn.dataTable.tables()</code></a> method and running the <a href="//datatables.net/reference/api/columns.adjust()"><code class="api" title="DataTables API method">columns.adjust()</code></a> method on them.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
<li class="active"><a href="#tab-table1" data-toggle="tab">Table 1</a></li>
|
||||
<li><a href="#tab-table2" data-toggle="tab">Table 2</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="tab-table1">
|
||||
<table id="myTable1" class="table table-striped table-bordered" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Extn.</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="tab-table2">
|
||||
<table id="myTable2" class="table table-striped table-bordered" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Extn.</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example dt-example-bootstrap">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Scrolling and Bootstrap tabs</span></h1>
|
||||
<div class="info">
|
||||
<p>This example shows how DataTables with scrolling can be used together with <a href="http://getbootstrap.com/javascript/#tabs">Bootstrap tabs</a> (or indeed any
|
||||
other method whereby the table is in a hidden, <code>display:none</code>, element when it is initialised).</p>
|
||||
<p>The reason this requires special consideration is that when the DataTable is initialised in a hidden element the browser doesn't have any measurements with
|
||||
which to give the DataTable, and this will result in the misalignment of columns when scrolling is enabled.</p>
|
||||
<p>This misalignment can be corrected by the <a href="//datatables.net/reference/api/columns.adjust()"><code class="api" title=
|
||||
"DataTables API method">columns.adjust()</code></a> method when the table is made visible (i.e. it has dimensions).</p>
|
||||
<p>This example shows how the Bootstrap <code>shown.bs.tab</code> event can be used to trigger this method call. The visible tables on the page are selected using
|
||||
the static <a href="//datatables.net/reference/api/%24.fn.dataTable.tables()"><code class="api" title="DataTables API method">$.fn.dataTable.tables()</code></a>
|
||||
method and running the <a href="//datatables.net/reference/api/columns.adjust()"><code class="api" title="DataTables API method">columns.adjust()</code></a> method
|
||||
on them.</p>
|
||||
</div>
|
||||
<div>
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
<li class="active">
|
||||
<a href="#tab-table1" data-toggle="tab">Table 1</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#tab-table2" data-toggle="tab">Table 2</a>
|
||||
</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() {
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="tab-table1">
|
||||
<table id="myTable1" class="table table-striped table-bordered" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Extn.</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
<div class="tab-pane" id="tab-table2">
|
||||
<table id="myTable2" class="table table-striped table-bordered" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Extn.</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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() {
|
||||
$('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
|
||||
$.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
|
||||
} );
|
||||
@ -115,149 +126,363 @@ $(document).ready(function() {
|
||||
// Apply a search to the second table for the demo
|
||||
$('#myTable2').DataTable().search( 'New York' ).draw();
|
||||
} );</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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li><li><a href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js</a></li><li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li><li><a href="../../media/js/dataTables.bootstrap.js">../../media/js/dataTables.bootstrap.js</a></li></ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:</p>
|
||||
<code class="multiline language-css"></code>
|
||||
</div>
|
||||
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul><li><a href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css</a></li><li><a href="../../media/css/dataTables.bootstrap.css">../../media/css/dataTables.bootstrap.css</a></li></ul>
|
||||
</div>
|
||||
<div class="ajax">
|
||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.</p>
|
||||
</div>
|
||||
<div class="php">
|
||||
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables documentation</a>.</p>
|
||||
</div>
|
||||
<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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/dataTables.bootstrap.js">../../media/js/dataTables.bootstrap.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</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-attributes.html
|
||||
">HTML5 data-* attributes - cell data</a></li><li><a href="../advanced_init/html5-data-options.html
|
||||
">HTML5 data-* attributes - table options</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="../styling/index.html
|
||||
">Styling</a></h3><ul class="toc"><li><a href="../styling/display.html
|
||||
">Base style</a></li><li><a href="../styling/no-classes.html
|
||||
">Base style - no styling classes</a></li><li><a href="../styling/cell-border.html
|
||||
">Base style - cell borders</a></li><li><a href="../styling/compact.html
|
||||
">Base style - compact</a></li><li><a href="../styling/hover.html
|
||||
">Base style - hover</a></li><li><a href="../styling/order-column.html
|
||||
">Base style - order-column</a></li><li><a href="../styling/row-border.html
|
||||
">Base style - row borders</a></li><li><a href="../styling/stripe.html
|
||||
">Base style - stripe</a></li><li><a href="../styling/bootstrap.html
|
||||
">Bootstrap</a></li><li><a href="../styling/foundation.html
|
||||
">Foundation</a></li><li><a href="../styling/jqueryUI.html
|
||||
">jQuery UI ThemeRoller</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="./index.html
|
||||
">API</a></h3><ul class="toc active"><li><a href="./add_row.html
|
||||
">Add rows</a></li><li><a href="./multi_filter.html
|
||||
">Individual column searching (text inputs)</a></li><li><a href="./multi_filter_select.html
|
||||
">Individual column searching (select inputs)</a></li><li><a href="./highlight.html
|
||||
">Highlighting rows and columns</a></li><li><a href="./row_details.html
|
||||
">Child rows (show extra / detailed information)</a></li><li><a href="./select_row.html
|
||||
">Row selection (multiple rows)</a></li><li><a href="./select_single_row.html
|
||||
">Row selection and deletion (single row)</a></li><li><a href="./form.html
|
||||
">Form inputs</a></li><li><a href="./counter_columns.html
|
||||
">Index column</a></li><li><a href="./show_hide.html
|
||||
">Show / hide columns dynamically</a></li><li><a href="./api_in_init.html
|
||||
">Using API in callbacks</a></li><li class="active"><a href="./tabs_and_scrolling.html
|
||||
">Scrolling and Bootstrap tabs</a></li><li><a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.
|
||||
</p>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/css/dataTables.bootstrap.css">../../media/css/dataTables.bootstrap.css</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ajax">
|
||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
|
||||
loaded.</p>
|
||||
</div>
|
||||
<div class="php">
|
||||
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
|
||||
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||
documentation</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</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-attributes.html">HTML5 data-* attributes - cell data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/display.html">Base style</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/no-classes.html">Base style - no styling classes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/cell-border.html">Base style - cell borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Base style - compact</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/hover.html">Base style - hover</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/order-column.html">Base style - order-column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/row-border.html">Base style - row borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/stripe.html">Base style - stripe</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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="./index.html">API</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./add_row.html">Add rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./multi_filter.html">Individual column searching (text inputs)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./multi_filter_select.html">Individual column searching (select inputs)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./highlight.html">Highlighting rows and columns</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./row_details.html">Child rows (show extra / detailed information)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./select_row.html">Row selection (multiple rows)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./select_single_row.html">Row selection and deletion (single row)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./form.html">Form inputs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./counter_columns.html">Index column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./show_hide.html">Show / hide columns dynamically</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./api_in_init.html">Using API in callbacks</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,64 +1,100 @@
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0" />
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"><link rel="stylesheet" type="text/css" href="../resources/demo.css">
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.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>
|
||||
<title>DataTables examples - Basic initialisation</title>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Basic initialisation</span></h1>
|
||||
<div class="info">
|
||||
<p>DataTables is very simple to use as a jQuery plug-in with a huge range of customisable option. The examples in this section demonstrate basic initialisation of DataTables and how it can be easily customised by passing an object with the options you want.</p>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.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>
|
||||
<title>DataTables examples - Basic initialisation</title>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<div class="toc">
|
||||
<div class="toc-group"><h3><a href="./index.html
|
||||
">Basic initialisation</a></h3><ul class="toc"><li><a href="./zero_configuration.html
|
||||
">Zero configuration</a></li><li><a href="./filter_only.html
|
||||
">Feature enable / disable</a></li><li><a href="./table_sorting.html
|
||||
">Default ordering (sorting)</a></li><li><a href="./multi_col_sort.html
|
||||
">Multi-column ordering</a></li><li><a href="./multiple_tables.html
|
||||
">Multiple tables</a></li><li><a href="./hidden_columns.html
|
||||
">Hidden columns</a></li><li><a href="./complex_header.html
|
||||
">Complex headers (rowspan and colspan)</a></li><li><a href="./dom.html
|
||||
">DOM positioning</a></li><li><a href="./flexible_width.html
|
||||
">Flexible table width</a></li><li><a href="./state_save.html
|
||||
">State saving</a></li><li><a href="./alt_pagination.html
|
||||
">Alternative pagination</a></li><li><a href="./scroll_y.html
|
||||
">Scroll - vertical</a></li><li><a href="./scroll_y_dynamic.html
|
||||
">Scroll - vertical, dynamic height</a></li><li><a href="./scroll_x.html
|
||||
">Scroll - horizontal</a></li><li><a href="./scroll_xy.html
|
||||
">Scroll - horizontal and vertical</a></li><li><a href="./comma-decimal.html
|
||||
">Language - Comma decimal place</a></li><li><a href="./language.html
|
||||
">Language options</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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<h1>DataTables example <span>Basic initialisation</span></h1>
|
||||
<div class="info">
|
||||
<p>DataTables is very simple to use as a jQuery plug-in with a huge range of customisable option. The examples in this section demonstrate basic initialisation of
|
||||
DataTables and how it can be easily customised by passing an object with the options you want.</p>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Basic initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="./zero_configuration.html">Zero configuration</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./filter_only.html">Feature enable / disable</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./table_sorting.html">Default ordering (sorting)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./multi_col_sort.html">Multi-column ordering</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./multiple_tables.html">Multiple tables</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./hidden_columns.html">Hidden columns</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./complex_header.html">Complex headers (rowspan and colspan)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./dom.html">DOM positioning</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./flexible_width.html">Flexible table width</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./state_save.html">State saving</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./alt_pagination.html">Alternative pagination</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./scroll_y.html">Scroll - vertical</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./scroll_x.html">Scroll - horizontal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./scroll_xy.html">Scroll - horizontal and vertical</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./comma-decimal.html">Language - Comma decimal place</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./language.html">Language options</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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,204 +1,602 @@
|
||||
<!doctype html>
|
||||
<!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 - Multiple tables</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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">
|
||||
|
||||
<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 - Multiple tables</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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">
|
||||
|
||||
div.dataTables_wrapper {
|
||||
margin-bottom: 3em;
|
||||
}
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script><script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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() {
|
||||
$('table.display').DataTable();
|
||||
} );
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example ">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Multiple tables</span></h1>
|
||||
<div class="info">
|
||||
<p>Often you might wish to initialise multiple tables with a single statement. This is trivially done by using a jQuery selector which will pick up multiple tables.</p>
|
||||
|
||||
<p>The tables are independent for user control (i.e. user controlled paging on one table does not effect the others), but they do share the initialisation parameters given (for example if you specific the Spanish language file, all tables will be shown in Spanish). Additionally, the API can be used to manipulate both together, or independently.</p>
|
||||
|
||||
<p>The example below shows two tables initialised with a single line of code, through the use of the <code>table.display</code> selector (i.e. select all elements which have the class of <code>table.display</code> (which is suitable in this example, you might wish to use a different selector).</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<table id="" class="display" cellspacing="0" width="100%"><thead><tr><th>Name</th><th>Position</th><th>Office</th><th>Age</th><th>Salary</th></tr></thead><tfoot><tr><th>Name</th><th>Position</th><th>Office</th><th>Age</th><th>Salary</th></tr></tfoot><tbody><tr><td>Tiger Nixon</td><td>System Architect</td><td>Edinburgh</td><td>61</td><td>$320,800</td></tr><tr><td>Cedric Kelly</td><td>Senior Javascript Developer</td><td>Edinburgh</td><td>22</td><td>$433,060</td></tr><tr><td>Sonya Frost</td><td>Software Engineer</td><td>Edinburgh</td><td>23</td><td>$103,600</td></tr><tr><td>Quinn Flynn</td><td>Support Lead</td><td>Edinburgh</td><td>22</td><td>$342,000</td></tr><tr><td>Dai Rios</td><td>Personnel Lead</td><td>Edinburgh</td><td>35</td><td>$217,500</td></tr><tr><td>Gavin Joyce</td><td>Developer</td><td>Edinburgh</td><td>42</td><td>$92,575</td></tr><tr><td>Martena Mccray</td><td>Post-Sales support</td><td>Edinburgh</td><td>46</td><td>$324,050</td></tr><tr><td>Jennifer Acosta</td><td>Junior Javascript Developer</td><td>Edinburgh</td><td>43</td><td>$75,650</td></tr><tr><td>Shad Decker</td><td>Regional Director</td><td>Edinburgh</td><td>51</td><td>$183,000</td></tr></tbody></table><table id="" class="display" cellspacing="0" width="100%"><thead><tr><th>Name</th><th>Position</th><th>Office</th><th>Age</th><th>Salary</th></tr></thead><tfoot><tr><th>Name</th><th>Position</th><th>Office</th><th>Age</th><th>Salary</th></tr></tfoot><tbody><tr><td>Jena Gaines</td><td>Office Manager</td><td>London</td><td>30</td><td>$90,560</td></tr><tr><td>Haley Kennedy</td><td>Senior Marketing Designer</td><td>London</td><td>43</td><td>$313,500</td></tr><tr><td>Tatyana Fitzpatrick</td><td>Regional Director</td><td>London</td><td>19</td><td>$385,750</td></tr><tr><td>Michael Silva</td><td>Marketing Designer</td><td>London</td><td>66</td><td>$198,500</td></tr><tr><td>Bradley Greer</td><td>Software Engineer</td><td>London</td><td>41</td><td>$132,000</td></tr><tr><td>Angelica Ramos</td><td>Chief Executive Officer (CEO)</td><td>London</td><td>47</td><td>$1,200,000</td></tr><tr><td>Suki Burks</td><td>Developer</td><td>London</td><td>53</td><td>$114,500</td></tr><tr><td>Prescott Bartlett</td><td>Technical Author</td><td>London</td><td>27</td><td>$145,000</td></tr><tr><td>Timothy Mooney</td><td>Office Manager</td><td>London</td><td>37</td><td>$136,200</td></tr><tr><td>Bruno Nash</td><td>Software Engineer</td><td>London</td><td>38</td><td>$163,500</td></tr><tr><td>Hermione Butler</td><td>Regional Director</td><td>London</td><td>47</td><td>$356,250</td></tr><tr><td>Lael Greer</td><td>Systems Administrator</td><td>London</td><td>21</td><td>$103,500</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() {
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Multiple tables</span></h1>
|
||||
<div class="info">
|
||||
<p>Often you might wish to initialise multiple tables with a single statement. This is trivially done by using a jQuery selector which will pick up multiple
|
||||
tables.</p>
|
||||
<p>The tables are independent for user control (i.e. user controlled paging on one table does not effect the others), but they do share the initialisation
|
||||
parameters given (for example if you specific the Spanish language file, all tables will be shown in Spanish). Additionally, the API can be used to manipulate both
|
||||
together, or independently.</p>
|
||||
<p>The example below shows two tables initialised with a single line of code, through the use of the <code>table.display</code> selector (i.e. select all elements
|
||||
which have the class of <code>table.display</code> (which is suitable in this example, you might wish to use a different selector).</p>
|
||||
</div>
|
||||
<table id="" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>$320,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>$433,060</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>$103,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>$342,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>$217,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>$92,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>$324,050</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>$75,650</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>$183,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table id="" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Jena Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>$90,560</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>$313,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>$385,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>$198,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>$132,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>$1,200,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>$114,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>$145,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>$136,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>$163,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>$356,250</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>$103,500</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() {
|
||||
$('table.display').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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li><li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li></ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:</p>
|
||||
<code class="multiline language-css">div.dataTables_wrapper {
|
||||
<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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css">div.dataTables_wrapper {
|
||||
margin-bottom: 3em;
|
||||
}</code>
|
||||
</div>
|
||||
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul><li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li></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>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<h2>Other examples</h2>
|
||||
<div class="toc">
|
||||
<div class="toc-group"><h3><a href="./index.html
|
||||
">Basic initialisation</a></h3><ul class="toc active"><li><a href="./zero_configuration.html
|
||||
">Zero configuration</a></li><li><a href="./filter_only.html
|
||||
">Feature enable / disable</a></li><li><a href="./table_sorting.html
|
||||
">Default ordering (sorting)</a></li><li><a href="./multi_col_sort.html
|
||||
">Multi-column ordering</a></li><li class="active"><a href="./multiple_tables.html
|
||||
">Multiple tables</a></li><li><a href="./hidden_columns.html
|
||||
">Hidden columns</a></li><li><a href="./complex_header.html
|
||||
">Complex headers (rowspan and colspan)</a></li><li><a href="./dom.html
|
||||
">DOM positioning</a></li><li><a href="./flexible_width.html
|
||||
">Flexible table width</a></li><li><a href="./state_save.html
|
||||
">State saving</a></li><li><a href="./alt_pagination.html
|
||||
">Alternative pagination</a></li><li><a href="./scroll_y.html
|
||||
">Scroll - vertical</a></li><li><a href="./scroll_y_dynamic.html
|
||||
">Scroll - vertical, dynamic height</a></li><li><a href="./scroll_x.html
|
||||
">Scroll - horizontal</a></li><li><a href="./scroll_xy.html
|
||||
">Scroll - horizontal and vertical</a></li><li><a href="./comma-decimal.html
|
||||
">Language - Comma decimal place</a></li><li><a href="./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-attributes.html
|
||||
">HTML5 data-* attributes - cell data</a></li><li><a href="../advanced_init/html5-data-options.html
|
||||
">HTML5 data-* attributes - table options</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="../styling/index.html
|
||||
">Styling</a></h3><ul class="toc"><li><a href="../styling/display.html
|
||||
">Base style</a></li><li><a href="../styling/no-classes.html
|
||||
">Base style - no styling classes</a></li><li><a href="../styling/cell-border.html
|
||||
">Base style - cell borders</a></li><li><a href="../styling/compact.html
|
||||
">Base style - compact</a></li><li><a href="../styling/hover.html
|
||||
">Base style - hover</a></li><li><a href="../styling/order-column.html
|
||||
">Base style - order-column</a></li><li><a href="../styling/row-border.html
|
||||
">Base style - row borders</a></li><li><a href="../styling/stripe.html
|
||||
">Base style - stripe</a></li><li><a href="../styling/bootstrap.html
|
||||
">Bootstrap</a></li><li><a href="../styling/foundation.html
|
||||
">Foundation</a></li><li><a href="../styling/jqueryUI.html
|
||||
">jQuery UI ThemeRoller</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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.
|
||||
</p>
|
||||
</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>
|
||||
</body>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<h2>Other examples</h2>
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Basic initialisation</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./zero_configuration.html">Zero configuration</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./filter_only.html">Feature enable / disable</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./table_sorting.html">Default ordering (sorting)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./multi_col_sort.html">Multi-column ordering</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./multiple_tables.html">Multiple tables</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./hidden_columns.html">Hidden columns</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./complex_header.html">Complex headers (rowspan and colspan)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./dom.html">DOM positioning</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./flexible_width.html">Flexible table width</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./state_save.html">State saving</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./alt_pagination.html">Alternative pagination</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./scroll_y.html">Scroll - vertical</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./scroll_x.html">Scroll - horizontal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./scroll_xy.html">Scroll - horizontal and vertical</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./comma-decimal.html">Language - Comma decimal place</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./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-attributes.html">HTML5 data-* attributes - cell data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/display.html">Base style</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/no-classes.html">Base style - no styling classes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/cell-border.html">Base style - cell borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Base style - compact</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/hover.html">Base style - hover</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/order-column.html">Base style - order-column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/row-border.html">Base style - row borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/stripe.html">Base style - stripe</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,19 +1,26 @@
|
||||
<!doctype html>
|
||||
<!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 - Ajax sourced data</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js"></script><script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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">
|
||||
|
||||
<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 - Ajax sourced data</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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( {
|
||||
@ -22,183 +29,406 @@ $(document).ready(function() {
|
||||
} );
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example ">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Ajax sourced data</span></h1>
|
||||
<div class="info">
|
||||
<p>DataTables has the ability to read data from virtually any JSON data source that can be obtained by Ajax. This can be done, in its most simple form, by setting the <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option to the address of the JSON data source.</p>
|
||||
|
||||
<p>The <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option also allows for more advanced configuration such as altering how the Ajax request is made. See the <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> documentation and the <a href="../ajax">other Ajax examples</a> for further information.</p>
|
||||
|
||||
<p>The example below shows DataTables loading data for a table from arrays as the data source (object parameters can also be used through the <a href="//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option ).</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%"><thead><tr><th>Name</th><th>Position</th><th>Office</th><th>Extn.</th><th>Start date</th><th>Salary</th></tr></thead><tfoot><tr><th>Name</th><th>Position</th><th>Office</th><th>Extn.</th><th>Start date</th><th>Salary</th></tr></tfoot></table>
|
||||
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
|
||||
<code class="multiline language-js">$(document).ready(function() {
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Ajax sourced data</span></h1>
|
||||
<div class="info">
|
||||
<p>DataTables has the ability to read data from virtually any JSON data source that can be obtained by Ajax. This can be done, in its most simple form, by setting
|
||||
the <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option to the address of the
|
||||
JSON data source.</p>
|
||||
<p>The <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option also allows for more
|
||||
advanced configuration such as altering how the Ajax request is made. See the <a href="//datatables.net/reference/option/ajax"><code class="option" title=
|
||||
"DataTables initialisation option">ajax</code></a> documentation and the <a href="../ajax">other Ajax examples</a> for further information.</p>
|
||||
<p>The example below shows DataTables loading data for a table from arrays as the data source (object parameters can also be used through the <a href=
|
||||
"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option ).</p>
|
||||
</div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Extn.</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Extn.</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
"ajax": '../ajax/data/arrays.txt'
|
||||
} );
|
||||
} );</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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li><li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li></ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:</p>
|
||||
<code class="multiline language-css"></code>
|
||||
</div>
|
||||
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul><li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li></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>
|
||||
<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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</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-attributes.html
|
||||
">HTML5 data-* attributes - cell data</a></li><li><a href="../advanced_init/html5-data-options.html
|
||||
">HTML5 data-* attributes - table options</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="../styling/index.html
|
||||
">Styling</a></h3><ul class="toc"><li><a href="../styling/display.html
|
||||
">Base style</a></li><li><a href="../styling/no-classes.html
|
||||
">Base style - no styling classes</a></li><li><a href="../styling/cell-border.html
|
||||
">Base style - cell borders</a></li><li><a href="../styling/compact.html
|
||||
">Base style - compact</a></li><li><a href="../styling/hover.html
|
||||
">Base style - hover</a></li><li><a href="../styling/order-column.html
|
||||
">Base style - order-column</a></li><li><a href="../styling/row-border.html
|
||||
">Base style - row borders</a></li><li><a href="../styling/stripe.html
|
||||
">Base style - stripe</a></li><li><a href="../styling/bootstrap.html
|
||||
">Bootstrap</a></li><li><a href="../styling/foundation.html
|
||||
">Foundation</a></li><li><a href="../styling/jqueryUI.html
|
||||
">jQuery UI ThemeRoller</a></li></ul></div><div class="toc-group"><h3><a href="./index.html
|
||||
">Data sources</a></h3><ul class="toc active"><li><a href="./dom.html
|
||||
">HTML (DOM) sourced data</a></li><li class="active"><a href="./ajax.html
|
||||
">Ajax sourced data</a></li><li><a href="./js_array.html
|
||||
">Javascript sourced data</a></li><li><a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.
|
||||
</p>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
</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>
|
||||
</body>
|
||||
</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-attributes.html">HTML5 data-* attributes - cell data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/display.html">Base style</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/no-classes.html">Base style - no styling classes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/cell-border.html">Base style - cell borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Base style - compact</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/hover.html">Base style - hover</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/order-column.html">Base style - order-column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/row-border.html">Base style - row borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/stripe.html">Base style - stripe</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Data sources</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./dom.html">HTML (DOM) sourced data</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./ajax.html">Ajax sourced data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./js_array.html">Javascript sourced data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
@ -1,60 +1,68 @@
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0" />
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"><link rel="stylesheet" type="text/css" href="../resources/demo.css">
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.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>
|
||||
<title>DataTables examples - Data sources</title>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Data sources</span></h1>
|
||||
<div class="info">
|
||||
<p>DataTables can obtain data from four different fundamental sources:</p>
|
||||
|
||||
<ul class="markdown">
|
||||
<li>HTML document (DOM)</li>
|
||||
<li>Javascript (array / objects)</li>
|
||||
<li>Ajax sourced data with client-side processing</li>
|
||||
<li>Ajax sourced data with server-side processing</li>
|
||||
</ul>
|
||||
|
||||
<p>Which of these options is used to populate the table with data depends upon how the table is initialised. The examples in this section show these four different data source types.</p>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.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>
|
||||
<title>DataTables examples - Data sources</title>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<div class="toc">
|
||||
<div class="toc-group"><h3><a href="./index.html
|
||||
">Data sources</a></h3><ul class="toc"><li><a href="./dom.html
|
||||
">HTML (DOM) sourced data</a></li><li><a href="./ajax.html
|
||||
">Ajax sourced data</a></li><li><a href="./js_array.html
|
||||
">Javascript sourced data</a></li><li><a href="./server_side.html
|
||||
">Server-side processing</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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<h1>DataTables example <span>Data sources</span></h1>
|
||||
<div class="info">
|
||||
<p>DataTables can obtain data from four different fundamental sources:</p>
|
||||
<ul class="markdown">
|
||||
<li>HTML document (DOM)</li>
|
||||
<li>Javascript (array / objects)</li>
|
||||
<li>Ajax sourced data with client-side processing</li>
|
||||
<li>Ajax sourced data with server-side processing</li>
|
||||
</ul>
|
||||
<p>Which of these options is used to populate the table with data depends upon how the table is initialised. The examples in this section show these four different
|
||||
data source types.</p>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Data sources</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="./dom.html">HTML (DOM) sourced data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./ajax.html">Ajax sourced data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./js_array.html">Javascript sourced data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./server_side.html">Server-side processing</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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,19 +1,26 @@
|
||||
<!doctype html>
|
||||
<!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 - Javascript sourced data</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js"></script><script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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">
|
||||
|
||||
<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 - Javascript sourced data</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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">
|
||||
|
||||
|
||||
var dataSet = [
|
||||
[ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
|
||||
@ -69,34 +76,33 @@ $(document).ready(function() {
|
||||
} );
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example ">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Javascript sourced data</span></h1>
|
||||
<div class="info">
|
||||
<p>At times you will wish to be able to create a table from dynamic information passed directly to DataTables, rather than having it read from the document. This is achieved using the <a href="//datatables.net/reference/option/data"><code class="option" title="DataTables initialisation option">data</code></a> option in the initialisation object, passing in an array of data to be used (like all other DataTables handled data, this can be arrays or objects using the <a href="//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option).</p>
|
||||
|
||||
<p>A <code class="tag" title="HTML tag">table</code> must be available on the page for DataTables to use. This examples shows an empty <code class="tag" title="HTML tag">table</code> element being initialising as a DataTable with a set of data from a Javascript array. The columns in the table are dynamically created based on the <a href="//datatables.net/reference/option/columns.title"><code class="option" title="DataTables initialisation option">columns.title</code></a> configuration option.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<table id="example" class="display" width="100%"> </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">var dataSet = [
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Javascript sourced data</span></h1>
|
||||
<div class="info">
|
||||
<p>At times you will wish to be able to create a table from dynamic information passed directly to DataTables, rather than having it read from the document. This
|
||||
is achieved using the <a href="//datatables.net/reference/option/data"><code class="option" title="DataTables initialisation option">data</code></a> option in the
|
||||
initialisation object, passing in an array of data to be used (like all other DataTables handled data, this can be arrays or objects using the <a href=
|
||||
"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option).</p>
|
||||
<p>A <code class="tag" title="HTML tag">table</code> must be available on the page for DataTables to use. This examples shows an empty <code class="tag" title=
|
||||
"HTML tag">table</code> element being initialising as a DataTable with a set of data from a Javascript array. The columns in the table are dynamically created
|
||||
based on the <a href="//datatables.net/reference/option/columns.title"><code class="option" title="DataTables initialisation option">columns.title</code></a>
|
||||
configuration option.</p>
|
||||
</div>
|
||||
<table id="example" class="display" width="100%"></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">var dataSet = [
|
||||
[ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
|
||||
[ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ],
|
||||
[ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ],
|
||||
@ -148,149 +154,354 @@ $(document).ready(function() {
|
||||
]
|
||||
} );
|
||||
} );</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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li><li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li></ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:</p>
|
||||
<code class="multiline language-css"></code>
|
||||
</div>
|
||||
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul><li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li></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>
|
||||
<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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</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-attributes.html
|
||||
">HTML5 data-* attributes - cell data</a></li><li><a href="../advanced_init/html5-data-options.html
|
||||
">HTML5 data-* attributes - table options</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="../styling/index.html
|
||||
">Styling</a></h3><ul class="toc"><li><a href="../styling/display.html
|
||||
">Base style</a></li><li><a href="../styling/no-classes.html
|
||||
">Base style - no styling classes</a></li><li><a href="../styling/cell-border.html
|
||||
">Base style - cell borders</a></li><li><a href="../styling/compact.html
|
||||
">Base style - compact</a></li><li><a href="../styling/hover.html
|
||||
">Base style - hover</a></li><li><a href="../styling/order-column.html
|
||||
">Base style - order-column</a></li><li><a href="../styling/row-border.html
|
||||
">Base style - row borders</a></li><li><a href="../styling/stripe.html
|
||||
">Base style - stripe</a></li><li><a href="../styling/bootstrap.html
|
||||
">Bootstrap</a></li><li><a href="../styling/foundation.html
|
||||
">Foundation</a></li><li><a href="../styling/jqueryUI.html
|
||||
">jQuery UI ThemeRoller</a></li></ul></div><div class="toc-group"><h3><a href="./index.html
|
||||
">Data sources</a></h3><ul class="toc active"><li><a href="./dom.html
|
||||
">HTML (DOM) sourced data</a></li><li><a href="./ajax.html
|
||||
">Ajax sourced data</a></li><li class="active"><a href="./js_array.html
|
||||
">Javascript sourced data</a></li><li><a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.
|
||||
</p>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
</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>
|
||||
</body>
|
||||
</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-attributes.html">HTML5 data-* attributes - cell data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/display.html">Base style</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/no-classes.html">Base style - no styling classes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/cell-border.html">Base style - cell borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Base style - compact</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/hover.html">Base style - hover</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/order-column.html">Base style - order-column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/row-border.html">Base style - row borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/stripe.html">Base style - stripe</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Data sources</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./dom.html">HTML (DOM) sourced data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./ajax.html">Ajax sourced data</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./js_array.html">Javascript sourced data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,19 +1,26 @@
|
||||
<!doctype html>
|
||||
<!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 - Server-side processing</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js"></script><script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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">
|
||||
|
||||
<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 - Server-side processing</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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( {
|
||||
"processing": true,
|
||||
@ -22,185 +29,409 @@ $(document).ready(function() {
|
||||
} );
|
||||
} );
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example ">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Server-side processing</span></h1>
|
||||
<div class="info">
|
||||
<p>There are many ways to get your data into DataTables, and if you are working with seriously large databases, you might want to consider using the server-side options that DataTables provides. With server-side processing enabled, all paging, searching, ordering actions that DataTables performs are handed off to a server where an SQL engine (or similar) can perform these actions on the large data set (after all, that's what the database engine is designed for!). As such, each draw of the table will result in a new Ajax request being made to get the required data.</p>
|
||||
|
||||
<p>Server-side processing is enabled by setting the <a href="//datatables.net/reference/option/serverSide"><code class="option" title="DataTables initialisation option">serverSide</code></a> option to <code>true</code> and providing an Ajax data source through the <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option.</p>
|
||||
|
||||
<p>This example shows a very simple table, matching the other examples, but in this instance using server-side processing. For further and more complex examples of using server-side processing, please refer to the <a href="../server_side">server-side processing</a> examples.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%"><thead><tr><th>First name</th><th>Last name</th><th>Position</th><th>Office</th><th>Start date</th><th>Salary</th></tr></thead><tfoot><tr><th>First name</th><th>Last name</th><th>Position</th><th>Office</th><th>Start date</th><th>Salary</th></tr></tfoot></table>
|
||||
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
|
||||
<code class="multiline language-js">$(document).ready(function() {
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Server-side processing</span></h1>
|
||||
<div class="info">
|
||||
<p>There are many ways to get your data into DataTables, and if you are working with seriously large databases, you might want to consider using the server-side
|
||||
options that DataTables provides. With server-side processing enabled, all paging, searching, ordering actions that DataTables performs are handed off to a server
|
||||
where an SQL engine (or similar) can perform these actions on the large data set (after all, that's what the database engine is designed for!). As such, each draw
|
||||
of the table will result in a new Ajax request being made to get the required data.</p>
|
||||
<p>Server-side processing is enabled by setting the <a href="//datatables.net/reference/option/serverSide"><code class="option" title=
|
||||
"DataTables initialisation option">serverSide</code></a> option to <code>true</code> and providing an Ajax data source through the <a href=
|
||||
"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option.</p>
|
||||
<p>This example shows a very simple table, matching the other examples, but in this instance using server-side processing. For further and more complex examples of
|
||||
using server-side processing, please refer to the <a href="../server_side">server-side processing</a> examples.</p>
|
||||
</div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
"processing": true,
|
||||
"serverSide": true,
|
||||
"ajax": "../server_side/scripts/server_processing.php"
|
||||
} );
|
||||
} );</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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li><li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li></ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:</p>
|
||||
<code class="multiline language-css"></code>
|
||||
</div>
|
||||
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul><li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li></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>
|
||||
<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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</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-attributes.html
|
||||
">HTML5 data-* attributes - cell data</a></li><li><a href="../advanced_init/html5-data-options.html
|
||||
">HTML5 data-* attributes - table options</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="../styling/index.html
|
||||
">Styling</a></h3><ul class="toc"><li><a href="../styling/display.html
|
||||
">Base style</a></li><li><a href="../styling/no-classes.html
|
||||
">Base style - no styling classes</a></li><li><a href="../styling/cell-border.html
|
||||
">Base style - cell borders</a></li><li><a href="../styling/compact.html
|
||||
">Base style - compact</a></li><li><a href="../styling/hover.html
|
||||
">Base style - hover</a></li><li><a href="../styling/order-column.html
|
||||
">Base style - order-column</a></li><li><a href="../styling/row-border.html
|
||||
">Base style - row borders</a></li><li><a href="../styling/stripe.html
|
||||
">Base style - stripe</a></li><li><a href="../styling/bootstrap.html
|
||||
">Bootstrap</a></li><li><a href="../styling/foundation.html
|
||||
">Foundation</a></li><li><a href="../styling/jqueryUI.html
|
||||
">jQuery UI ThemeRoller</a></li></ul></div><div class="toc-group"><h3><a href="./index.html
|
||||
">Data sources</a></h3><ul class="toc active"><li><a href="./dom.html
|
||||
">HTML (DOM) sourced data</a></li><li><a href="./ajax.html
|
||||
">Ajax sourced data</a></li><li><a href="./js_array.html
|
||||
">Javascript sourced data</a></li><li class="active"><a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.
|
||||
</p>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
</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>
|
||||
</body>
|
||||
</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-attributes.html">HTML5 data-* attributes - cell data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/display.html">Base style</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/no-classes.html">Base style - no styling classes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/cell-border.html">Base style - cell borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Base style - compact</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/hover.html">Base style - hover</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/order-column.html">Base style - order-column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/row-border.html">Base style - row borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/stripe.html">Base style - stripe</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Data sources</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./dom.html">HTML (DOM) sourced data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./ajax.html">Ajax sourced data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./js_array.html">Javascript sourced data</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,139 +1,340 @@
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0" />
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="./resources/syntax/shCore.css"><link rel="stylesheet" type="text/css" href="./resources/demo.css">
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.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>
|
||||
<title>DataTables examples - Examples index</title>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Examples index</span></h1>
|
||||
<div class="info">
|
||||
<p>One of the best ways to learn how to do anything new (including software APIs!) is to get your hands dirty as quickly as possible. These examples will show you how to perform tasks ranging from something as simple as applying DataTables to an HTML table, right the way through to doing server-side processing with pipelining and custom plug-in functions.</p>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<link rel="stylesheet" type="text/css" href="./resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="./resources/demo.css">
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.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>
|
||||
<title>DataTables examples - Examples index</title>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<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-attributes.html
|
||||
">HTML5 data-* attributes - cell data</a></li><li><a href="./advanced_init/html5-data-options.html
|
||||
">HTML5 data-* attributes - table options</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="./styling/index.html
|
||||
">Styling</a></h3><ul class="toc"><li><a href="./styling/display.html
|
||||
">Base style</a></li><li><a href="./styling/no-classes.html
|
||||
">Base style - no styling classes</a></li><li><a href="./styling/cell-border.html
|
||||
">Base style - cell borders</a></li><li><a href="./styling/compact.html
|
||||
">Base style - compact</a></li><li><a href="./styling/hover.html
|
||||
">Base style - hover</a></li><li><a href="./styling/order-column.html
|
||||
">Base style - order-column</a></li><li><a href="./styling/row-border.html
|
||||
">Base style - row borders</a></li><li><a href="./styling/stripe.html
|
||||
">Base style - stripe</a></li><li><a href="./styling/bootstrap.html
|
||||
">Bootstrap</a></li><li><a href="./styling/foundation.html
|
||||
">Foundation</a></li><li><a href="./styling/jqueryUI.html
|
||||
">jQuery UI ThemeRoller</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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<h1>DataTables example <span>Examples index</span></h1>
|
||||
<div class="info">
|
||||
<p>One of the best ways to learn how to do anything new (including software APIs!) is to get your hands dirty as quickly as possible. These examples will show you
|
||||
how to perform tasks ranging from something as simple as applying DataTables to an HTML table, right the way through to doing server-side processing with
|
||||
pipelining and custom plug-in functions.</p>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<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-attributes.html">HTML5 data-* attributes - cell data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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="./styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="./styling/display.html">Base style</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./styling/no-classes.html">Base style - no styling classes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./styling/cell-border.html">Base style - cell borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./styling/compact.html">Base style - compact</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./styling/hover.html">Base style - hover</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./styling/order-column.html">Base style - order-column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./styling/row-border.html">Base style - row borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./styling/stripe.html">Base style - stripe</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./styling/bootstrap.html">Bootstrap</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./styling/foundation.html">Foundation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./styling/jqueryUI.html">jQuery UI ThemeRoller</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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,54 +1,66 @@
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0" />
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"><link rel="stylesheet" type="text/css" href="../resources/demo.css">
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.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>
|
||||
<title>DataTables examples - Plug-ins</title>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Plug-ins</span></h1>
|
||||
<div class="info">
|
||||
<p>While DataTables has a wide range of options and data type support built in, it can never cater for every type of data out of the box. For this reason, DataTables exposes an extension API which allows you, the developers using DataTables, to add support for your own data types, searching, ordering and feature plug-ins.</p>
|
||||
|
||||
<p>The examples in this section show how plug-ins can be used and developed for DataTables.</p>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.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>
|
||||
<title>DataTables examples - Plug-ins</title>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<div class="toc">
|
||||
<div class="toc-group"><h3><a href="./index.html
|
||||
">Plug-ins</a></h3><ul class="toc"><li><a href="./api.html
|
||||
">API plug-in methods</a></li><li><a href="./sorting_auto.html
|
||||
">Ordering plug-ins (with type detection)</a></li><li><a href="./sorting_manual.html
|
||||
">Ordering plug-ins (no type detection)</a></li><li><a href="./range_filtering.html
|
||||
">Custom filtering - range search</a></li><li><a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<h1>DataTables example <span>Plug-ins</span></h1>
|
||||
<div class="info">
|
||||
<p>While DataTables has a wide range of options and data type support built in, it can never cater for every type of data out of the box. For this reason,
|
||||
DataTables exposes an extension API which allows you, the developers using DataTables, to add support for your own data types, searching, ordering and feature
|
||||
plug-ins.</p>
|
||||
<p>The examples in this section show how plug-ins can be used and developed for DataTables.</p>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Plug-ins</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="./api.html">API plug-in methods</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./sorting_auto.html">Ordering plug-ins (with type detection)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./sorting_manual.html">Ordering plug-ins (no type detection)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./range_filtering.html">Custom filtering - range search</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,19 +1,26 @@
|
||||
<!doctype html>
|
||||
<!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 - Custom HTTP variables</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js"></script><script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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">
|
||||
|
||||
<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 - Custom HTTP variables</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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( {
|
||||
"processing": true,
|
||||
@ -29,39 +36,56 @@ $(document).ready(function() {
|
||||
} );
|
||||
} );
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example ">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Custom HTTP variables</span></h1>
|
||||
<div class="info">
|
||||
<p>It can often be useful to send extra information to the server when utilising DataTables' server-side processing option. This is done by using the <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option's <code>data</code> parameter which can be used in one of two different ways:</p>
|
||||
|
||||
<ul class="markdown">
|
||||
<li><code>object</code> - An object data to send to the server. This is useful for adding static data to the request.</li>
|
||||
<li><code>function</code> - A function which will manipulate the data object to send to the server, adding values as required. Using the <code>data</code> parameter as a function allows the additional data to evaluated and added to the request at the time the request is made.</li>
|
||||
</ul>
|
||||
|
||||
<p>The example below shows server-side processing being used with an extra parameter being sent to the server by using the <code>ajax.data</code> option as a function.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%"><thead><tr><th>First name</th><th>Last name</th><th>Position</th><th>Office</th><th>Start date</th><th>Salary</th></tr></thead><tfoot><tr><th>First name</th><th>Last name</th><th>Position</th><th>Office</th><th>Start date</th><th>Salary</th></tr></tfoot></table>
|
||||
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Custom HTTP variables</span></h1>
|
||||
<div class="info">
|
||||
<p>It can often be useful to send extra information to the server when utilising DataTables' server-side processing option. This is done by using the <a href=
|
||||
"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option's <code>data</code> parameter which
|
||||
can be used in one of two different ways:</p>
|
||||
<ul class="markdown">
|
||||
<li><code>object</code> - An object data to send to the server. This is useful for adding static data to the request.</li>
|
||||
<li><code>function</code> - A function which will manipulate the data object to send to the server, adding values as required. Using the <code>data</code>
|
||||
parameter as a function allows the additional data to evaluated and added to the request at the time the request is made.</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() {
|
||||
<p>The example below shows server-side processing being used with an extra parameter being sent to the server by using the <code>ajax.data</code> option as a
|
||||
function.</p>
|
||||
</div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
"processing": true,
|
||||
"serverSide": true,
|
||||
@ -75,149 +99,354 @@ $(document).ready(function() {
|
||||
}
|
||||
} );
|
||||
} );</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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li><li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li></ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:</p>
|
||||
<code class="multiline language-css"></code>
|
||||
</div>
|
||||
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul><li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li></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>
|
||||
<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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</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-attributes.html
|
||||
">HTML5 data-* attributes - cell data</a></li><li><a href="../advanced_init/html5-data-options.html
|
||||
">HTML5 data-* attributes - table options</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="../styling/index.html
|
||||
">Styling</a></h3><ul class="toc"><li><a href="../styling/display.html
|
||||
">Base style</a></li><li><a href="../styling/no-classes.html
|
||||
">Base style - no styling classes</a></li><li><a href="../styling/cell-border.html
|
||||
">Base style - cell borders</a></li><li><a href="../styling/compact.html
|
||||
">Base style - compact</a></li><li><a href="../styling/hover.html
|
||||
">Base style - hover</a></li><li><a href="../styling/order-column.html
|
||||
">Base style - order-column</a></li><li><a href="../styling/row-border.html
|
||||
">Base style - row borders</a></li><li><a href="../styling/stripe.html
|
||||
">Base style - stripe</a></li><li><a href="../styling/bootstrap.html
|
||||
">Bootstrap</a></li><li><a href="../styling/foundation.html
|
||||
">Foundation</a></li><li><a href="../styling/jqueryUI.html
|
||||
">jQuery UI ThemeRoller</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="./index.html
|
||||
">Server-side</a></h3><ul class="toc active"><li><a href="./simple.html
|
||||
">Server-side processing</a></li><li class="active"><a href="./custom_vars.html
|
||||
">Custom HTTP variables</a></li><li><a href="./post.html
|
||||
">POST data</a></li><li><a href="./ids.html
|
||||
">Automatic addition of row ID attributes</a></li><li><a href="./object_data.html
|
||||
">Object data source</a></li><li><a href="./row_details.html
|
||||
">Row details</a></li><li><a href="./select_rows.html
|
||||
">Row selection</a></li><li><a href="./jsonp.html
|
||||
">JSONP data source for remote domains</a></li><li><a href="./defer_loading.html
|
||||
">Deferred loading of data</a></li><li><a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.
|
||||
</p>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
</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>
|
||||
</body>
|
||||
</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-attributes.html">HTML5 data-* attributes - cell data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/display.html">Base style</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/no-classes.html">Base style - no styling classes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/cell-border.html">Base style - cell borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Base style - compact</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/hover.html">Base style - hover</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/order-column.html">Base style - order-column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/row-border.html">Base style - row borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/stripe.html">Base style - stripe</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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="./index.html">Server-side</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./simple.html">Server-side processing</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./custom_vars.html">Custom HTTP variables</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./post.html">POST data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./ids.html">Automatic addition of row ID attributes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./object_data.html">Object data source</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./row_details.html">Row details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./select_rows.html">Row selection</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./jsonp.html">JSONP data source for remote domains</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./defer_loading.html">Deferred loading of data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,19 +1,26 @@
|
||||
<!doctype html>
|
||||
<!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 - Deferred loading of data</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js"></script><script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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">
|
||||
|
||||
<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 - Deferred loading of data</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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( {
|
||||
"processing": true,
|
||||
@ -23,115 +30,136 @@ $(document).ready(function() {
|
||||
} );
|
||||
} );
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example ">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Deferred loading of data</span></h1>
|
||||
<div class="info">
|
||||
<p>When using DataTables with server-side processing, the default behaviour is to have DataTables automatically make an Ajax call and load the data, removing anything which might have already been in the table. However, this behaviour might not always be desirable when the first page of the table has already been preloaded in the HTML (which you might do to ensure accessibility or for performance reasons).</p>
|
||||
|
||||
<p>This automatic Ajax call to get the first page of data can be overridden by using the <a href="//datatables.net/reference/option/deferLoading"><code class="option" title="DataTables initialisation option">deferLoading</code></a> initialisation property. It serves two purposes, firstly to indicate that deferred loading is required, but also to tell DataTables how many records there are in the full table, in this case 57 (this allows the information element and pagination to be displayed correctly).</p>
|
||||
|
||||
<p>In the example below, the HTML page already has the first 10 rows of data available it in, so we use <a href="//datatables.net/reference/option/deferLoading"><code class="option" title="DataTables initialisation option">deferLoading</code></a> to tell DataTables that this data is available and that it should wait for under interaction (ordering, paging etc) before making an Ajax call.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%"><thead><tr><th>First name</th><th>Last name</th><th>Position</th><th>Office</th><th>Start date</th><th>Salary</th></tr></thead><tfoot><tr><th>First name</th><th>Last name</th><th>Position</th><th>Office</th><th>Start date</th><th>Salary</th></tr></tfoot><tr class="odd">
|
||||
<td>Airi</td>
|
||||
<td>Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>28th Nov 08</td>
|
||||
<td>$162,700</td>
|
||||
</tr>
|
||||
<tr class="even">
|
||||
<td>Angelica</td>
|
||||
<td>Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>9th Oct 09</td>
|
||||
<td>$1,200,000</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<td>Ashton</td>
|
||||
<td>Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>12th Jan 09</td>
|
||||
<td>$86,000</td>
|
||||
</tr>
|
||||
<tr class="even">
|
||||
<td>Bradley</td>
|
||||
<td>Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>13th Oct 12</td>
|
||||
<td>$132,000</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<td>Brenden</td>
|
||||
<td>Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>7th Jun 11</td>
|
||||
<td>$206,850</td>
|
||||
</tr>
|
||||
<tr class="even">
|
||||
<td>Brielle</td>
|
||||
<td>Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>2nd Dec 12</td>
|
||||
<td>$372,000</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<td>Bruno</td>
|
||||
<td>Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>3rd May 11</td>
|
||||
<td>$163,500</td>
|
||||
</tr>
|
||||
<tr class="even">
|
||||
<td>Caesar</td>
|
||||
<td>Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>12th Dec 11</td>
|
||||
<td>$106,450</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<td>Cara</td>
|
||||
<td>Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>6th Dec 11</td>
|
||||
<td>$145,600</td>
|
||||
</tr>
|
||||
<tr class="even">
|
||||
<td>Cedric</td>
|
||||
<td>Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>29th Mar 12</td>
|
||||
<td>$433,060</td>
|
||||
</tr></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() {
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Deferred loading of data</span></h1>
|
||||
<div class="info">
|
||||
<p>When using DataTables with server-side processing, the default behaviour is to have DataTables automatically make an Ajax call and load the data, removing
|
||||
anything which might have already been in the table. However, this behaviour might not always be desirable when the first page of the table has already been
|
||||
preloaded in the HTML (which you might do to ensure accessibility or for performance reasons).</p>
|
||||
<p>This automatic Ajax call to get the first page of data can be overridden by using the <a href="//datatables.net/reference/option/deferLoading"><code class=
|
||||
"option" title="DataTables initialisation option">deferLoading</code></a> initialisation property. It serves two purposes, firstly to indicate that deferred
|
||||
loading is required, but also to tell DataTables how many records there are in the full table, in this case 57 (this allows the information element and pagination
|
||||
to be displayed correctly).</p>
|
||||
<p>In the example below, the HTML page already has the first 10 rows of data available it in, so we use <a href=
|
||||
"//datatables.net/reference/option/deferLoading"><code class="option" title="DataTables initialisation option">deferLoading</code></a> to tell DataTables that this
|
||||
data is available and that it should wait for under interaction (ordering, paging etc) before making an Ajax call.</p>
|
||||
</div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tr class="odd">
|
||||
<td>Airi</td>
|
||||
<td>Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>28th Nov 08</td>
|
||||
<td>$162,700</td>
|
||||
</tr>
|
||||
<tr class="even">
|
||||
<td>Angelica</td>
|
||||
<td>Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>9th Oct 09</td>
|
||||
<td>$1,200,000</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<td>Ashton</td>
|
||||
<td>Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>12th Jan 09</td>
|
||||
<td>$86,000</td>
|
||||
</tr>
|
||||
<tr class="even">
|
||||
<td>Bradley</td>
|
||||
<td>Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>13th Oct 12</td>
|
||||
<td>$132,000</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<td>Brenden</td>
|
||||
<td>Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>7th Jun 11</td>
|
||||
<td>$206,850</td>
|
||||
</tr>
|
||||
<tr class="even">
|
||||
<td>Brielle</td>
|
||||
<td>Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>2nd Dec 12</td>
|
||||
<td>$372,000</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<td>Bruno</td>
|
||||
<td>Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>3rd May 11</td>
|
||||
<td>$163,500</td>
|
||||
</tr>
|
||||
<tr class="even">
|
||||
<td>Caesar</td>
|
||||
<td>Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>12th Dec 11</td>
|
||||
<td>$106,450</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<td>Cara</td>
|
||||
<td>Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>6th Dec 11</td>
|
||||
<td>$145,600</td>
|
||||
</tr>
|
||||
<tr class="even">
|
||||
<td>Cedric</td>
|
||||
<td>Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>29th Mar 12</td>
|
||||
<td>$433,060</td>
|
||||
</tr>
|
||||
</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( {
|
||||
"processing": true,
|
||||
"serverSide": true,
|
||||
@ -139,149 +167,354 @@ $(document).ready(function() {
|
||||
"deferLoading": 57
|
||||
} );
|
||||
} );</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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li><li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li></ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:</p>
|
||||
<code class="multiline language-css"></code>
|
||||
</div>
|
||||
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul><li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li></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>
|
||||
<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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</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-attributes.html
|
||||
">HTML5 data-* attributes - cell data</a></li><li><a href="../advanced_init/html5-data-options.html
|
||||
">HTML5 data-* attributes - table options</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="../styling/index.html
|
||||
">Styling</a></h3><ul class="toc"><li><a href="../styling/display.html
|
||||
">Base style</a></li><li><a href="../styling/no-classes.html
|
||||
">Base style - no styling classes</a></li><li><a href="../styling/cell-border.html
|
||||
">Base style - cell borders</a></li><li><a href="../styling/compact.html
|
||||
">Base style - compact</a></li><li><a href="../styling/hover.html
|
||||
">Base style - hover</a></li><li><a href="../styling/order-column.html
|
||||
">Base style - order-column</a></li><li><a href="../styling/row-border.html
|
||||
">Base style - row borders</a></li><li><a href="../styling/stripe.html
|
||||
">Base style - stripe</a></li><li><a href="../styling/bootstrap.html
|
||||
">Bootstrap</a></li><li><a href="../styling/foundation.html
|
||||
">Foundation</a></li><li><a href="../styling/jqueryUI.html
|
||||
">jQuery UI ThemeRoller</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="./index.html
|
||||
">Server-side</a></h3><ul class="toc active"><li><a href="./simple.html
|
||||
">Server-side processing</a></li><li><a href="./custom_vars.html
|
||||
">Custom HTTP variables</a></li><li><a href="./post.html
|
||||
">POST data</a></li><li><a href="./ids.html
|
||||
">Automatic addition of row ID attributes</a></li><li><a href="./object_data.html
|
||||
">Object data source</a></li><li><a href="./row_details.html
|
||||
">Row details</a></li><li><a href="./select_rows.html
|
||||
">Row selection</a></li><li><a href="./jsonp.html
|
||||
">JSONP data source for remote domains</a></li><li class="active"><a href="./defer_loading.html
|
||||
">Deferred loading of data</a></li><li><a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.
|
||||
</p>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
</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>
|
||||
</body>
|
||||
</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-attributes.html">HTML5 data-* attributes - cell data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/display.html">Base style</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/no-classes.html">Base style - no styling classes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/cell-border.html">Base style - cell borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Base style - compact</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/hover.html">Base style - hover</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/order-column.html">Base style - order-column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/row-border.html">Base style - row borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/stripe.html">Base style - stripe</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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="./index.html">Server-side</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./simple.html">Server-side processing</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./custom_vars.html">Custom HTTP variables</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./post.html">POST data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./ids.html">Automatic addition of row ID attributes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./object_data.html">Object data source</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./row_details.html">Row details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./select_rows.html">Row selection</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./jsonp.html">JSONP data source for remote domains</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./defer_loading.html">Deferred loading of data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,19 +1,26 @@
|
||||
<!doctype html>
|
||||
<!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 - Automatic addition of row ID attributes</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js"></script><script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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">
|
||||
|
||||
<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 - Automatic addition of row ID attributes</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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( {
|
||||
"processing": true,
|
||||
@ -30,36 +37,53 @@ $(document).ready(function() {
|
||||
} );
|
||||
} );
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example ">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Automatic addition of row ID attributes</span></h1>
|
||||
<div class="info">
|
||||
<p>Often when using server-side processing you will find that it can be useful to have a specific ID on each row (the primary key value from the database for example). By assigning the ID you want to apply to each row using the property <code>DT_RowId</code> of the data source object for each row (this property name can be configured using the <a href="//datatables.net/reference/option/rowId"><code class="option" title="DataTables initialisation option">rowId</code></a> option), DataTables will automatically add it for you (note that this will work for Ajax and Javascript loaded data as well as for server-side processing).</p>
|
||||
|
||||
<p>In addition to <code>DT_RowId</code> there are other properties which perform similar actions - please refer to the <a href="https://datatables.net/manual/server-side">server-side processing section of the manual</a> for full details.</p>
|
||||
|
||||
<p>This example below shows <code>DT_RowId</code> being used to add information to the table. In addition objects are used as the data source for the rows.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%"><thead><tr><th>First name</th><th>Last name</th><th>Position</th><th>Office</th><th>Start date</th><th>Salary</th></tr></thead><tfoot><tr><th>First name</th><th>Last name</th><th>Position</th><th>Office</th><th>Start date</th><th>Salary</th></tr></tfoot></table>
|
||||
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
|
||||
<code class="multiline language-js">$(document).ready(function() {
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Automatic addition of row ID attributes</span></h1>
|
||||
<div class="info">
|
||||
<p>Often when using server-side processing you will find that it can be useful to have a specific ID on each row (the primary key value from the database for
|
||||
example). By assigning the ID you want to apply to each row using the property <code>DT_RowId</code> of the data source object for each row (this property name can
|
||||
be configured using the <a href="//datatables.net/reference/option/rowId"><code class="option" title="DataTables initialisation option">rowId</code></a> option),
|
||||
DataTables will automatically add it for you (note that this will work for Ajax and Javascript loaded data as well as for server-side processing).</p>
|
||||
<p>In addition to <code>DT_RowId</code> there are other properties which perform similar actions - please refer to the <a href=
|
||||
"https://datatables.net/manual/server-side">server-side processing section of the manual</a> for full details.</p>
|
||||
<p>This example below shows <code>DT_RowId</code> being used to add information to the table. In addition objects are used as the data source for the rows.</p>
|
||||
</div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
"processing": true,
|
||||
"serverSide": true,
|
||||
@ -74,149 +98,354 @@ $(document).ready(function() {
|
||||
]
|
||||
} );
|
||||
} );</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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li><li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li></ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:</p>
|
||||
<code class="multiline language-css"></code>
|
||||
</div>
|
||||
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul><li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li></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>
|
||||
<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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</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-attributes.html
|
||||
">HTML5 data-* attributes - cell data</a></li><li><a href="../advanced_init/html5-data-options.html
|
||||
">HTML5 data-* attributes - table options</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="../styling/index.html
|
||||
">Styling</a></h3><ul class="toc"><li><a href="../styling/display.html
|
||||
">Base style</a></li><li><a href="../styling/no-classes.html
|
||||
">Base style - no styling classes</a></li><li><a href="../styling/cell-border.html
|
||||
">Base style - cell borders</a></li><li><a href="../styling/compact.html
|
||||
">Base style - compact</a></li><li><a href="../styling/hover.html
|
||||
">Base style - hover</a></li><li><a href="../styling/order-column.html
|
||||
">Base style - order-column</a></li><li><a href="../styling/row-border.html
|
||||
">Base style - row borders</a></li><li><a href="../styling/stripe.html
|
||||
">Base style - stripe</a></li><li><a href="../styling/bootstrap.html
|
||||
">Bootstrap</a></li><li><a href="../styling/foundation.html
|
||||
">Foundation</a></li><li><a href="../styling/jqueryUI.html
|
||||
">jQuery UI ThemeRoller</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="./index.html
|
||||
">Server-side</a></h3><ul class="toc active"><li><a href="./simple.html
|
||||
">Server-side processing</a></li><li><a href="./custom_vars.html
|
||||
">Custom HTTP variables</a></li><li><a href="./post.html
|
||||
">POST data</a></li><li class="active"><a href="./ids.html
|
||||
">Automatic addition of row ID attributes</a></li><li><a href="./object_data.html
|
||||
">Object data source</a></li><li><a href="./row_details.html
|
||||
">Row details</a></li><li><a href="./select_rows.html
|
||||
">Row selection</a></li><li><a href="./jsonp.html
|
||||
">JSONP data source for remote domains</a></li><li><a href="./defer_loading.html
|
||||
">Deferred loading of data</a></li><li><a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.
|
||||
</p>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
</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>
|
||||
</body>
|
||||
</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-attributes.html">HTML5 data-* attributes - cell data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/display.html">Base style</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/no-classes.html">Base style - no styling classes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/cell-border.html">Base style - cell borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Base style - compact</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/hover.html">Base style - hover</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/order-column.html">Base style - order-column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/row-border.html">Base style - row borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/stripe.html">Base style - stripe</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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="./index.html">Server-side</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./simple.html">Server-side processing</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./custom_vars.html">Custom HTTP variables</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./post.html">POST data</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./ids.html">Automatic addition of row ID attributes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./object_data.html">Object data source</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./row_details.html">Row details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./select_rows.html">Row selection</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./jsonp.html">JSONP data source for remote domains</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./defer_loading.html">Deferred loading of data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,61 +1,85 @@
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0" />
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"><link rel="stylesheet" type="text/css" href="../resources/demo.css">
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.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>
|
||||
<title>DataTables examples - Server-side processing</title>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Server-side processing</span></h1>
|
||||
<div class="info">
|
||||
<p>There are many ways to get your data into DataTables, and if you are working with seriously large databases, you might want to consider using the server-side options that DataTables provides. With server-side processing enabled, all paging, searching, ordering etc actions that DataTables performs are handed off to a server where an SQL engine (or similar) can perform these actions on the large data set (after all, that's what the database engine is designed for!). As such, each draw of the table will result in a new Ajax request being made to get the required data.</p>
|
||||
|
||||
<p>Server-side processing is enabled by setting the <a href="//datatables.net/reference/option/serverSide"><code class="option" title="DataTables initialisation option">serverSide</code></a> option to <code>true</code> and providing an Ajax data source through the <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option.</p>
|
||||
|
||||
<p>The examples in this section shows server-side processing in use and how it can be customised to suit your needs.</p>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.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>
|
||||
<title>DataTables examples - Server-side processing</title>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<div class="toc">
|
||||
<div class="toc-group"><h3><a href="./index.html
|
||||
">Server-side</a></h3><ul class="toc"><li><a href="./simple.html
|
||||
">Server-side processing</a></li><li><a href="./custom_vars.html
|
||||
">Custom HTTP variables</a></li><li><a href="./post.html
|
||||
">POST data</a></li><li><a href="./ids.html
|
||||
">Automatic addition of row ID attributes</a></li><li><a href="./object_data.html
|
||||
">Object data source</a></li><li><a href="./row_details.html
|
||||
">Row details</a></li><li><a href="./select_rows.html
|
||||
">Row selection</a></li><li><a href="./jsonp.html
|
||||
">JSONP data source for remote domains</a></li><li><a href="./defer_loading.html
|
||||
">Deferred loading of data</a></li><li><a href="./pipeline.html
|
||||
">Pipelining data to reduce Ajax calls for paging</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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<h1>DataTables example <span>Server-side processing</span></h1>
|
||||
<div class="info">
|
||||
<p>There are many ways to get your data into DataTables, and if you are working with seriously large databases, you might want to consider using the server-side
|
||||
options that DataTables provides. With server-side processing enabled, all paging, searching, ordering etc actions that DataTables performs are handed off to a
|
||||
server where an SQL engine (or similar) can perform these actions on the large data set (after all, that's what the database engine is designed for!). As such,
|
||||
each draw of the table will result in a new Ajax request being made to get the required data.</p>
|
||||
<p>Server-side processing is enabled by setting the <a href="//datatables.net/reference/option/serverSide"><code class="option" title=
|
||||
"DataTables initialisation option">serverSide</code></a> option to <code>true</code> and providing an Ajax data source through the <a href=
|
||||
"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option.</p>
|
||||
<p>The examples in this section shows server-side processing in use and how it can be customised to suit your needs.</p>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Server-side</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="./simple.html">Server-side processing</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./custom_vars.html">Custom HTTP variables</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./post.html">POST data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./ids.html">Automatic addition of row ID attributes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./object_data.html">Object data source</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./row_details.html">Row details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./select_rows.html">Row selection</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./jsonp.html">JSONP data source for remote domains</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./defer_loading.html">Deferred loading of data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./pipeline.html">Pipelining data to reduce Ajax calls for paging</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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,19 +1,26 @@
|
||||
<!doctype html>
|
||||
<!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 - JSONP data source for remote domains</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js"></script><script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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">
|
||||
|
||||
<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 - JSONP data source for remote domains</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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( {
|
||||
"processing": true,
|
||||
@ -25,36 +32,56 @@ $(document).ready(function() {
|
||||
} );
|
||||
} );
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example ">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>JSONP data source for remote domains</span></h1>
|
||||
<div class="info">
|
||||
<p><a href="http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/">JSONP</a> is one of several methods to allow the use of JSON data from any server (browsers have XSS protection rules which will block standard Ajax requests to remote source for security reasons). Using JSONP allows DataTables to load server-side sourced data from any domain and is quite simply done with the <code>dataType</code> option of the <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> initialisation option.</p>
|
||||
|
||||
<p>When given as an object, the <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option maps directly onto the <a href="http://api.jquery.com/jQuery.ajax/">jQuery ajax</a> options (i.e. any option that can be used in jQuery's Ajax function can also be used in DataTable's <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option).</p>
|
||||
|
||||
<p>The example below shows <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> being used with the <code>dataType</code> option set to retrieve JSONP data for server-side processing in DataTables.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%"><thead><tr><th>First name</th><th>Last name</th><th>Position</th><th>Office</th><th>Start date</th><th>Salary</th></tr></thead><tfoot><tr><th>First name</th><th>Last name</th><th>Position</th><th>Office</th><th>Start date</th><th>Salary</th></tr></tfoot></table>
|
||||
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
|
||||
<code class="multiline language-js">$(document).ready(function() {
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>JSONP data source for remote domains</span></h1>
|
||||
<div class="info">
|
||||
<p><a href="http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/">JSONP</a> is one of several methods to allow the use of JSON data from any server
|
||||
(browsers have XSS protection rules which will block standard Ajax requests to remote source for security reasons). Using JSONP allows DataTables to load
|
||||
server-side sourced data from any domain and is quite simply done with the <code>dataType</code> option of the <a href=
|
||||
"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> initialisation option.</p>
|
||||
<p>When given as an object, the <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a>
|
||||
option maps directly onto the <a href="http://api.jquery.com/jQuery.ajax/">jQuery ajax</a> options (i.e. any option that can be used in jQuery's Ajax function can
|
||||
also be used in DataTable's <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a>
|
||||
option).</p>
|
||||
<p>The example below shows <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> being
|
||||
used with the <code>dataType</code> option set to retrieve JSONP data for server-side processing in DataTables.</p>
|
||||
</div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
"processing": true,
|
||||
"serverSide": true,
|
||||
@ -64,149 +91,354 @@ $(document).ready(function() {
|
||||
}
|
||||
} );
|
||||
} );</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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li><li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li></ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:</p>
|
||||
<code class="multiline language-css"></code>
|
||||
</div>
|
||||
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul><li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li></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>
|
||||
<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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</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-attributes.html
|
||||
">HTML5 data-* attributes - cell data</a></li><li><a href="../advanced_init/html5-data-options.html
|
||||
">HTML5 data-* attributes - table options</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="../styling/index.html
|
||||
">Styling</a></h3><ul class="toc"><li><a href="../styling/display.html
|
||||
">Base style</a></li><li><a href="../styling/no-classes.html
|
||||
">Base style - no styling classes</a></li><li><a href="../styling/cell-border.html
|
||||
">Base style - cell borders</a></li><li><a href="../styling/compact.html
|
||||
">Base style - compact</a></li><li><a href="../styling/hover.html
|
||||
">Base style - hover</a></li><li><a href="../styling/order-column.html
|
||||
">Base style - order-column</a></li><li><a href="../styling/row-border.html
|
||||
">Base style - row borders</a></li><li><a href="../styling/stripe.html
|
||||
">Base style - stripe</a></li><li><a href="../styling/bootstrap.html
|
||||
">Bootstrap</a></li><li><a href="../styling/foundation.html
|
||||
">Foundation</a></li><li><a href="../styling/jqueryUI.html
|
||||
">jQuery UI ThemeRoller</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="./index.html
|
||||
">Server-side</a></h3><ul class="toc active"><li><a href="./simple.html
|
||||
">Server-side processing</a></li><li><a href="./custom_vars.html
|
||||
">Custom HTTP variables</a></li><li><a href="./post.html
|
||||
">POST data</a></li><li><a href="./ids.html
|
||||
">Automatic addition of row ID attributes</a></li><li><a href="./object_data.html
|
||||
">Object data source</a></li><li><a href="./row_details.html
|
||||
">Row details</a></li><li><a href="./select_rows.html
|
||||
">Row selection</a></li><li class="active"><a href="./jsonp.html
|
||||
">JSONP data source for remote domains</a></li><li><a href="./defer_loading.html
|
||||
">Deferred loading of data</a></li><li><a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.
|
||||
</p>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
</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>
|
||||
</body>
|
||||
</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-attributes.html">HTML5 data-* attributes - cell data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/display.html">Base style</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/no-classes.html">Base style - no styling classes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/cell-border.html">Base style - cell borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Base style - compact</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/hover.html">Base style - hover</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/order-column.html">Base style - order-column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/row-border.html">Base style - row borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/stripe.html">Base style - stripe</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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="./index.html">Server-side</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./simple.html">Server-side processing</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./custom_vars.html">Custom HTTP variables</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./post.html">POST data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./ids.html">Automatic addition of row ID attributes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./object_data.html">Object data source</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./row_details.html">Row details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./select_rows.html">Row selection</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./jsonp.html">JSONP data source for remote domains</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./defer_loading.html">Deferred loading of data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,19 +1,26 @@
|
||||
<!doctype html>
|
||||
<!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 - Object data source</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js"></script><script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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">
|
||||
|
||||
<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 - Object data source</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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( {
|
||||
"processing": true,
|
||||
@ -30,34 +37,52 @@ $(document).ready(function() {
|
||||
} );
|
||||
} );
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example ">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Object data source</span></h1>
|
||||
<div class="info">
|
||||
<p>The default data format that DataTables expects for server-side processing is a 2D array of data (rows by columns). However, this is often not flexible enough for either the server-side environment, or you might want to convey more information in the data source than is necessary to show in the table (row IDs from the database for example). For these situations DataTables supports the reading of data for objects as well as arrays.</p>
|
||||
|
||||
<p>In this example the server responds with an array of objects, where DataTables will look up and use each property that is specified by the <a href="//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> property given for each column.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%"><thead><tr><th>First name</th><th>Last name</th><th>Position</th><th>Office</th><th>Start date</th><th>Salary</th></tr></thead><tfoot><tr><th>First name</th><th>Last name</th><th>Position</th><th>Office</th><th>Start date</th><th>Salary</th></tr></tfoot></table>
|
||||
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
|
||||
<code class="multiline language-js">$(document).ready(function() {
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Object data source</span></h1>
|
||||
<div class="info">
|
||||
<p>The default data format that DataTables expects for server-side processing is a 2D array of data (rows by columns). However, this is often not flexible enough
|
||||
for either the server-side environment, or you might want to convey more information in the data source than is necessary to show in the table (row IDs from the
|
||||
database for example). For these situations DataTables supports the reading of data for objects as well as arrays.</p>
|
||||
<p>In this example the server responds with an array of objects, where DataTables will look up and use each property that is specified by the <a href=
|
||||
"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> property given for each
|
||||
column.</p>
|
||||
</div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
"processing": true,
|
||||
"serverSide": true,
|
||||
@ -72,149 +97,354 @@ $(document).ready(function() {
|
||||
]
|
||||
} );
|
||||
} );</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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li><li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li></ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:</p>
|
||||
<code class="multiline language-css"></code>
|
||||
</div>
|
||||
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul><li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li></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>
|
||||
<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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</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-attributes.html
|
||||
">HTML5 data-* attributes - cell data</a></li><li><a href="../advanced_init/html5-data-options.html
|
||||
">HTML5 data-* attributes - table options</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="../styling/index.html
|
||||
">Styling</a></h3><ul class="toc"><li><a href="../styling/display.html
|
||||
">Base style</a></li><li><a href="../styling/no-classes.html
|
||||
">Base style - no styling classes</a></li><li><a href="../styling/cell-border.html
|
||||
">Base style - cell borders</a></li><li><a href="../styling/compact.html
|
||||
">Base style - compact</a></li><li><a href="../styling/hover.html
|
||||
">Base style - hover</a></li><li><a href="../styling/order-column.html
|
||||
">Base style - order-column</a></li><li><a href="../styling/row-border.html
|
||||
">Base style - row borders</a></li><li><a href="../styling/stripe.html
|
||||
">Base style - stripe</a></li><li><a href="../styling/bootstrap.html
|
||||
">Bootstrap</a></li><li><a href="../styling/foundation.html
|
||||
">Foundation</a></li><li><a href="../styling/jqueryUI.html
|
||||
">jQuery UI ThemeRoller</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="./index.html
|
||||
">Server-side</a></h3><ul class="toc active"><li><a href="./simple.html
|
||||
">Server-side processing</a></li><li><a href="./custom_vars.html
|
||||
">Custom HTTP variables</a></li><li><a href="./post.html
|
||||
">POST data</a></li><li><a href="./ids.html
|
||||
">Automatic addition of row ID attributes</a></li><li class="active"><a href="./object_data.html
|
||||
">Object data source</a></li><li><a href="./row_details.html
|
||||
">Row details</a></li><li><a href="./select_rows.html
|
||||
">Row selection</a></li><li><a href="./jsonp.html
|
||||
">JSONP data source for remote domains</a></li><li><a href="./defer_loading.html
|
||||
">Deferred loading of data</a></li><li><a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.
|
||||
</p>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
</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>
|
||||
</body>
|
||||
</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-attributes.html">HTML5 data-* attributes - cell data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/display.html">Base style</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/no-classes.html">Base style - no styling classes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/cell-border.html">Base style - cell borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Base style - compact</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/hover.html">Base style - hover</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/order-column.html">Base style - order-column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/row-border.html">Base style - row borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/stripe.html">Base style - stripe</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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="./index.html">Server-side</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./simple.html">Server-side processing</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./custom_vars.html">Custom HTTP variables</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./post.html">POST data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./ids.html">Automatic addition of row ID attributes</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./object_data.html">Object data source</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./row_details.html">Row details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./select_rows.html">Row selection</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./jsonp.html">JSONP data source for remote domains</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./defer_loading.html">Deferred loading of data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,19 +1,26 @@
|
||||
<!doctype html>
|
||||
<!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 - Pipelining data to reduce Ajax calls for paging</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js"></script><script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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">
|
||||
|
||||
<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 - Pipelining data to reduce Ajax calls for paging</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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">
|
||||
|
||||
|
||||
//
|
||||
// Pipelining function for DataTables. To be used to the `ajax` option of DataTables
|
||||
@ -145,36 +152,55 @@ $(document).ready(function() {
|
||||
} );
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example ">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Pipelining data to reduce Ajax calls for paging</span></h1>
|
||||
<div class="info">
|
||||
<p>Server-side processing can be quite hard on your server, since it makes an Ajax call to the server for every draw request that is made. On sites with a large number of page views, you could potentially end up DDoSing your own server with your own applications!</p>
|
||||
|
||||
<p>This example shows one technique to reduce the number of Ajax calls that are made to the server by caching more data than is needed for each draw. This is done by intercepting the Ajax call and routing it through a data cache control; using the data from the cache if available, and making the Ajax request if not. This intercept of the Ajax request is performed by giving the <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option as a function. This function then performs the logic of deciding if another Ajax call is needed, or if data from the cache can be used.</p>
|
||||
|
||||
<p>Keep in mind that this caching is for paging only; the pipeline must be cleared for other interactions such as ordering and searching since the full data set, when using server-side processing, is only available at the server.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%"><thead><tr><th>First name</th><th>Last name</th><th>Position</th><th>Office</th><th>Start date</th><th>Salary</th></tr></thead><tfoot><tr><th>First name</th><th>Last name</th><th>Position</th><th>Office</th><th>Start date</th><th>Salary</th></tr></tfoot></table>
|
||||
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
|
||||
<code class="multiline language-js">//
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Pipelining data to reduce Ajax calls for paging</span></h1>
|
||||
<div class="info">
|
||||
<p>Server-side processing can be quite hard on your server, since it makes an Ajax call to the server for every draw request that is made. On sites with a large
|
||||
number of page views, you could potentially end up DDoSing your own server with your own applications!</p>
|
||||
<p>This example shows one technique to reduce the number of Ajax calls that are made to the server by caching more data than is needed for each draw. This is done
|
||||
by intercepting the Ajax call and routing it through a data cache control; using the data from the cache if available, and making the Ajax request if not. This
|
||||
intercept of the Ajax request is performed by giving the <a href="//datatables.net/reference/option/ajax"><code class="option" title=
|
||||
"DataTables initialisation option">ajax</code></a> option as a function. This function then performs the logic of deciding if another Ajax call is needed, or if
|
||||
data from the cache can be used.</p>
|
||||
<p>Keep in mind that this caching is for paging only; the pipeline must be cleared for other interactions such as ordering and searching since the full data set,
|
||||
when using server-side processing, is only available at the server.</p>
|
||||
</div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">//
|
||||
// Pipelining function for DataTables. To be used to the `ajax` option of DataTables
|
||||
//
|
||||
$.fn.dataTable.pipeline = function ( opts ) {
|
||||
@ -302,149 +328,354 @@ $(document).ready(function() {
|
||||
} )
|
||||
} );
|
||||
} );</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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li><li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li></ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:</p>
|
||||
<code class="multiline language-css"></code>
|
||||
</div>
|
||||
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul><li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li></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>
|
||||
<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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</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-attributes.html
|
||||
">HTML5 data-* attributes - cell data</a></li><li><a href="../advanced_init/html5-data-options.html
|
||||
">HTML5 data-* attributes - table options</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="../styling/index.html
|
||||
">Styling</a></h3><ul class="toc"><li><a href="../styling/display.html
|
||||
">Base style</a></li><li><a href="../styling/no-classes.html
|
||||
">Base style - no styling classes</a></li><li><a href="../styling/cell-border.html
|
||||
">Base style - cell borders</a></li><li><a href="../styling/compact.html
|
||||
">Base style - compact</a></li><li><a href="../styling/hover.html
|
||||
">Base style - hover</a></li><li><a href="../styling/order-column.html
|
||||
">Base style - order-column</a></li><li><a href="../styling/row-border.html
|
||||
">Base style - row borders</a></li><li><a href="../styling/stripe.html
|
||||
">Base style - stripe</a></li><li><a href="../styling/bootstrap.html
|
||||
">Bootstrap</a></li><li><a href="../styling/foundation.html
|
||||
">Foundation</a></li><li><a href="../styling/jqueryUI.html
|
||||
">jQuery UI ThemeRoller</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="./index.html
|
||||
">Server-side</a></h3><ul class="toc active"><li><a href="./simple.html
|
||||
">Server-side processing</a></li><li><a href="./custom_vars.html
|
||||
">Custom HTTP variables</a></li><li><a href="./post.html
|
||||
">POST data</a></li><li><a href="./ids.html
|
||||
">Automatic addition of row ID attributes</a></li><li><a href="./object_data.html
|
||||
">Object data source</a></li><li><a href="./row_details.html
|
||||
">Row details</a></li><li><a href="./select_rows.html
|
||||
">Row selection</a></li><li><a href="./jsonp.html
|
||||
">JSONP data source for remote domains</a></li><li><a href="./defer_loading.html
|
||||
">Deferred loading of data</a></li><li class="active"><a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.
|
||||
</p>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
</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>
|
||||
</body>
|
||||
</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-attributes.html">HTML5 data-* attributes - cell data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/display.html">Base style</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/no-classes.html">Base style - no styling classes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/cell-border.html">Base style - cell borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Base style - compact</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/hover.html">Base style - hover</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/order-column.html">Base style - order-column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/row-border.html">Base style - row borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/stripe.html">Base style - stripe</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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="./index.html">Server-side</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./simple.html">Server-side processing</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./custom_vars.html">Custom HTTP variables</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./post.html">POST data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./ids.html">Automatic addition of row ID attributes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./object_data.html">Object data source</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./row_details.html">Row details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./select_rows.html">Row selection</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./jsonp.html">JSONP data source for remote domains</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./defer_loading.html">Deferred loading of data</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,19 +1,26 @@
|
||||
<!doctype html>
|
||||
<!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 - POST data</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js"></script><script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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">
|
||||
|
||||
<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 - POST data</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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( {
|
||||
@ -34,36 +41,55 @@ $(document).ready(function() {
|
||||
} );
|
||||
} );
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example ">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>POST data</span></h1>
|
||||
<div class="info">
|
||||
<p>By default, the Ajax request that DataTables makes to obtain server-side processing data is an HTTP GET request. However, there are times when you might wish to use POST. This is very easily done by using the <code>type</code> option of the <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> initialisation option.</p>
|
||||
|
||||
<p>When given as an object, the <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option maps directly onto the <a href="http://api.jquery.com/jQuery.ajax/">jQuery ajax</a> options (i.e. any option that can be used in jQuery's Ajax function can also be used in DataTable's <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option).</p>
|
||||
|
||||
<p>The example below shows <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> being used with the <code>type</code> option set to <code class="string" title="String">POST</code> to make a POST request.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%"><thead><tr><th>First name</th><th>Last name</th><th>Position</th><th>Office</th><th>Start date</th><th>Salary</th></tr></thead><tfoot><tr><th>First name</th><th>Last name</th><th>Position</th><th>Office</th><th>Start date</th><th>Salary</th></tr></tfoot></table>
|
||||
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
|
||||
<code class="multiline language-js">$(document).ready(function() {
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>POST data</span></h1>
|
||||
<div class="info">
|
||||
<p>By default, the Ajax request that DataTables makes to obtain server-side processing data is an HTTP GET request. However, there are times when you might wish to
|
||||
use POST. This is very easily done by using the <code>type</code> option of the <a href="//datatables.net/reference/option/ajax"><code class="option" title=
|
||||
"DataTables initialisation option">ajax</code></a> initialisation option.</p>
|
||||
<p>When given as an object, the <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a>
|
||||
option maps directly onto the <a href="http://api.jquery.com/jQuery.ajax/">jQuery ajax</a> options (i.e. any option that can be used in jQuery's Ajax function can
|
||||
also be used in DataTable's <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a>
|
||||
option).</p>
|
||||
<p>The example below shows <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> being
|
||||
used with the <code>type</code> option set to <code class="string" title="String">POST</code> to make a POST request.</p>
|
||||
</div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
"processing": true,
|
||||
"serverSide": true,
|
||||
@ -81,149 +107,354 @@ $(document).ready(function() {
|
||||
]
|
||||
} );
|
||||
} );</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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li><li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li></ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:</p>
|
||||
<code class="multiline language-css"></code>
|
||||
</div>
|
||||
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul><li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li></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>
|
||||
<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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</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-attributes.html
|
||||
">HTML5 data-* attributes - cell data</a></li><li><a href="../advanced_init/html5-data-options.html
|
||||
">HTML5 data-* attributes - table options</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="../styling/index.html
|
||||
">Styling</a></h3><ul class="toc"><li><a href="../styling/display.html
|
||||
">Base style</a></li><li><a href="../styling/no-classes.html
|
||||
">Base style - no styling classes</a></li><li><a href="../styling/cell-border.html
|
||||
">Base style - cell borders</a></li><li><a href="../styling/compact.html
|
||||
">Base style - compact</a></li><li><a href="../styling/hover.html
|
||||
">Base style - hover</a></li><li><a href="../styling/order-column.html
|
||||
">Base style - order-column</a></li><li><a href="../styling/row-border.html
|
||||
">Base style - row borders</a></li><li><a href="../styling/stripe.html
|
||||
">Base style - stripe</a></li><li><a href="../styling/bootstrap.html
|
||||
">Bootstrap</a></li><li><a href="../styling/foundation.html
|
||||
">Foundation</a></li><li><a href="../styling/jqueryUI.html
|
||||
">jQuery UI ThemeRoller</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="./index.html
|
||||
">Server-side</a></h3><ul class="toc active"><li><a href="./simple.html
|
||||
">Server-side processing</a></li><li><a href="./custom_vars.html
|
||||
">Custom HTTP variables</a></li><li class="active"><a href="./post.html
|
||||
">POST data</a></li><li><a href="./ids.html
|
||||
">Automatic addition of row ID attributes</a></li><li><a href="./object_data.html
|
||||
">Object data source</a></li><li><a href="./row_details.html
|
||||
">Row details</a></li><li><a href="./select_rows.html
|
||||
">Row selection</a></li><li><a href="./jsonp.html
|
||||
">JSONP data source for remote domains</a></li><li><a href="./defer_loading.html
|
||||
">Deferred loading of data</a></li><li><a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.
|
||||
</p>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
</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>
|
||||
</body>
|
||||
</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-attributes.html">HTML5 data-* attributes - cell data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/display.html">Base style</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/no-classes.html">Base style - no styling classes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/cell-border.html">Base style - cell borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Base style - compact</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/hover.html">Base style - hover</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/order-column.html">Base style - order-column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/row-border.html">Base style - row borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/stripe.html">Base style - stripe</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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="./index.html">Server-side</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./simple.html">Server-side processing</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./custom_vars.html">Custom HTTP variables</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./post.html">POST data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./ids.html">Automatic addition of row ID attributes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./object_data.html">Object data source</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./row_details.html">Row details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./select_rows.html">Row selection</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./jsonp.html">JSONP data source for remote domains</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./defer_loading.html">Deferred loading of data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,15 +1,15 @@
|
||||
<!doctype html>
|
||||
<!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 - Row details</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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">
|
||||
|
||||
<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 - Row details</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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">
|
||||
|
||||
td.details-control {
|
||||
background: url('../resources/details_open.png') no-repeat center center;
|
||||
cursor: pointer;
|
||||
@ -18,10 +18,17 @@ tr.details td.details-control {
|
||||
background: url('../resources/details_close.png') no-repeat center center;
|
||||
}
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script><script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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">
|
||||
|
||||
|
||||
function format ( d ) {
|
||||
return 'Full name: '+d.first_name+' '+d.last_name+'<br>'+
|
||||
@ -83,38 +90,59 @@ $(document).ready(function() {
|
||||
} );
|
||||
} );
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example ">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Row details</span></h1>
|
||||
<div class="info">
|
||||
<p>This example shows the use of DataTables' ability to show and hide child rows which are attached to a parent row in the host table. This is often used to show additional information about a row, particularly when you wish to convey more information about a row than there is space for in the host table.</p>
|
||||
|
||||
<p>The example below shows server-side processing being used with the first column having an event listener attached to it which will toggle the child row's display. This is set up using <a href="//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> and <a href="//datatables.net/reference/option/columns.defaultContent"><code class="option" title="DataTables initialisation option">columns.defaultContent</code></a>, in combination with CSS to show an empty cell with a background image which can be clicked upon.</p>
|
||||
|
||||
<p>The event handler makes use of the <a href="//datatables.net/reference/api/row().child"><code class="api" title="DataTables API method">row().child</code></a> methods to firstly check if a row is already displayed, and if so hide it, if not show it. The content of the child row is, in this example, defined by the <code>format()</code> function, but you would replace that with whatever you wanted to show the content required, possibly including, for example, an Ajax call to the server to obtain the extra information to show. Note that the format details function has access to the full data source object for the row, including information that is not actually shown in the table (the salary parameter for example).</p>
|
||||
|
||||
<p>Furthermore, this example shows a small difference from the <a href="../api/row_details.html">client-side row details example</a> in that to have rows automatically reopen when the table is redrawn, we need to track a unique identifier for each row - in this case the row <code>id</code>. This is required because in server-side processing mode rows are automatically destroyed and recreated on each draw.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%"><thead><tr><th></th><th>First name</th><th>Last name</th><th>Position</th><th>Office</th></tr></thead><tfoot><tr><th></th><th>First name</th><th>Last name</th><th>Position</th><th>Office</th></tr></tfoot></table>
|
||||
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
|
||||
<code class="multiline language-js">function format ( d ) {
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Row details</span></h1>
|
||||
<div class="info">
|
||||
<p>This example shows the use of DataTables' ability to show and hide child rows which are attached to a parent row in the host table. This is often used to show
|
||||
additional information about a row, particularly when you wish to convey more information about a row than there is space for in the host table.</p>
|
||||
<p>The example below shows server-side processing being used with the first column having an event listener attached to it which will toggle the child row's
|
||||
display. This is set up using <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
|
||||
"DataTables initialisation option">columns.data</code></a> and <a href="//datatables.net/reference/option/columns.defaultContent"><code class="option" title=
|
||||
"DataTables initialisation option">columns.defaultContent</code></a>, in combination with CSS to show an empty cell with a background image which can be clicked
|
||||
upon.</p>
|
||||
<p>The event handler makes use of the <a href="//datatables.net/reference/api/row().child"><code class="api" title="DataTables API method">row().child</code></a>
|
||||
methods to firstly check if a row is already displayed, and if so hide it, if not show it. The content of the child row is, in this example, defined by the
|
||||
<code>format()</code> function, but you would replace that with whatever you wanted to show the content required, possibly including, for example, an Ajax call to
|
||||
the server to obtain the extra information to show. Note that the format details function has access to the full data source object for the row, including
|
||||
information that is not actually shown in the table (the salary parameter for example).</p>
|
||||
<p>Furthermore, this example shows a small difference from the <a href="../api/row_details.html">client-side row details example</a> in that to have rows
|
||||
automatically reopen when the table is redrawn, we need to track a unique identifier for each row - in this case the row <code>id</code>. This is required because
|
||||
in server-side processing mode rows are automatically destroyed and recreated on each draw.</p>
|
||||
</div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">function format ( d ) {
|
||||
return 'Full name: '+d.first_name+' '+d.last_name+'<br>'+
|
||||
'Salary: '+d.salary+'<br>'+
|
||||
'The child row can contain any data you wish, including links, images, inner tables etc.';
|
||||
@ -173,155 +201,360 @@ $(document).ready(function() {
|
||||
} );
|
||||
} );
|
||||
} );</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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li><li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.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">td.details-control {
|
||||
<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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.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">td.details-control {
|
||||
background: url('../resources/details_open.png') no-repeat center center;
|
||||
cursor: pointer;
|
||||
}
|
||||
tr.details td.details-control {
|
||||
background: url('../resources/details_close.png') no-repeat center center;
|
||||
}</code>
|
||||
</div>
|
||||
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul><li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li></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>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
</ul>
|
||||
</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-attributes.html
|
||||
">HTML5 data-* attributes - cell data</a></li><li><a href="../advanced_init/html5-data-options.html
|
||||
">HTML5 data-* attributes - table options</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="../styling/index.html
|
||||
">Styling</a></h3><ul class="toc"><li><a href="../styling/display.html
|
||||
">Base style</a></li><li><a href="../styling/no-classes.html
|
||||
">Base style - no styling classes</a></li><li><a href="../styling/cell-border.html
|
||||
">Base style - cell borders</a></li><li><a href="../styling/compact.html
|
||||
">Base style - compact</a></li><li><a href="../styling/hover.html
|
||||
">Base style - hover</a></li><li><a href="../styling/order-column.html
|
||||
">Base style - order-column</a></li><li><a href="../styling/row-border.html
|
||||
">Base style - row borders</a></li><li><a href="../styling/stripe.html
|
||||
">Base style - stripe</a></li><li><a href="../styling/bootstrap.html
|
||||
">Bootstrap</a></li><li><a href="../styling/foundation.html
|
||||
">Foundation</a></li><li><a href="../styling/jqueryUI.html
|
||||
">jQuery UI ThemeRoller</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="./index.html
|
||||
">Server-side</a></h3><ul class="toc active"><li><a href="./simple.html
|
||||
">Server-side processing</a></li><li><a href="./custom_vars.html
|
||||
">Custom HTTP variables</a></li><li><a href="./post.html
|
||||
">POST data</a></li><li><a href="./ids.html
|
||||
">Automatic addition of row ID attributes</a></li><li><a href="./object_data.html
|
||||
">Object data source</a></li><li class="active"><a href="./row_details.html
|
||||
">Row details</a></li><li><a href="./select_rows.html
|
||||
">Row selection</a></li><li><a href="./jsonp.html
|
||||
">JSONP data source for remote domains</a></li><li><a href="./defer_loading.html
|
||||
">Deferred loading of data</a></li><li><a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.
|
||||
</p>
|
||||
</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>
|
||||
</body>
|
||||
</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-attributes.html">HTML5 data-* attributes - cell data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/display.html">Base style</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/no-classes.html">Base style - no styling classes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/cell-border.html">Base style - cell borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Base style - compact</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/hover.html">Base style - hover</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/order-column.html">Base style - order-column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/row-border.html">Base style - row borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/stripe.html">Base style - stripe</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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="./index.html">Server-side</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./simple.html">Server-side processing</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./custom_vars.html">Custom HTTP variables</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./post.html">POST data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./ids.html">Automatic addition of row ID attributes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./object_data.html">Object data source</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./row_details.html">Row details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./select_rows.html">Row selection</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./jsonp.html">JSONP data source for remote domains</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./defer_loading.html">Deferred loading of data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,19 +1,26 @@
|
||||
<!doctype html>
|
||||
<!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 - Row selection</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js"></script><script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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">
|
||||
|
||||
<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 - Row selection</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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() {
|
||||
var selected = [];
|
||||
@ -44,36 +51,53 @@ $(document).ready(function() {
|
||||
} );
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example ">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Row selection</span></h1>
|
||||
<div class="info">
|
||||
<p>When you want to have user selectable rows in DataTables, it is relatively trivial when using DOM based data - but when using server-side processing, DataTables doesn't retain DOM row elements over pages / filtering etc. As such, you will need to keep a track of which rows a user as selected and mark them as selected on each draw.</p>
|
||||
|
||||
<p>This is shown in this demo, which uses a unique ID assigned to the TR element (this is done automatically through the use of the <code>DT_RowId</code> special property returned as part of the object given by the server for each row) to track which rows are selected and reselect them is appropriate on a draw.</p>
|
||||
|
||||
<p>If you are looking for a more complete and easier to use row selection option, check out the <a href="https://datatables.net/extras/select">Select extension</a> provides an API that is fully integrated with DataTables for selecting rows and acting upon those selected rows.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%"><thead><tr><th>First name</th><th>Last name</th><th>Position</th><th>Office</th><th>Start date</th><th>Salary</th></tr></thead><tfoot><tr><th>First name</th><th>Last name</th><th>Position</th><th>Office</th><th>Start date</th><th>Salary</th></tr></tfoot></table>
|
||||
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
|
||||
<code class="multiline language-js">$(document).ready(function() {
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Row selection</span></h1>
|
||||
<div class="info">
|
||||
<p>When you want to have user selectable rows in DataTables, it is relatively trivial when using DOM based data - but when using server-side processing, DataTables
|
||||
doesn't retain DOM row elements over pages / filtering etc. As such, you will need to keep a track of which rows a user as selected and mark them as selected on
|
||||
each draw.</p>
|
||||
<p>This is shown in this demo, which uses a unique ID assigned to the TR element (this is done automatically through the use of the <code>DT_RowId</code> special
|
||||
property returned as part of the object given by the server for each row) to track which rows are selected and reselect them is appropriate on a draw.</p>
|
||||
<p>If you are looking for a more complete and easier to use row selection option, check out the <a href="https://datatables.net/extras/select">Select extension</a>
|
||||
provides an API that is fully integrated with DataTables for selecting rows and acting upon those selected rows.</p>
|
||||
</div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
var selected = [];
|
||||
|
||||
$("#example").DataTable({
|
||||
@ -100,149 +124,354 @@ $(document).ready(function() {
|
||||
$(this).toggleClass('selected');
|
||||
} );
|
||||
} );</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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li><li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li></ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:</p>
|
||||
<code class="multiline language-css"></code>
|
||||
</div>
|
||||
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul><li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li></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>
|
||||
<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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</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-attributes.html
|
||||
">HTML5 data-* attributes - cell data</a></li><li><a href="../advanced_init/html5-data-options.html
|
||||
">HTML5 data-* attributes - table options</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="../styling/index.html
|
||||
">Styling</a></h3><ul class="toc"><li><a href="../styling/display.html
|
||||
">Base style</a></li><li><a href="../styling/no-classes.html
|
||||
">Base style - no styling classes</a></li><li><a href="../styling/cell-border.html
|
||||
">Base style - cell borders</a></li><li><a href="../styling/compact.html
|
||||
">Base style - compact</a></li><li><a href="../styling/hover.html
|
||||
">Base style - hover</a></li><li><a href="../styling/order-column.html
|
||||
">Base style - order-column</a></li><li><a href="../styling/row-border.html
|
||||
">Base style - row borders</a></li><li><a href="../styling/stripe.html
|
||||
">Base style - stripe</a></li><li><a href="../styling/bootstrap.html
|
||||
">Bootstrap</a></li><li><a href="../styling/foundation.html
|
||||
">Foundation</a></li><li><a href="../styling/jqueryUI.html
|
||||
">jQuery UI ThemeRoller</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="./index.html
|
||||
">Server-side</a></h3><ul class="toc active"><li><a href="./simple.html
|
||||
">Server-side processing</a></li><li><a href="./custom_vars.html
|
||||
">Custom HTTP variables</a></li><li><a href="./post.html
|
||||
">POST data</a></li><li><a href="./ids.html
|
||||
">Automatic addition of row ID attributes</a></li><li><a href="./object_data.html
|
||||
">Object data source</a></li><li><a href="./row_details.html
|
||||
">Row details</a></li><li class="active"><a href="./select_rows.html
|
||||
">Row selection</a></li><li><a href="./jsonp.html
|
||||
">JSONP data source for remote domains</a></li><li><a href="./defer_loading.html
|
||||
">Deferred loading of data</a></li><li><a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.
|
||||
</p>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
</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>
|
||||
</body>
|
||||
</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-attributes.html">HTML5 data-* attributes - cell data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/display.html">Base style</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/no-classes.html">Base style - no styling classes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/cell-border.html">Base style - cell borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Base style - compact</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/hover.html">Base style - hover</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/order-column.html">Base style - order-column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/row-border.html">Base style - row borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/stripe.html">Base style - stripe</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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="./index.html">Server-side</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./simple.html">Server-side processing</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./custom_vars.html">Custom HTTP variables</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./post.html">POST data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./ids.html">Automatic addition of row ID attributes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./object_data.html">Object data source</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./row_details.html">Row details</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./select_rows.html">Row selection</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./jsonp.html">JSONP data source for remote domains</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./defer_loading.html">Deferred loading of data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,19 +1,26 @@
|
||||
<!doctype html>
|
||||
<!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 - Server-side processing</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js"></script><script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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">
|
||||
|
||||
<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 - Server-side processing</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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.11.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.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( {
|
||||
"processing": true,
|
||||
@ -22,185 +29,408 @@ $(document).ready(function() {
|
||||
} );
|
||||
} );
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example ">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Server-side processing</span></h1>
|
||||
<div class="info">
|
||||
<p>There are many ways to get your data into DataTables, and if you are working with seriously large databases, you might want to consider using the server-side options that DataTables provides. With server-side processing enabled, all paging, searching, ordering etc actions that DataTables performs are handed off to a server where an SQL engine (or similar) can perform these actions on the large data set (after all, that's what the database engine is designed for!). As such, each draw of the table will result in a new Ajax request being made to get the required data.</p>
|
||||
|
||||
<p>Server-side processing is enabled by setting the <a href="//datatables.net/reference/option/serverSide"><code class="option" title="DataTables initialisation option">serverSide</code></a> option to <code>true</code> and providing an Ajax data source through the <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option.</p>
|
||||
|
||||
<p>This example shows a very simple table, matching the other client-side processing examples, but in this instance using server-side processing.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%"><thead><tr><th>First name</th><th>Last name</th><th>Position</th><th>Office</th><th>Start date</th><th>Salary</th></tr></thead><tfoot><tr><th>First name</th><th>Last name</th><th>Position</th><th>Office</th><th>Start date</th><th>Salary</th></tr></tfoot></table>
|
||||
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
|
||||
<code class="multiline language-js">$(document).ready(function() {
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Server-side processing</span></h1>
|
||||
<div class="info">
|
||||
<p>There are many ways to get your data into DataTables, and if you are working with seriously large databases, you might want to consider using the server-side
|
||||
options that DataTables provides. With server-side processing enabled, all paging, searching, ordering etc actions that DataTables performs are handed off to a
|
||||
server where an SQL engine (or similar) can perform these actions on the large data set (after all, that's what the database engine is designed for!). As such,
|
||||
each draw of the table will result in a new Ajax request being made to get the required data.</p>
|
||||
<p>Server-side processing is enabled by setting the <a href="//datatables.net/reference/option/serverSide"><code class="option" title=
|
||||
"DataTables initialisation option">serverSide</code></a> option to <code>true</code> and providing an Ajax data source through the <a href=
|
||||
"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option.</p>
|
||||
<p>This example shows a very simple table, matching the other client-side processing examples, but in this instance using server-side processing.</p>
|
||||
</div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
"processing": true,
|
||||
"serverSide": true,
|
||||
"ajax": "scripts/server_processing.php"
|
||||
} );
|
||||
} );</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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li><li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li></ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:</p>
|
||||
<code class="multiline language-css"></code>
|
||||
</div>
|
||||
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul><li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li></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>
|
||||
<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.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</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-attributes.html
|
||||
">HTML5 data-* attributes - cell data</a></li><li><a href="../advanced_init/html5-data-options.html
|
||||
">HTML5 data-* attributes - table options</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="../styling/index.html
|
||||
">Styling</a></h3><ul class="toc"><li><a href="../styling/display.html
|
||||
">Base style</a></li><li><a href="../styling/no-classes.html
|
||||
">Base style - no styling classes</a></li><li><a href="../styling/cell-border.html
|
||||
">Base style - cell borders</a></li><li><a href="../styling/compact.html
|
||||
">Base style - compact</a></li><li><a href="../styling/hover.html
|
||||
">Base style - hover</a></li><li><a href="../styling/order-column.html
|
||||
">Base style - order-column</a></li><li><a href="../styling/row-border.html
|
||||
">Base style - row borders</a></li><li><a href="../styling/stripe.html
|
||||
">Base style - stripe</a></li><li><a href="../styling/bootstrap.html
|
||||
">Bootstrap</a></li><li><a href="../styling/foundation.html
|
||||
">Foundation</a></li><li><a href="../styling/jqueryUI.html
|
||||
">jQuery UI ThemeRoller</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="./index.html
|
||||
">Server-side</a></h3><ul class="toc active"><li class="active"><a href="./simple.html
|
||||
">Server-side processing</a></li><li><a href="./custom_vars.html
|
||||
">Custom HTTP variables</a></li><li><a href="./post.html
|
||||
">POST data</a></li><li><a href="./ids.html
|
||||
">Automatic addition of row ID attributes</a></li><li><a href="./object_data.html
|
||||
">Object data source</a></li><li><a href="./row_details.html
|
||||
">Row details</a></li><li><a href="./select_rows.html
|
||||
">Row selection</a></li><li><a href="./jsonp.html
|
||||
">JSONP data source for remote domains</a></li><li><a href="./defer_loading.html
|
||||
">Deferred loading of data</a></li><li><a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.
|
||||
</p>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
</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>
|
||||
</body>
|
||||
</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-attributes.html">HTML5 data-* attributes - cell data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/display.html">Base style</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/no-classes.html">Base style - no styling classes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/cell-border.html">Base style - cell borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Base style - compact</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/hover.html">Base style - hover</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/order-column.html">Base style - order-column</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/row-border.html">Base style - row borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/stripe.html">Base style - stripe</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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="./index.html">Server-side</a></h3>
|
||||
<ul class="toc active">
|
||||
<li class="active">
|
||||
<a href="./simple.html">Server-side processing</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./custom_vars.html">Custom HTTP variables</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./post.html">POST data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./ids.html">Automatic addition of row ID attributes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./object_data.html">Object data source</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./row_details.html">Row details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./select_rows.html">Row selection</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./jsonp.html">JSONP data source for remote domains</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./defer_loading.html">Deferred loading of data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,60 +1,85 @@
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0" />
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"><link rel="stylesheet" type="text/css" href="../resources/demo.css">
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.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>
|
||||
<title>DataTables examples - Styling</title>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Styling</span></h1>
|
||||
<div class="info">
|
||||
<p>When using DataTables, you want your tables to fit in with your site / app to make the end user experience as seamless as possible. For this reason, DataTables provides an easy to customise core stylesheet, which has a number of features that you can enable or disable as you required. Additionally there are a number of integration packages which can be used to fit DataTables into a site which uses some of the popular CSS libraries such as Twitter Bootstrap and Foundation. Or of course you can craft your own CSS to fit it into your site perfectly!</p>
|
||||
|
||||
<p>This section includes examples of how DataTables can be styled using these methods.</p>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.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>
|
||||
<title>DataTables examples - Styling</title>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<div class="toc">
|
||||
<div class="toc-group"><h3><a href="./index.html
|
||||
">Styling</a></h3><ul class="toc"><li><a href="./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</a></li><li><a href="./foundation.html
|
||||
">Foundation</a></li><li><a href="./jqueryUI.html
|
||||
">jQuery UI ThemeRoller</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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<h1>DataTables example <span>Styling</span></h1>
|
||||
<div class="info">
|
||||
<p>When using DataTables, you want your tables to fit in with your site / app to make the end user experience as seamless as possible. For this reason, DataTables
|
||||
provides an easy to customise core stylesheet, which has a number of features that you can enable or disable as you required. Additionally there are a number of
|
||||
integration packages which can be used to fit DataTables into a site which uses some of the popular CSS libraries such as Twitter Bootstrap and Foundation. Or of
|
||||
course you can craft your own CSS to fit it into your site perfectly!</p>
|
||||
<p>This section includes examples of how DataTables can be styled using these methods.</p>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="./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</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./foundation.html">Foundation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./jqueryUI.html">jQuery UI ThemeRoller</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-2015<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
6
media/js/jquery.dataTables.js
vendored
6
media/js/jquery.dataTables.js
vendored
@ -34,10 +34,8 @@
|
||||
define( 'datatables', ['jquery'], factory );
|
||||
}
|
||||
else if ( typeof exports === 'object' ) {
|
||||
module.exports = function ($) {
|
||||
// Get jQuery if it wasn't passed in
|
||||
return factory( $ || require( 'jquery' ) );
|
||||
};
|
||||
// Node/CommonJS
|
||||
module.exports = factory( require( 'jquery' ) );
|
||||
}
|
||||
else if ( jQuery && !jQuery.fn.dataTable ) {
|
||||
// Define using browser globals otherwise
|
||||
|
||||
266
media/js/jquery.dataTables.min.js
vendored
266
media/js/jquery.dataTables.min.js
vendored
@ -2,163 +2,163 @@
|
||||
DataTables 1.10.10-dev
|
||||
©2008-2015 SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
(function(Fa,T,l){var S=function(g){function X(a){var b,c,d={};g.each(a,function(e){if((b=e.match(/^([^A-Z]+?)([A-Z])/))&&-1!=="a aa ai ao as b fn i m o s ".indexOf(b[1]+" "))c=e.replace(b[0],b[2].toLowerCase()),d[c]=e,"o"===b[1]&&X(a[e])});a._hungarianMap=d}function H(a,b,c){a._hungarianMap||X(a);var d;g.each(b,function(e){d=a._hungarianMap[e];if(d!==l&&(c||b[d]===l))"o"===d.charAt(0)?(b[d]||(b[d]={}),g.extend(!0,b[d],b[e]),H(a[d],b[d],c)):b[d]=b[e]})}function S(a){var b=k.defaults.oLanguage,c=a.sZeroRecords;
|
||||
(function(Fa,T,l){var S=function(h){function X(a){var b,c,d={};h.each(a,function(e){if((b=e.match(/^([^A-Z]+?)([A-Z])/))&&-1!=="a aa ai ao as b fn i m o s ".indexOf(b[1]+" "))c=e.replace(b[0],b[2].toLowerCase()),d[c]=e,"o"===b[1]&&X(a[e])});a._hungarianMap=d}function H(a,b,c){a._hungarianMap||X(a);var d;h.each(b,function(e){d=a._hungarianMap[e];if(d!==l&&(c||b[d]===l))"o"===d.charAt(0)?(b[d]||(b[d]={}),h.extend(!0,b[d],b[e]),H(a[d],b[d],c)):b[d]=b[e]})}function S(a){var b=k.defaults.oLanguage,c=a.sZeroRecords;
|
||||
!a.sEmptyTable&&(c&&"No data available in table"===b.sEmptyTable)&&E(a,a,"sZeroRecords","sEmptyTable");!a.sLoadingRecords&&(c&&"Loading..."===b.sLoadingRecords)&&E(a,a,"sZeroRecords","sLoadingRecords");a.sInfoThousands&&(a.sThousands=a.sInfoThousands);(a=a.sDecimal)&&cb(a)}function db(a){A(a,"ordering","bSort");A(a,"orderMulti","bSortMulti");A(a,"orderClasses","bSortClasses");A(a,"orderCellsTop","bSortCellsTop");A(a,"order","aaSorting");A(a,"orderFixed","aaSortingFixed");A(a,"paging","bPaginate");
|
||||
A(a,"pagingType","sPaginationType");A(a,"pageLength","iDisplayLength");A(a,"searching","bFilter");"boolean"===typeof a.sScrollX&&(a.sScrollX=a.sScrollX?"100%":"");"boolean"===typeof a.scrollX&&(a.scrollX=a.scrollX?"100%":"");if(a=a.aoSearchCols)for(var b=0,c=a.length;b<c;b++)a[b]&&H(k.models.oSearch,a[b])}function eb(a){A(a,"orderable","bSortable");A(a,"orderData","aDataSort");A(a,"orderSequence","asSorting");A(a,"orderDataType","sortDataType");var b=a.aDataSort;b&&!g.isArray(b)&&(a.aDataSort=[b])}
|
||||
function fb(a){if(!k.__browser){var b={};k.__browser=b;var c=g("<div/>").css({position:"fixed",top:0,left:0,height:1,width:1,overflow:"hidden"}).append(g("<div/>").css({position:"absolute",top:1,left:1,width:100,overflow:"scroll"}).append(g("<div/>").css({width:"100%",height:10}))).appendTo("body"),d=c.children(),e=d.children();b.barWidth=d[0].offsetWidth-d[0].clientWidth;b.bScrollOversize=100===e[0].offsetWidth&&100!==d[0].clientWidth;b.bScrollbarLeft=1!==Math.round(e.offset().left);b.bBounding=
|
||||
c[0].getBoundingClientRect().width?!0:!1;c.remove()}g.extend(a.oBrowser,k.__browser);a.oScroll.iBarWidth=k.__browser.barWidth}function gb(a,b,c,d,e,f){var h,i=!1;c!==l&&(h=c,i=!0);for(;d!==e;)a.hasOwnProperty(d)&&(h=i?b(h,a[d],d,a):a[d],i=!0,d+=f);return h}function Ga(a,b){var c=k.defaults.column,d=a.aoColumns.length,c=g.extend({},k.models.oColumn,c,{nTh:b?b:T.createElement("th"),sTitle:c.sTitle?c.sTitle:b?b.innerHTML:"",aDataSort:c.aDataSort?c.aDataSort:[d],mData:c.mData?c.mData:d,idx:d});a.aoColumns.push(c);
|
||||
c=a.aoPreSearchCols;c[d]=g.extend({},k.models.oSearch,c[d]);la(a,d,g(b).data())}function la(a,b,c){var b=a.aoColumns[b],d=a.oClasses,e=g(b.nTh);if(!b.sWidthOrig){b.sWidthOrig=e.attr("width")||null;var f=(e.attr("style")||"").match(/width:\s*(\d+[pxem%]+)/);f&&(b.sWidthOrig=f[1])}c!==l&&null!==c&&(eb(c),H(k.defaults.column,c),c.mDataProp!==l&&!c.mData&&(c.mData=c.mDataProp),c.sType&&(b._sManualType=c.sType),c.className&&!c.sClass&&(c.sClass=c.className),g.extend(b,c),E(b,c,"sWidth","sWidthOrig"),c.iDataSort!==
|
||||
l&&(b.aDataSort=[c.iDataSort]),E(b,c,"aDataSort"));var h=b.mData,i=P(h),j=b.mRender?P(b.mRender):null,c=function(a){return"string"===typeof a&&-1!==a.indexOf("@")};b._bAttrSrc=g.isPlainObject(h)&&(c(h.sort)||c(h.type)||c(h.filter));b.fnGetData=function(a,b,c){var d=i(a,b,l,c);return j&&b?j(d,b,a,c):d};b.fnSetData=function(a,b,c){return Q(h)(a,b,c)};"number"!==typeof h&&(a._rowReadObject=!0);a.oFeatures.bSort||(b.bSortable=!1,e.addClass(d.sSortableNone));a=-1!==g.inArray("asc",b.asSorting);c=-1!==
|
||||
g.inArray("desc",b.asSorting);!b.bSortable||!a&&!c?(b.sSortingClass=d.sSortableNone,b.sSortingClassJUI=""):a&&!c?(b.sSortingClass=d.sSortableAsc,b.sSortingClassJUI=d.sSortJUIAscAllowed):!a&&c?(b.sSortingClass=d.sSortableDesc,b.sSortingClassJUI=d.sSortJUIDescAllowed):(b.sSortingClass=d.sSortable,b.sSortingClassJUI=d.sSortJUI)}function Y(a){if(!1!==a.oFeatures.bAutoWidth){var b=a.aoColumns;Ha(a);for(var c=0,d=b.length;c<d;c++)b[c].nTh.style.width=b[c].sWidth}b=a.oScroll;(""!==b.sY||""!==b.sX)&&Z(a);
|
||||
w(a,null,"column-sizing",[a])}function $(a,b){var c=aa(a,"bVisible");return"number"===typeof c[b]?c[b]:null}function ba(a,b){var c=aa(a,"bVisible"),c=g.inArray(b,c);return-1!==c?c:null}function ca(a){return aa(a,"bVisible").length}function aa(a,b){var c=[];g.map(a.aoColumns,function(a,e){a[b]&&c.push(e)});return c}function Ia(a){var b=a.aoColumns,c=a.aoData,d=k.ext.type.detect,e,f,h,i,j,g,m,r,q;e=0;for(f=b.length;e<f;e++)if(m=b[e],q=[],!m.sType&&m._sManualType)m.sType=m._sManualType;else if(!m.sType){h=
|
||||
0;for(i=d.length;h<i;h++){j=0;for(g=c.length;j<g;j++){q[j]===l&&(q[j]=B(a,j,e,"type"));r=d[h](q[j],a);if(!r&&h!==d.length-1)break;if("html"===r)break}if(r){m.sType=r;break}}m.sType||(m.sType="string")}}function hb(a,b,c,d){var e,f,h,i,j,n,m=a.aoColumns;if(b)for(e=b.length-1;0<=e;e--){n=b[e];var r=n.targets!==l?n.targets:n.aTargets;g.isArray(r)||(r=[r]);f=0;for(h=r.length;f<h;f++)if("number"===typeof r[f]&&0<=r[f]){for(;m.length<=r[f];)Ga(a);d(r[f],n)}else if("number"===typeof r[f]&&0>r[f])d(m.length+
|
||||
r[f],n);else if("string"===typeof r[f]){i=0;for(j=m.length;i<j;i++)("_all"==r[f]||g(m[i].nTh).hasClass(r[f]))&&d(i,n)}}if(c){e=0;for(a=c.length;e<a;e++)d(e,c[e])}}function L(a,b,c,d){var e=a.aoData.length,f=g.extend(!0,{},k.models.oRow,{src:c?"dom":"data",idx:e});f._aData=b;a.aoData.push(f);for(var h=a.aoColumns,i=0,j=h.length;i<j;i++)h[i].sType=null;a.aiDisplayMaster.push(e);b=a.rowIdFn(b);b!==l&&(a.aIds[b]=f);(c||!a.oFeatures.bDeferRender)&&Ja(a,e,c,d);return e}function ma(a,b){var c;b instanceof
|
||||
g||(b=g(b));return b.map(function(b,e){c=Ka(a,e);return L(a,c.data,e,c.cells)})}function B(a,b,c,d){var e=a.iDraw,f=a.aoColumns[c],h=a.aoData[b]._aData,i=f.sDefaultContent,c=f.fnGetData(h,d,{settings:a,row:b,col:c});if(c===l)return a.iDrawError!=e&&null===i&&(I(a,0,"Requested unknown parameter "+("function"==typeof f.mData?"{function}":"'"+f.mData+"'")+" for row "+b,4),a.iDrawError=e),i;if((c===h||null===c)&&null!==i)c=i;else if("function"===typeof c)return c.call(h);return null===c&&"display"==d?
|
||||
"":c}function ib(a,b,c,d){a.aoColumns[c].fnSetData(a.aoData[b]._aData,d,{settings:a,row:b,col:c})}function La(a){return g.map(a.match(/(\\.|[^\.])+/g)||[""],function(a){return a.replace(/\\./g,".")})}function P(a){if(g.isPlainObject(a)){var b={};g.each(a,function(a,c){c&&(b[a]=P(c))});return function(a,c,f,h){var i=b[c]||b._;return i!==l?i(a,c,f,h):a}}if(null===a)return function(a){return a};if("function"===typeof a)return function(b,c,f,h){return a(b,c,f,h)};if("string"===typeof a&&(-1!==a.indexOf(".")||
|
||||
-1!==a.indexOf("[")||-1!==a.indexOf("("))){var c=function(a,b,f){var h,i;if(""!==f){i=La(f);for(var j=0,n=i.length;j<n;j++){f=i[j].match(da);h=i[j].match(U);if(f){i[j]=i[j].replace(da,"");""!==i[j]&&(a=a[i[j]]);h=[];i.splice(0,j+1);i=i.join(".");if(g.isArray(a)){j=0;for(n=a.length;j<n;j++)h.push(c(a[j],b,i))}a=f[0].substring(1,f[0].length-1);a=""===a?h:h.join(a);break}else if(h){i[j]=i[j].replace(U,"");a=a[i[j]]();continue}if(null===a||a[i[j]]===l)return l;a=a[i[j]]}}return a};return function(b,e){return c(b,
|
||||
e,a)}}return function(b){return b[a]}}function Q(a){if(g.isPlainObject(a))return Q(a._);if(null===a)return function(){};if("function"===typeof a)return function(b,d,e){a(b,"set",d,e)};if("string"===typeof a&&(-1!==a.indexOf(".")||-1!==a.indexOf("[")||-1!==a.indexOf("("))){var b=function(a,d,e){var e=La(e),f;f=e[e.length-1];for(var h,i,j=0,n=e.length-1;j<n;j++){h=e[j].match(da);i=e[j].match(U);if(h){e[j]=e[j].replace(da,"");a[e[j]]=[];f=e.slice();f.splice(0,j+1);h=f.join(".");if(g.isArray(d)){i=0;
|
||||
for(n=d.length;i<n;i++)f={},b(f,d[i],h),a[e[j]].push(f)}else a[e[j]]=d;return}i&&(e[j]=e[j].replace(U,""),a=a[e[j]](d));if(null===a[e[j]]||a[e[j]]===l)a[e[j]]={};a=a[e[j]]}if(f.match(U))a[f.replace(U,"")](d);else a[f.replace(da,"")]=d};return function(c,d){return b(c,d,a)}}return function(b,d){b[a]=d}}function Ma(a){return D(a.aoData,"_aData")}function na(a){a.aoData.length=0;a.aiDisplayMaster.length=0;a.aiDisplay.length=0;a.aIds={}}function oa(a,b,c){for(var d=-1,e=0,f=a.length;e<f;e++)a[e]==b?d=
|
||||
e:a[e]>b&&a[e]--; -1!=d&&c===l&&a.splice(d,1)}function ea(a,b,c,d){var e=a.aoData[b],f,h=function(c,d){for(;c.childNodes.length;)c.removeChild(c.firstChild);c.innerHTML=B(a,b,d,"display")};if("dom"===c||(!c||"auto"===c)&&"dom"===e.src)e._aData=Ka(a,e,d,d===l?l:e._aData).data;else{var i=e.anCells;if(i)if(d!==l)h(i[d],d);else{c=0;for(f=i.length;c<f;c++)h(i[c],c)}}e._aSortData=null;e._aFilterData=null;h=a.aoColumns;if(d!==l)h[d].sType=null;else{c=0;for(f=h.length;c<f;c++)h[c].sType=null;Na(a,e)}}function Ka(a,
|
||||
b,c,d){var e=[],f=b.firstChild,h,i,j=0,n,m=a.aoColumns,r=a._rowReadObject,d=d!==l?d:r?{}:[],q=function(a,b){if("string"===typeof a){var c=a.indexOf("@");-1!==c&&(c=a.substring(c+1),Q(a)(d,b.getAttribute(c)))}},J=function(a){if(c===l||c===j)i=m[j],n=g.trim(a.innerHTML),i&&i._bAttrSrc?(Q(i.mData._)(d,n),q(i.mData.sort,a),q(i.mData.type,a),q(i.mData.filter,a)):r?(i._setter||(i._setter=Q(i.mData)),i._setter(d,n)):d[j]=n;j++};if(f)for(;f;){h=f.nodeName.toUpperCase();if("TD"==h||"TH"==h)J(f),e.push(f);
|
||||
f=f.nextSibling}else{e=b.anCells;f=0;for(h=e.length;f<h;f++)J(e[f])}if(b=b.firstChild?b:b.nTr)(b=b.getAttribute("id"))&&Q(a.rowId)(d,b);return{data:d,cells:e}}function Ja(a,b,c,d){var e=a.aoData[b],f=e._aData,h=[],i,j,g,m,r;if(null===e.nTr){i=c||T.createElement("tr");e.nTr=i;e.anCells=h;i._DT_RowIndex=b;Na(a,e);m=0;for(r=a.aoColumns.length;m<r;m++){g=a.aoColumns[m];j=c?d[m]:T.createElement(g.sCellType);h.push(j);if(!c||g.mRender||g.mData!==m)j.innerHTML=B(a,b,m,"display");g.sClass&&(j.className+=
|
||||
" "+g.sClass);g.bVisible&&!c?i.appendChild(j):!g.bVisible&&c&&j.parentNode.removeChild(j);g.fnCreatedCell&&g.fnCreatedCell.call(a.oInstance,j,B(a,b,m),f,b,m)}w(a,"aoRowCreatedCallback",null,[i,f,b])}e.nTr.setAttribute("role","row")}function Na(a,b){var c=b.nTr,d=b._aData;if(c){var e=a.rowIdFn(d);e&&(c.id=e);d.DT_RowClass&&(e=d.DT_RowClass.split(" "),b.__rowc=b.__rowc?pa(b.__rowc.concat(e)):e,g(c).removeClass(b.__rowc.join(" ")).addClass(d.DT_RowClass));d.DT_RowAttr&&g(c).attr(d.DT_RowAttr);d.DT_RowData&&
|
||||
g(c).data(d.DT_RowData)}}function jb(a){var b,c,d,e,f,h=a.nTHead,i=a.nTFoot,j=0===g("th, td",h).length,n=a.oClasses,m=a.aoColumns;j&&(e=g("<tr/>").appendTo(h));b=0;for(c=m.length;b<c;b++)f=m[b],d=g(f.nTh).addClass(f.sClass),j&&d.appendTo(e),a.oFeatures.bSort&&(d.addClass(f.sSortingClass),!1!==f.bSortable&&(d.attr("tabindex",a.iTabIndex).attr("aria-controls",a.sTableId),Oa(a,f.nTh,b))),f.sTitle!=d[0].innerHTML&&d.html(f.sTitle),Pa(a,"header")(a,d,f,n);j&&fa(a.aoHeader,h);g(h).find(">tr").attr("role",
|
||||
"row");g(h).find(">tr>th, >tr>td").addClass(n.sHeaderTH);g(i).find(">tr>th, >tr>td").addClass(n.sFooterTH);if(null!==i){a=a.aoFooter[0];b=0;for(c=a.length;b<c;b++)f=m[b],f.nTf=a[b].cell,f.sClass&&g(f.nTf).addClass(f.sClass)}}function ga(a,b,c){var d,e,f,h=[],i=[],j=a.aoColumns.length,n;if(b){c===l&&(c=!1);d=0;for(e=b.length;d<e;d++){h[d]=b[d].slice();h[d].nTr=b[d].nTr;for(f=j-1;0<=f;f--)!a.aoColumns[f].bVisible&&!c&&h[d].splice(f,1);i.push([])}d=0;for(e=h.length;d<e;d++){if(a=h[d].nTr)for(;f=a.firstChild;)a.removeChild(f);
|
||||
f=0;for(b=h[d].length;f<b;f++)if(n=j=1,i[d][f]===l){a.appendChild(h[d][f].cell);for(i[d][f]=1;h[d+j]!==l&&h[d][f].cell==h[d+j][f].cell;)i[d+j][f]=1,j++;for(;h[d][f+n]!==l&&h[d][f].cell==h[d][f+n].cell;){for(c=0;c<j;c++)i[d+c][f+n]=1;n++}g(h[d][f].cell).attr("rowspan",j).attr("colspan",n)}}}}function M(a){var b=w(a,"aoPreDrawCallback","preDraw",[a]);if(-1!==g.inArray(!1,b))C(a,!1);else{var b=[],c=0,d=a.asStripeClasses,e=d.length,f=a.oLanguage,h=a.iInitDisplayStart,i="ssp"==y(a),j=a.aiDisplay;a.bDrawing=
|
||||
!0;h!==l&&-1!==h&&(a._iDisplayStart=i?h:h>=a.fnRecordsDisplay()?0:h,a.iInitDisplayStart=-1);var h=a._iDisplayStart,n=a.fnDisplayEnd();if(a.bDeferLoading)a.bDeferLoading=!1,a.iDraw++,C(a,!1);else if(i){if(!a.bDestroying&&!kb(a))return}else a.iDraw++;if(0!==j.length){f=i?a.aoData.length:n;for(i=i?0:h;i<f;i++){var m=j[i],r=a.aoData[m];null===r.nTr&&Ja(a,m);m=r.nTr;if(0!==e){var q=d[c%e];r._sRowStripe!=q&&(g(m).removeClass(r._sRowStripe).addClass(q),r._sRowStripe=q)}w(a,"aoRowCallback",null,[m,r._aData,
|
||||
c,i]);b.push(m);c++}}else c=f.sZeroRecords,1==a.iDraw&&"ajax"==y(a)?c=f.sLoadingRecords:f.sEmptyTable&&0===a.fnRecordsTotal()&&(c=f.sEmptyTable),b[0]=g("<tr/>",{"class":e?d[0]:""}).append(g("<td />",{valign:"top",colSpan:ca(a),"class":a.oClasses.sRowEmpty}).html(c))[0];w(a,"aoHeaderCallback","header",[g(a.nTHead).children("tr")[0],Ma(a),h,n,j]);w(a,"aoFooterCallback","footer",[g(a.nTFoot).children("tr")[0],Ma(a),h,n,j]);d=g(a.nTBody);d.children().detach();d.append(g(b));w(a,"aoDrawCallback","draw",
|
||||
[a]);a.bSorted=!1;a.bFiltered=!1;a.bDrawing=!1}}function R(a,b){var c=a.oFeatures,d=c.bFilter;c.bSort&&lb(a);d?ha(a,a.oPreviousSearch):a.aiDisplay=a.aiDisplayMaster.slice();!0!==b&&(a._iDisplayStart=0);a._drawHold=b;M(a);a._drawHold=!1}function mb(a){var b=a.oClasses,c=g(a.nTable),c=g("<div/>").insertBefore(c),d=a.oFeatures,e=g("<div/>",{id:a.sTableId+"_wrapper","class":b.sWrapper+(a.nTFoot?"":" "+b.sNoFooter)});a.nHolding=c[0];a.nTableWrapper=e[0];a.nTableReinsertBefore=a.nTable.nextSibling;for(var f=
|
||||
a.sDom.split(""),h,i,j,n,m,r,q=0;q<f.length;q++){h=null;i=f[q];if("<"==i){j=g("<div/>")[0];n=f[q+1];if("'"==n||'"'==n){m="";for(r=2;f[q+r]!=n;)m+=f[q+r],r++;"H"==m?m=b.sJUIHeader:"F"==m&&(m=b.sJUIFooter);-1!=m.indexOf(".")?(n=m.split("."),j.id=n[0].substr(1,n[0].length-1),j.className=n[1]):"#"==m.charAt(0)?j.id=m.substr(1,m.length-1):j.className=m;q+=r}e.append(j);e=g(j)}else if(">"==i)e=e.parent();else if("l"==i&&d.bPaginate&&d.bLengthChange)h=nb(a);else if("f"==i&&d.bFilter)h=ob(a);else if("r"==
|
||||
i&&d.bProcessing)h=pb(a);else if("t"==i)h=qb(a);else if("i"==i&&d.bInfo)h=rb(a);else if("p"==i&&d.bPaginate)h=sb(a);else if(0!==k.ext.feature.length){j=k.ext.feature;r=0;for(n=j.length;r<n;r++)if(i==j[r].cFeature){h=j[r].fnInit(a);break}}h&&(j=a.aanFeatures,j[i]||(j[i]=[]),j[i].push(h),e.append(h))}c.replaceWith(e);a.nHolding=null}function fa(a,b){var c=g(b).children("tr"),d,e,f,h,i,j,n,m,r,q;a.splice(0,a.length);f=0;for(j=c.length;f<j;f++)a.push([]);f=0;for(j=c.length;f<j;f++){d=c[f];for(e=d.firstChild;e;){if("TD"==
|
||||
e.nodeName.toUpperCase()||"TH"==e.nodeName.toUpperCase()){m=1*e.getAttribute("colspan");r=1*e.getAttribute("rowspan");m=!m||0===m||1===m?1:m;r=!r||0===r||1===r?1:r;h=0;for(i=a[f];i[h];)h++;n=h;q=1===m?!0:!1;for(i=0;i<m;i++)for(h=0;h<r;h++)a[f+h][n+i]={cell:e,unique:q},a[f+h].nTr=d}e=e.nextSibling}}}function qa(a,b,c){var d=[];c||(c=a.aoHeader,b&&(c=[],fa(c,b)));for(var b=0,e=c.length;b<e;b++)for(var f=0,h=c[b].length;f<h;f++)if(c[b][f].unique&&(!d[f]||!a.bSortCellsTop))d[f]=c[b][f].cell;return d}
|
||||
function ra(a,b,c){w(a,"aoServerParams","serverParams",[b]);if(b&&g.isArray(b)){var d={},e=/(.*?)\[\]$/;g.each(b,function(a,b){var c=b.name.match(e);c?(c=c[0],d[c]||(d[c]=[]),d[c].push(b.value)):d[b.name]=b.value});b=d}var f,h=a.ajax,i=a.oInstance,j=function(b){w(a,null,"xhr",[a,b,a.jqXHR]);c(b)};if(g.isPlainObject(h)&&h.data){f=h.data;var n=g.isFunction(f)?f(b,a):f,b=g.isFunction(f)&&n?n:g.extend(!0,b,n);delete h.data}n={data:b,success:function(b){var c=b.error||b.sError;c&&I(a,0,c);a.json=b;j(b)},
|
||||
dataType:"json",cache:!1,type:a.sServerMethod,error:function(b,c){var d=w(a,null,"xhr",[a,null,a.jqXHR]);-1===g.inArray(!0,d)&&("parsererror"==c?I(a,0,"Invalid JSON response",1):4===b.readyState&&I(a,0,"Ajax error",7));C(a,!1)}};a.oAjaxData=b;w(a,null,"preXhr",[a,b]);a.fnServerData?a.fnServerData.call(i,a.sAjaxSource,g.map(b,function(a,b){return{name:b,value:a}}),j,a):a.sAjaxSource||"string"===typeof h?a.jqXHR=g.ajax(g.extend(n,{url:h||a.sAjaxSource})):g.isFunction(h)?a.jqXHR=h.call(i,b,j,a):(a.jqXHR=
|
||||
g.ajax(g.extend(n,h)),h.data=f)}function kb(a){return a.bAjaxDataGet?(a.iDraw++,C(a,!0),ra(a,tb(a),function(b){ub(a,b)}),!1):!0}function tb(a){var b=a.aoColumns,c=b.length,d=a.oFeatures,e=a.oPreviousSearch,f=a.aoPreSearchCols,h,i=[],j,n,m,l=V(a);h=a._iDisplayStart;j=!1!==d.bPaginate?a._iDisplayLength:-1;var q=function(a,b){i.push({name:a,value:b})};q("sEcho",a.iDraw);q("iColumns",c);q("sColumns",D(b,"sName").join(","));q("iDisplayStart",h);q("iDisplayLength",j);var J={draw:a.iDraw,columns:[],order:[],
|
||||
start:h,length:j,search:{value:e.sSearch,regex:e.bRegex}};for(h=0;h<c;h++)n=b[h],m=f[h],j="function"==typeof n.mData?"function":n.mData,J.columns.push({data:j,name:n.sName,searchable:n.bSearchable,orderable:n.bSortable,search:{value:m.sSearch,regex:m.bRegex}}),q("mDataProp_"+h,j),d.bFilter&&(q("sSearch_"+h,m.sSearch),q("bRegex_"+h,m.bRegex),q("bSearchable_"+h,n.bSearchable)),d.bSort&&q("bSortable_"+h,n.bSortable);d.bFilter&&(q("sSearch",e.sSearch),q("bRegex",e.bRegex));d.bSort&&(g.each(l,function(a,
|
||||
A(a,"pagingType","sPaginationType");A(a,"pageLength","iDisplayLength");A(a,"searching","bFilter");"boolean"===typeof a.sScrollX&&(a.sScrollX=a.sScrollX?"100%":"");"boolean"===typeof a.scrollX&&(a.scrollX=a.scrollX?"100%":"");if(a=a.aoSearchCols)for(var b=0,c=a.length;b<c;b++)a[b]&&H(k.models.oSearch,a[b])}function eb(a){A(a,"orderable","bSortable");A(a,"orderData","aDataSort");A(a,"orderSequence","asSorting");A(a,"orderDataType","sortDataType");var b=a.aDataSort;b&&!h.isArray(b)&&(a.aDataSort=[b])}
|
||||
function fb(a){if(!k.__browser){var b={};k.__browser=b;var c=h("<div/>").css({position:"fixed",top:0,left:0,height:1,width:1,overflow:"hidden"}).append(h("<div/>").css({position:"absolute",top:1,left:1,width:100,overflow:"scroll"}).append(h("<div/>").css({width:"100%",height:10}))).appendTo("body"),d=c.children(),e=d.children();b.barWidth=d[0].offsetWidth-d[0].clientWidth;b.bScrollOversize=100===e[0].offsetWidth&&100!==d[0].clientWidth;b.bScrollbarLeft=1!==Math.round(e.offset().left);b.bBounding=
|
||||
c[0].getBoundingClientRect().width?!0:!1;c.remove()}h.extend(a.oBrowser,k.__browser);a.oScroll.iBarWidth=k.__browser.barWidth}function gb(a,b,c,d,e,f){var g,i=!1;c!==l&&(g=c,i=!0);for(;d!==e;)a.hasOwnProperty(d)&&(g=i?b(g,a[d],d,a):a[d],i=!0,d+=f);return g}function Ga(a,b){var c=k.defaults.column,d=a.aoColumns.length,c=h.extend({},k.models.oColumn,c,{nTh:b?b:T.createElement("th"),sTitle:c.sTitle?c.sTitle:b?b.innerHTML:"",aDataSort:c.aDataSort?c.aDataSort:[d],mData:c.mData?c.mData:d,idx:d});a.aoColumns.push(c);
|
||||
c=a.aoPreSearchCols;c[d]=h.extend({},k.models.oSearch,c[d]);la(a,d,h(b).data())}function la(a,b,c){var b=a.aoColumns[b],d=a.oClasses,e=h(b.nTh);if(!b.sWidthOrig){b.sWidthOrig=e.attr("width")||null;var f=(e.attr("style")||"").match(/width:\s*(\d+[pxem%]+)/);f&&(b.sWidthOrig=f[1])}c!==l&&null!==c&&(eb(c),H(k.defaults.column,c),c.mDataProp!==l&&!c.mData&&(c.mData=c.mDataProp),c.sType&&(b._sManualType=c.sType),c.className&&!c.sClass&&(c.sClass=c.className),h.extend(b,c),E(b,c,"sWidth","sWidthOrig"),c.iDataSort!==
|
||||
l&&(b.aDataSort=[c.iDataSort]),E(b,c,"aDataSort"));var g=b.mData,i=P(g),j=b.mRender?P(b.mRender):null,c=function(a){return"string"===typeof a&&-1!==a.indexOf("@")};b._bAttrSrc=h.isPlainObject(g)&&(c(g.sort)||c(g.type)||c(g.filter));b.fnGetData=function(a,b,c){var d=i(a,b,l,c);return j&&b?j(d,b,a,c):d};b.fnSetData=function(a,b,c){return Q(g)(a,b,c)};"number"!==typeof g&&(a._rowReadObject=!0);a.oFeatures.bSort||(b.bSortable=!1,e.addClass(d.sSortableNone));a=-1!==h.inArray("asc",b.asSorting);c=-1!==
|
||||
h.inArray("desc",b.asSorting);!b.bSortable||!a&&!c?(b.sSortingClass=d.sSortableNone,b.sSortingClassJUI=""):a&&!c?(b.sSortingClass=d.sSortableAsc,b.sSortingClassJUI=d.sSortJUIAscAllowed):!a&&c?(b.sSortingClass=d.sSortableDesc,b.sSortingClassJUI=d.sSortJUIDescAllowed):(b.sSortingClass=d.sSortable,b.sSortingClassJUI=d.sSortJUI)}function Y(a){if(!1!==a.oFeatures.bAutoWidth){var b=a.aoColumns;Ha(a);for(var c=0,d=b.length;c<d;c++)b[c].nTh.style.width=b[c].sWidth}b=a.oScroll;(""!==b.sY||""!==b.sX)&&Z(a);
|
||||
w(a,null,"column-sizing",[a])}function $(a,b){var c=aa(a,"bVisible");return"number"===typeof c[b]?c[b]:null}function ba(a,b){var c=aa(a,"bVisible"),c=h.inArray(b,c);return-1!==c?c:null}function ca(a){return aa(a,"bVisible").length}function aa(a,b){var c=[];h.map(a.aoColumns,function(a,e){a[b]&&c.push(e)});return c}function Ia(a){var b=a.aoColumns,c=a.aoData,d=k.ext.type.detect,e,f,g,i,j,h,m,r,q;e=0;for(f=b.length;e<f;e++)if(m=b[e],q=[],!m.sType&&m._sManualType)m.sType=m._sManualType;else if(!m.sType){g=
|
||||
0;for(i=d.length;g<i;g++){j=0;for(h=c.length;j<h;j++){q[j]===l&&(q[j]=B(a,j,e,"type"));r=d[g](q[j],a);if(!r&&g!==d.length-1)break;if("html"===r)break}if(r){m.sType=r;break}}m.sType||(m.sType="string")}}function hb(a,b,c,d){var e,f,g,i,j,n,m=a.aoColumns;if(b)for(e=b.length-1;0<=e;e--){n=b[e];var r=n.targets!==l?n.targets:n.aTargets;h.isArray(r)||(r=[r]);f=0;for(g=r.length;f<g;f++)if("number"===typeof r[f]&&0<=r[f]){for(;m.length<=r[f];)Ga(a);d(r[f],n)}else if("number"===typeof r[f]&&0>r[f])d(m.length+
|
||||
r[f],n);else if("string"===typeof r[f]){i=0;for(j=m.length;i<j;i++)("_all"==r[f]||h(m[i].nTh).hasClass(r[f]))&&d(i,n)}}if(c){e=0;for(a=c.length;e<a;e++)d(e,c[e])}}function L(a,b,c,d){var e=a.aoData.length,f=h.extend(!0,{},k.models.oRow,{src:c?"dom":"data",idx:e});f._aData=b;a.aoData.push(f);for(var g=a.aoColumns,i=0,j=g.length;i<j;i++)g[i].sType=null;a.aiDisplayMaster.push(e);b=a.rowIdFn(b);b!==l&&(a.aIds[b]=f);(c||!a.oFeatures.bDeferRender)&&Ja(a,e,c,d);return e}function ma(a,b){var c;b instanceof
|
||||
h||(b=h(b));return b.map(function(b,e){c=Ka(a,e);return L(a,c.data,e,c.cells)})}function B(a,b,c,d){var e=a.iDraw,f=a.aoColumns[c],g=a.aoData[b]._aData,i=f.sDefaultContent,c=f.fnGetData(g,d,{settings:a,row:b,col:c});if(c===l)return a.iDrawError!=e&&null===i&&(I(a,0,"Requested unknown parameter "+("function"==typeof f.mData?"{function}":"'"+f.mData+"'")+" for row "+b,4),a.iDrawError=e),i;if((c===g||null===c)&&null!==i)c=i;else if("function"===typeof c)return c.call(g);return null===c&&"display"==d?
|
||||
"":c}function ib(a,b,c,d){a.aoColumns[c].fnSetData(a.aoData[b]._aData,d,{settings:a,row:b,col:c})}function La(a){return h.map(a.match(/(\\.|[^\.])+/g)||[""],function(a){return a.replace(/\\./g,".")})}function P(a){if(h.isPlainObject(a)){var b={};h.each(a,function(a,c){c&&(b[a]=P(c))});return function(a,c,f,g){var i=b[c]||b._;return i!==l?i(a,c,f,g):a}}if(null===a)return function(a){return a};if("function"===typeof a)return function(b,c,f,g){return a(b,c,f,g)};if("string"===typeof a&&(-1!==a.indexOf(".")||
|
||||
-1!==a.indexOf("[")||-1!==a.indexOf("("))){var c=function(a,b,f){var g,i;if(""!==f){i=La(f);for(var j=0,n=i.length;j<n;j++){f=i[j].match(da);g=i[j].match(U);if(f){i[j]=i[j].replace(da,"");""!==i[j]&&(a=a[i[j]]);g=[];i.splice(0,j+1);i=i.join(".");if(h.isArray(a)){j=0;for(n=a.length;j<n;j++)g.push(c(a[j],b,i))}a=f[0].substring(1,f[0].length-1);a=""===a?g:g.join(a);break}else if(g){i[j]=i[j].replace(U,"");a=a[i[j]]();continue}if(null===a||a[i[j]]===l)return l;a=a[i[j]]}}return a};return function(b,e){return c(b,
|
||||
e,a)}}return function(b){return b[a]}}function Q(a){if(h.isPlainObject(a))return Q(a._);if(null===a)return function(){};if("function"===typeof a)return function(b,d,e){a(b,"set",d,e)};if("string"===typeof a&&(-1!==a.indexOf(".")||-1!==a.indexOf("[")||-1!==a.indexOf("("))){var b=function(a,d,e){var e=La(e),f;f=e[e.length-1];for(var g,i,j=0,n=e.length-1;j<n;j++){g=e[j].match(da);i=e[j].match(U);if(g){e[j]=e[j].replace(da,"");a[e[j]]=[];f=e.slice();f.splice(0,j+1);g=f.join(".");if(h.isArray(d)){i=0;
|
||||
for(n=d.length;i<n;i++)f={},b(f,d[i],g),a[e[j]].push(f)}else a[e[j]]=d;return}i&&(e[j]=e[j].replace(U,""),a=a[e[j]](d));if(null===a[e[j]]||a[e[j]]===l)a[e[j]]={};a=a[e[j]]}if(f.match(U))a[f.replace(U,"")](d);else a[f.replace(da,"")]=d};return function(c,d){return b(c,d,a)}}return function(b,d){b[a]=d}}function Ma(a){return D(a.aoData,"_aData")}function na(a){a.aoData.length=0;a.aiDisplayMaster.length=0;a.aiDisplay.length=0;a.aIds={}}function oa(a,b,c){for(var d=-1,e=0,f=a.length;e<f;e++)a[e]==b?d=
|
||||
e:a[e]>b&&a[e]--; -1!=d&&c===l&&a.splice(d,1)}function ea(a,b,c,d){var e=a.aoData[b],f,g=function(c,d){for(;c.childNodes.length;)c.removeChild(c.firstChild);c.innerHTML=B(a,b,d,"display")};if("dom"===c||(!c||"auto"===c)&&"dom"===e.src)e._aData=Ka(a,e,d,d===l?l:e._aData).data;else{var i=e.anCells;if(i)if(d!==l)g(i[d],d);else{c=0;for(f=i.length;c<f;c++)g(i[c],c)}}e._aSortData=null;e._aFilterData=null;g=a.aoColumns;if(d!==l)g[d].sType=null;else{c=0;for(f=g.length;c<f;c++)g[c].sType=null;Na(a,e)}}function Ka(a,
|
||||
b,c,d){var e=[],f=b.firstChild,g,i,j=0,n,m=a.aoColumns,r=a._rowReadObject,d=d!==l?d:r?{}:[],q=function(a,b){if("string"===typeof a){var c=a.indexOf("@");-1!==c&&(c=a.substring(c+1),Q(a)(d,b.getAttribute(c)))}},J=function(a){if(c===l||c===j)i=m[j],n=h.trim(a.innerHTML),i&&i._bAttrSrc?(Q(i.mData._)(d,n),q(i.mData.sort,a),q(i.mData.type,a),q(i.mData.filter,a)):r?(i._setter||(i._setter=Q(i.mData)),i._setter(d,n)):d[j]=n;j++};if(f)for(;f;){g=f.nodeName.toUpperCase();if("TD"==g||"TH"==g)J(f),e.push(f);
|
||||
f=f.nextSibling}else{e=b.anCells;f=0;for(g=e.length;f<g;f++)J(e[f])}if(b=b.firstChild?b:b.nTr)(b=b.getAttribute("id"))&&Q(a.rowId)(d,b);return{data:d,cells:e}}function Ja(a,b,c,d){var e=a.aoData[b],f=e._aData,g=[],i,j,h,m,r;if(null===e.nTr){i=c||T.createElement("tr");e.nTr=i;e.anCells=g;i._DT_RowIndex=b;Na(a,e);m=0;for(r=a.aoColumns.length;m<r;m++){h=a.aoColumns[m];j=c?d[m]:T.createElement(h.sCellType);g.push(j);if(!c||h.mRender||h.mData!==m)j.innerHTML=B(a,b,m,"display");h.sClass&&(j.className+=
|
||||
" "+h.sClass);h.bVisible&&!c?i.appendChild(j):!h.bVisible&&c&&j.parentNode.removeChild(j);h.fnCreatedCell&&h.fnCreatedCell.call(a.oInstance,j,B(a,b,m),f,b,m)}w(a,"aoRowCreatedCallback",null,[i,f,b])}e.nTr.setAttribute("role","row")}function Na(a,b){var c=b.nTr,d=b._aData;if(c){var e=a.rowIdFn(d);e&&(c.id=e);d.DT_RowClass&&(e=d.DT_RowClass.split(" "),b.__rowc=b.__rowc?pa(b.__rowc.concat(e)):e,h(c).removeClass(b.__rowc.join(" ")).addClass(d.DT_RowClass));d.DT_RowAttr&&h(c).attr(d.DT_RowAttr);d.DT_RowData&&
|
||||
h(c).data(d.DT_RowData)}}function jb(a){var b,c,d,e,f,g=a.nTHead,i=a.nTFoot,j=0===h("th, td",g).length,n=a.oClasses,m=a.aoColumns;j&&(e=h("<tr/>").appendTo(g));b=0;for(c=m.length;b<c;b++)f=m[b],d=h(f.nTh).addClass(f.sClass),j&&d.appendTo(e),a.oFeatures.bSort&&(d.addClass(f.sSortingClass),!1!==f.bSortable&&(d.attr("tabindex",a.iTabIndex).attr("aria-controls",a.sTableId),Oa(a,f.nTh,b))),f.sTitle!=d[0].innerHTML&&d.html(f.sTitle),Pa(a,"header")(a,d,f,n);j&&fa(a.aoHeader,g);h(g).find(">tr").attr("role",
|
||||
"row");h(g).find(">tr>th, >tr>td").addClass(n.sHeaderTH);h(i).find(">tr>th, >tr>td").addClass(n.sFooterTH);if(null!==i){a=a.aoFooter[0];b=0;for(c=a.length;b<c;b++)f=m[b],f.nTf=a[b].cell,f.sClass&&h(f.nTf).addClass(f.sClass)}}function ga(a,b,c){var d,e,f,g=[],i=[],j=a.aoColumns.length,n;if(b){c===l&&(c=!1);d=0;for(e=b.length;d<e;d++){g[d]=b[d].slice();g[d].nTr=b[d].nTr;for(f=j-1;0<=f;f--)!a.aoColumns[f].bVisible&&!c&&g[d].splice(f,1);i.push([])}d=0;for(e=g.length;d<e;d++){if(a=g[d].nTr)for(;f=a.firstChild;)a.removeChild(f);
|
||||
f=0;for(b=g[d].length;f<b;f++)if(n=j=1,i[d][f]===l){a.appendChild(g[d][f].cell);for(i[d][f]=1;g[d+j]!==l&&g[d][f].cell==g[d+j][f].cell;)i[d+j][f]=1,j++;for(;g[d][f+n]!==l&&g[d][f].cell==g[d][f+n].cell;){for(c=0;c<j;c++)i[d+c][f+n]=1;n++}h(g[d][f].cell).attr("rowspan",j).attr("colspan",n)}}}}function M(a){var b=w(a,"aoPreDrawCallback","preDraw",[a]);if(-1!==h.inArray(!1,b))C(a,!1);else{var b=[],c=0,d=a.asStripeClasses,e=d.length,f=a.oLanguage,g=a.iInitDisplayStart,i="ssp"==y(a),j=a.aiDisplay;a.bDrawing=
|
||||
!0;g!==l&&-1!==g&&(a._iDisplayStart=i?g:g>=a.fnRecordsDisplay()?0:g,a.iInitDisplayStart=-1);var g=a._iDisplayStart,n=a.fnDisplayEnd();if(a.bDeferLoading)a.bDeferLoading=!1,a.iDraw++,C(a,!1);else if(i){if(!a.bDestroying&&!kb(a))return}else a.iDraw++;if(0!==j.length){f=i?a.aoData.length:n;for(i=i?0:g;i<f;i++){var m=j[i],r=a.aoData[m];null===r.nTr&&Ja(a,m);m=r.nTr;if(0!==e){var q=d[c%e];r._sRowStripe!=q&&(h(m).removeClass(r._sRowStripe).addClass(q),r._sRowStripe=q)}w(a,"aoRowCallback",null,[m,r._aData,
|
||||
c,i]);b.push(m);c++}}else c=f.sZeroRecords,1==a.iDraw&&"ajax"==y(a)?c=f.sLoadingRecords:f.sEmptyTable&&0===a.fnRecordsTotal()&&(c=f.sEmptyTable),b[0]=h("<tr/>",{"class":e?d[0]:""}).append(h("<td />",{valign:"top",colSpan:ca(a),"class":a.oClasses.sRowEmpty}).html(c))[0];w(a,"aoHeaderCallback","header",[h(a.nTHead).children("tr")[0],Ma(a),g,n,j]);w(a,"aoFooterCallback","footer",[h(a.nTFoot).children("tr")[0],Ma(a),g,n,j]);d=h(a.nTBody);d.children().detach();d.append(h(b));w(a,"aoDrawCallback","draw",
|
||||
[a]);a.bSorted=!1;a.bFiltered=!1;a.bDrawing=!1}}function R(a,b){var c=a.oFeatures,d=c.bFilter;c.bSort&&lb(a);d?ha(a,a.oPreviousSearch):a.aiDisplay=a.aiDisplayMaster.slice();!0!==b&&(a._iDisplayStart=0);a._drawHold=b;M(a);a._drawHold=!1}function mb(a){var b=a.oClasses,c=h(a.nTable),c=h("<div/>").insertBefore(c),d=a.oFeatures,e=h("<div/>",{id:a.sTableId+"_wrapper","class":b.sWrapper+(a.nTFoot?"":" "+b.sNoFooter)});a.nHolding=c[0];a.nTableWrapper=e[0];a.nTableReinsertBefore=a.nTable.nextSibling;for(var f=
|
||||
a.sDom.split(""),g,i,j,n,m,r,q=0;q<f.length;q++){g=null;i=f[q];if("<"==i){j=h("<div/>")[0];n=f[q+1];if("'"==n||'"'==n){m="";for(r=2;f[q+r]!=n;)m+=f[q+r],r++;"H"==m?m=b.sJUIHeader:"F"==m&&(m=b.sJUIFooter);-1!=m.indexOf(".")?(n=m.split("."),j.id=n[0].substr(1,n[0].length-1),j.className=n[1]):"#"==m.charAt(0)?j.id=m.substr(1,m.length-1):j.className=m;q+=r}e.append(j);e=h(j)}else if(">"==i)e=e.parent();else if("l"==i&&d.bPaginate&&d.bLengthChange)g=nb(a);else if("f"==i&&d.bFilter)g=ob(a);else if("r"==
|
||||
i&&d.bProcessing)g=pb(a);else if("t"==i)g=qb(a);else if("i"==i&&d.bInfo)g=rb(a);else if("p"==i&&d.bPaginate)g=sb(a);else if(0!==k.ext.feature.length){j=k.ext.feature;r=0;for(n=j.length;r<n;r++)if(i==j[r].cFeature){g=j[r].fnInit(a);break}}g&&(j=a.aanFeatures,j[i]||(j[i]=[]),j[i].push(g),e.append(g))}c.replaceWith(e);a.nHolding=null}function fa(a,b){var c=h(b).children("tr"),d,e,f,g,i,j,n,m,r,q;a.splice(0,a.length);f=0;for(j=c.length;f<j;f++)a.push([]);f=0;for(j=c.length;f<j;f++){d=c[f];for(e=d.firstChild;e;){if("TD"==
|
||||
e.nodeName.toUpperCase()||"TH"==e.nodeName.toUpperCase()){m=1*e.getAttribute("colspan");r=1*e.getAttribute("rowspan");m=!m||0===m||1===m?1:m;r=!r||0===r||1===r?1:r;g=0;for(i=a[f];i[g];)g++;n=g;q=1===m?!0:!1;for(i=0;i<m;i++)for(g=0;g<r;g++)a[f+g][n+i]={cell:e,unique:q},a[f+g].nTr=d}e=e.nextSibling}}}function qa(a,b,c){var d=[];c||(c=a.aoHeader,b&&(c=[],fa(c,b)));for(var b=0,e=c.length;b<e;b++)for(var f=0,g=c[b].length;f<g;f++)if(c[b][f].unique&&(!d[f]||!a.bSortCellsTop))d[f]=c[b][f].cell;return d}
|
||||
function ra(a,b,c){w(a,"aoServerParams","serverParams",[b]);if(b&&h.isArray(b)){var d={},e=/(.*?)\[\]$/;h.each(b,function(a,b){var c=b.name.match(e);c?(c=c[0],d[c]||(d[c]=[]),d[c].push(b.value)):d[b.name]=b.value});b=d}var f,g=a.ajax,i=a.oInstance,j=function(b){w(a,null,"xhr",[a,b,a.jqXHR]);c(b)};if(h.isPlainObject(g)&&g.data){f=g.data;var n=h.isFunction(f)?f(b,a):f,b=h.isFunction(f)&&n?n:h.extend(!0,b,n);delete g.data}n={data:b,success:function(b){var c=b.error||b.sError;c&&I(a,0,c);a.json=b;j(b)},
|
||||
dataType:"json",cache:!1,type:a.sServerMethod,error:function(b,c){var d=w(a,null,"xhr",[a,null,a.jqXHR]);-1===h.inArray(!0,d)&&("parsererror"==c?I(a,0,"Invalid JSON response",1):4===b.readyState&&I(a,0,"Ajax error",7));C(a,!1)}};a.oAjaxData=b;w(a,null,"preXhr",[a,b]);a.fnServerData?a.fnServerData.call(i,a.sAjaxSource,h.map(b,function(a,b){return{name:b,value:a}}),j,a):a.sAjaxSource||"string"===typeof g?a.jqXHR=h.ajax(h.extend(n,{url:g||a.sAjaxSource})):h.isFunction(g)?a.jqXHR=g.call(i,b,j,a):(a.jqXHR=
|
||||
h.ajax(h.extend(n,g)),g.data=f)}function kb(a){return a.bAjaxDataGet?(a.iDraw++,C(a,!0),ra(a,tb(a),function(b){ub(a,b)}),!1):!0}function tb(a){var b=a.aoColumns,c=b.length,d=a.oFeatures,e=a.oPreviousSearch,f=a.aoPreSearchCols,g,i=[],j,n,m,l=V(a);g=a._iDisplayStart;j=!1!==d.bPaginate?a._iDisplayLength:-1;var q=function(a,b){i.push({name:a,value:b})};q("sEcho",a.iDraw);q("iColumns",c);q("sColumns",D(b,"sName").join(","));q("iDisplayStart",g);q("iDisplayLength",j);var J={draw:a.iDraw,columns:[],order:[],
|
||||
start:g,length:j,search:{value:e.sSearch,regex:e.bRegex}};for(g=0;g<c;g++)n=b[g],m=f[g],j="function"==typeof n.mData?"function":n.mData,J.columns.push({data:j,name:n.sName,searchable:n.bSearchable,orderable:n.bSortable,search:{value:m.sSearch,regex:m.bRegex}}),q("mDataProp_"+g,j),d.bFilter&&(q("sSearch_"+g,m.sSearch),q("bRegex_"+g,m.bRegex),q("bSearchable_"+g,n.bSearchable)),d.bSort&&q("bSortable_"+g,n.bSortable);d.bFilter&&(q("sSearch",e.sSearch),q("bRegex",e.bRegex));d.bSort&&(h.each(l,function(a,
|
||||
b){J.order.push({column:b.col,dir:b.dir});q("iSortCol_"+a,b.col);q("sSortDir_"+a,b.dir)}),q("iSortingCols",l.length));b=k.ext.legacy.ajax;return null===b?a.sAjaxSource?i:J:b?i:J}function ub(a,b){var c=sa(a,b),d=b.sEcho!==l?b.sEcho:b.draw,e=b.iTotalRecords!==l?b.iTotalRecords:b.recordsTotal,f=b.iTotalDisplayRecords!==l?b.iTotalDisplayRecords:b.recordsFiltered;if(d){if(1*d<a.iDraw)return;a.iDraw=1*d}na(a);a._iRecordsTotal=parseInt(e,10);a._iRecordsDisplay=parseInt(f,10);d=0;for(e=c.length;d<e;d++)L(a,
|
||||
c[d]);a.aiDisplay=a.aiDisplayMaster.slice();a.bAjaxDataGet=!1;M(a);a._bInitComplete||ta(a,b);a.bAjaxDataGet=!0;C(a,!1)}function sa(a,b){var c=g.isPlainObject(a.ajax)&&a.ajax.dataSrc!==l?a.ajax.dataSrc:a.sAjaxDataProp;return"data"===c?b.aaData||b[c]:""!==c?P(c)(b):b}function ob(a){var b=a.oClasses,c=a.sTableId,d=a.oLanguage,e=a.oPreviousSearch,f=a.aanFeatures,h='<input type="search" class="'+b.sFilterInput+'"/>',i=d.sSearch,i=i.match(/_INPUT_/)?i.replace("_INPUT_",h):i+h,b=g("<div/>",{id:!f.f?c+"_filter":
|
||||
null,"class":b.sFilter}).append(g("<label/>").append(i)),f=function(){var b=!this.value?"":this.value;b!=e.sSearch&&(ha(a,{sSearch:b,bRegex:e.bRegex,bSmart:e.bSmart,bCaseInsensitive:e.bCaseInsensitive}),a._iDisplayStart=0,M(a))},h=null!==a.searchDelay?a.searchDelay:"ssp"===y(a)?400:0,j=g("input",b).val(e.sSearch).attr("placeholder",d.sSearchPlaceholder).bind("keyup.DT search.DT input.DT paste.DT cut.DT",h?ua(f,h):f).bind("keypress.DT",function(a){if(13==a.keyCode)return!1}).attr("aria-controls",c);
|
||||
g(a.nTable).on("search.dt.DT",function(b,c){if(a===c)try{j[0]!==T.activeElement&&j.val(e.sSearch)}catch(d){}});return b[0]}function ha(a,b,c){var d=a.oPreviousSearch,e=a.aoPreSearchCols,f=function(a){d.sSearch=a.sSearch;d.bRegex=a.bRegex;d.bSmart=a.bSmart;d.bCaseInsensitive=a.bCaseInsensitive};Ia(a);if("ssp"!=y(a)){vb(a,b.sSearch,c,b.bEscapeRegex!==l?!b.bEscapeRegex:b.bRegex,b.bSmart,b.bCaseInsensitive);f(b);for(b=0;b<e.length;b++)wb(a,e[b].sSearch,b,e[b].bEscapeRegex!==l?!e[b].bEscapeRegex:e[b].bRegex,
|
||||
e[b].bSmart,e[b].bCaseInsensitive);xb(a)}else f(b);a.bFiltered=!0;w(a,null,"search",[a])}function xb(a){for(var b=k.ext.search,c=a.aiDisplay,d,e,f=0,h=b.length;f<h;f++){for(var i=[],j=0,n=c.length;j<n;j++)e=c[j],d=a.aoData[e],b[f](a,d._aFilterData,e,d._aData,j)&&i.push(e);c.length=0;g.merge(c,i)}}function wb(a,b,c,d,e,f){if(""!==b)for(var h=a.aiDisplay,d=Qa(b,d,e,f),e=h.length-1;0<=e;e--)b=a.aoData[h[e]]._aFilterData[c],d.test(b)||h.splice(e,1)}function vb(a,b,c,d,e,f){var d=Qa(b,d,e,f),e=a.oPreviousSearch.sSearch,
|
||||
f=a.aiDisplayMaster,h;0!==k.ext.search.length&&(c=!0);h=yb(a);if(0>=b.length)a.aiDisplay=f.slice();else{if(h||c||e.length>b.length||0!==b.indexOf(e)||a.bSorted)a.aiDisplay=f.slice();b=a.aiDisplay;for(c=b.length-1;0<=c;c--)d.test(a.aoData[b[c]]._sFilterRow)||b.splice(c,1)}}function Qa(a,b,c,d){a=b?a:va(a);c&&(a="^(?=.*?"+g.map(a.match(/"[^"]+"|[^ ]+/g)||[""],function(a){if('"'===a.charAt(0))var b=a.match(/^"(.*)"$/),a=b?b[1]:a;return a.replace('"',"")}).join(")(?=.*?")+").*$");return RegExp(a,d?"i":
|
||||
"")}function va(a){return a.replace(Xb,"\\$1")}function yb(a){var b=a.aoColumns,c,d,e,f,h,i,j,g,m=k.ext.type.search;c=!1;d=0;for(f=a.aoData.length;d<f;d++)if(g=a.aoData[d],!g._aFilterData){i=[];e=0;for(h=b.length;e<h;e++)c=b[e],c.bSearchable?(j=B(a,d,e,"filter"),m[c.sType]&&(j=m[c.sType](j)),null===j&&(j=""),"string"!==typeof j&&j.toString&&(j=j.toString())):j="",j.indexOf&&-1!==j.indexOf("&")&&(wa.innerHTML=j,j=Yb?wa.textContent:wa.innerText),j.replace&&(j=j.replace(/[\r\n]/g,"")),i.push(j);g._aFilterData=
|
||||
i;g._sFilterRow=i.join(" ");c=!0}return c}function zb(a){return{search:a.sSearch,smart:a.bSmart,regex:a.bRegex,caseInsensitive:a.bCaseInsensitive}}function Ab(a){return{sSearch:a.search,bSmart:a.smart,bRegex:a.regex,bCaseInsensitive:a.caseInsensitive}}function rb(a){var b=a.sTableId,c=a.aanFeatures.i,d=g("<div/>",{"class":a.oClasses.sInfo,id:!c?b+"_info":null});c||(a.aoDrawCallback.push({fn:Bb,sName:"information"}),d.attr("role","status").attr("aria-live","polite"),g(a.nTable).attr("aria-describedby",
|
||||
b+"_info"));return d[0]}function Bb(a){var b=a.aanFeatures.i;if(0!==b.length){var c=a.oLanguage,d=a._iDisplayStart+1,e=a.fnDisplayEnd(),f=a.fnRecordsTotal(),h=a.fnRecordsDisplay(),i=h?c.sInfo:c.sInfoEmpty;h!==f&&(i+=" "+c.sInfoFiltered);i+=c.sInfoPostFix;i=Cb(a,i);c=c.fnInfoCallback;null!==c&&(i=c.call(a.oInstance,a,d,e,f,h,i));g(b).html(i)}}function Cb(a,b){var c=a.fnFormatNumber,d=a._iDisplayStart+1,e=a._iDisplayLength,f=a.fnRecordsDisplay(),h=-1===e;return b.replace(/_START_/g,c.call(a,d)).replace(/_END_/g,
|
||||
c.call(a,a.fnDisplayEnd())).replace(/_MAX_/g,c.call(a,a.fnRecordsTotal())).replace(/_TOTAL_/g,c.call(a,f)).replace(/_PAGE_/g,c.call(a,h?1:Math.ceil(d/e))).replace(/_PAGES_/g,c.call(a,h?1:Math.ceil(f/e)))}function ia(a){var b,c,d=a.iInitDisplayStart,e=a.aoColumns,f;c=a.oFeatures;var h=a.bDeferLoading;if(a.bInitialised){mb(a);jb(a);ga(a,a.aoHeader);ga(a,a.aoFooter);C(a,!0);c.bAutoWidth&&Ha(a);b=0;for(c=e.length;b<c;b++)f=e[b],f.sWidth&&(f.nTh.style.width=t(f.sWidth));w(a,null,"preInit",[a]);R(a);e=
|
||||
y(a);if("ssp"!=e||h)"ajax"==e?ra(a,[],function(c){var f=sa(a,c);for(b=0;b<f.length;b++)L(a,f[b]);a.iInitDisplayStart=d;R(a);C(a,!1);ta(a,c)},a):(C(a,!1),ta(a))}else setTimeout(function(){ia(a)},200)}function ta(a,b){a._bInitComplete=!0;(b||a.oInit.aaData)&&Y(a);w(a,"aoInitComplete","init",[a,b])}function Ra(a,b){var c=parseInt(b,10);a._iDisplayLength=c;Sa(a);w(a,null,"length",[a,c])}function nb(a){for(var b=a.oClasses,c=a.sTableId,d=a.aLengthMenu,e=g.isArray(d[0]),f=e?d[0]:d,d=e?d[1]:d,e=g("<select/>",
|
||||
{name:c+"_length","aria-controls":c,"class":b.sLengthSelect}),h=0,i=f.length;h<i;h++)e[0][h]=new Option(d[h],f[h]);var j=g("<div><label/></div>").addClass(b.sLength);a.aanFeatures.l||(j[0].id=c+"_length");j.children().append(a.oLanguage.sLengthMenu.replace("_MENU_",e[0].outerHTML));g("select",j).val(a._iDisplayLength).bind("change.DT",function(){Ra(a,g(this).val());M(a)});g(a.nTable).bind("length.dt.DT",function(b,c,d){a===c&&g("select",j).val(d)});return j[0]}function sb(a){var b=a.sPaginationType,
|
||||
c=k.ext.pager[b],d="function"===typeof c,e=function(a){M(a)},b=g("<div/>").addClass(a.oClasses.sPaging+b)[0],f=a.aanFeatures;d||c.fnInit(a,b,e);f.p||(b.id=a.sTableId+"_paginate",a.aoDrawCallback.push({fn:function(a){if(d){var b=a._iDisplayStart,j=a._iDisplayLength,g=a.fnRecordsDisplay(),m=-1===j,b=m?0:Math.ceil(b/j),j=m?1:Math.ceil(g/j),g=c(b,j),l,m=0;for(l=f.p.length;m<l;m++)Pa(a,"pageButton")(a,f.p[m],m,g,b,j)}else c.fnUpdate(a,e)},sName:"pagination"}));return b}function Ta(a,b,c){var d=a._iDisplayStart,
|
||||
e=a._iDisplayLength,f=a.fnRecordsDisplay();0===f||-1===e?d=0:"number"===typeof b?(d=b*e,d>f&&(d=0)):"first"==b?d=0:"previous"==b?(d=0<=e?d-e:0,0>d&&(d=0)):"next"==b?d+e<f&&(d+=e):"last"==b?d=Math.floor((f-1)/e)*e:I(a,0,"Unknown paging action: "+b,5);b=a._iDisplayStart!==d;a._iDisplayStart=d;b&&(w(a,null,"page",[a]),c&&M(a));return b}function pb(a){return g("<div/>",{id:!a.aanFeatures.r?a.sTableId+"_processing":null,"class":a.oClasses.sProcessing}).html(a.oLanguage.sProcessing).insertBefore(a.nTable)[0]}
|
||||
function C(a,b){a.oFeatures.bProcessing&&g(a.aanFeatures.r).css("display",b?"block":"none");w(a,null,"processing",[a,b])}function qb(a){var b=g(a.nTable);b.attr("role","grid");var c=a.oScroll;if(""===c.sX&&""===c.sY)return a.nTable;var d=c.sX,e=c.sY,f=a.oClasses,h=b.children("caption"),i=h.length?h[0]._captionSide:null,j=g(b[0].cloneNode(!1)),n=g(b[0].cloneNode(!1)),m=b.children("tfoot");c.sX&&"100%"===b.attr("width")&&b.removeAttr("width");m.length||(m=null);j=g("<div/>",{"class":f.sScrollWrapper}).append(g("<div/>",
|
||||
{"class":f.sScrollHead}).css({overflow:"hidden",position:"relative",border:0,width:d?!d?null:t(d):"100%"}).append(g("<div/>",{"class":f.sScrollHeadInner}).css({"box-sizing":"content-box",width:c.sXInner||"100%"}).append(j.removeAttr("id").css("margin-left",0).append("top"===i?h:null).append(b.children("thead"))))).append(g("<div/>",{"class":f.sScrollBody}).css({position:"relative",overflow:"auto",width:!d?null:t(d)}).append(b));m&&j.append(g("<div/>",{"class":f.sScrollFoot}).css({overflow:"hidden",
|
||||
border:0,width:d?!d?null:t(d):"100%"}).append(g("<div/>",{"class":f.sScrollFootInner}).append(n.removeAttr("id").css("margin-left",0).append("bottom"===i?h:null).append(b.children("tfoot")))));var b=j.children(),l=b[0],f=b[1],q=m?b[2]:null;if(d)g(f).on("scroll.DT",function(){var a=this.scrollLeft;l.scrollLeft=a;m&&(q.scrollLeft=a)});g(f).css(e&&c.bCollapse?"max-height":"height",e);a.nScrollHead=l;a.nScrollBody=f;a.nScrollFoot=q;a.aoDrawCallback.push({fn:Z,sName:"scrolling"});return j[0]}function Z(a){var b=
|
||||
a.oScroll,c=b.sX,d=b.sXInner,e=b.sY,b=b.iBarWidth,f=g(a.nScrollHead),h=f[0].style,i=f.children("div"),j=i[0].style,n=i.children("table"),i=a.nScrollBody,m=g(i),l=i.style,q=g(a.nScrollFoot).children("div"),J=q.children("table"),o=g(a.nTHead),k=g(a.nTable),p=k[0],s=p.style,N=a.nTFoot?g(a.nTFoot):null,Db=a.oBrowser,w=Db.bScrollOversize,u,v,O,x,y=[],z=[],A=[],B,C=function(a){a=a.style;a.paddingTop="0";a.paddingBottom="0";a.borderTopWidth="0";a.borderBottomWidth="0";a.height=0};k.children("thead, tfoot").remove();
|
||||
x=o.clone().prependTo(k);o=o.find("tr");v=x.find("tr");x.find("th, td").removeAttr("tabindex");N&&(O=N.clone().prependTo(k),u=N.find("tr"),O=O.find("tr"));c||(l.width="100%",f[0].style.width="100%");g.each(qa(a,x),function(b,c){B=$(a,b);c.style.width=a.aoColumns[B].sWidth});N&&G(function(a){a.style.width=""},O);f=k.outerWidth();if(""===c){s.width="100%";if(w&&(k.find("tbody").height()>i.offsetHeight||"scroll"==m.css("overflow-y")))s.width=t(k.outerWidth()-b);f=k.outerWidth()}else""!==d&&(s.width=
|
||||
t(d),f=k.outerWidth());G(C,v);G(function(a){A.push(a.innerHTML);y.push(t(g(a).css("width")))},v);G(function(a,b){a.style.width=y[b]},o);g(v).height(0);N&&(G(C,O),G(function(a){z.push(t(g(a).css("width")))},O),G(function(a,b){a.style.width=z[b]},u),g(O).height(0));G(function(a,b){a.innerHTML='<div class="dataTables_sizing" style="height:0;overflow:hidden;">'+A[b]+"</div>";a.style.width=y[b]},v);N&&G(function(a,b){a.innerHTML="";a.style.width=z[b]},O);if(k.outerWidth()<f){u=i.scrollHeight>i.offsetHeight||
|
||||
"scroll"==m.css("overflow-y")?f+b:f;if(w&&(i.scrollHeight>i.offsetHeight||"scroll"==m.css("overflow-y")))s.width=t(u-b);(""===c||""!==d)&&I(a,1,"Possible column misalignment",6)}else u="100%";l.width=t(u);h.width=t(u);N&&(a.nScrollFoot.style.width=t(u));!e&&w&&(l.height=t(p.offsetHeight+b));c=k.outerWidth();n[0].style.width=t(c);j.width=t(c);d=k.height()>i.clientHeight||"scroll"==m.css("overflow-y");e="padding"+(Db.bScrollbarLeft?"Left":"Right");j[e]=d?b+"px":"0px";N&&(J[0].style.width=t(c),q[0].style.width=
|
||||
t(c),q[0].style[e]=d?b+"px":"0px");m.scroll();if((a.bSorted||a.bFiltered)&&!a._drawHold)i.scrollTop=0}function G(a,b,c){for(var d=0,e=0,f=b.length,h,i;e<f;){h=b[e].firstChild;for(i=c?c[e].firstChild:null;h;)1===h.nodeType&&(c?a(h,i,d):a(h,d),d++),h=h.nextSibling,i=c?i.nextSibling:null;e++}}function Ha(a){var b=a.nTable,c=a.aoColumns,d=a.oScroll,e=d.sY,f=d.sX,h=d.sXInner,i=c.length,j=aa(a,"bVisible"),n=g("th",a.nTHead),m=b.getAttribute("width"),l=b.parentNode,q=!1,k,o,p;p=a.oBrowser;d=p.bScrollOversize;
|
||||
(k=b.style.width)&&-1!==k.indexOf("%")&&(m=k);for(k=0;k<j.length;k++)o=c[j[k]],null!==o.sWidth&&(o.sWidth=Eb(o.sWidthOrig,l),q=!0);if(d||!q&&!f&&!e&&i==ca(a)&&i==n.length)for(k=0;k<i;k++){if(j=$(a,k))c[j].sWidth=t(n.eq(k).width())}else{i=g(b).clone().css("visibility","hidden").removeAttr("id");i.find("tbody tr").remove();var s=g("<tr/>").appendTo(i.find("tbody"));i.find("thead, tfoot").remove();i.append(g(a.nTHead).clone()).append(g(a.nTFoot).clone());i.find("tfoot th, tfoot td").css("width","");
|
||||
n=qa(a,i.find("thead")[0]);for(k=0;k<j.length;k++)o=c[j[k]],n[k].style.width=null!==o.sWidthOrig&&""!==o.sWidthOrig?t(o.sWidthOrig):"";if(a.aoData.length)for(k=0;k<j.length;k++)q=j[k],o=c[q],g(Fb(a,q)).clone(!1).append(o.sContentPadding).appendTo(s);q=g("<div/>").css(f||e?{position:"absolute",top:0,left:0,height:1,right:0,overflow:"hidden"}:{}).append(i).appendTo(l);f&&h?i.width(h):f?(i.css("width","auto"),i.width()<l.clientWidth&&i.width(l.clientWidth)):e?i.width(l.clientWidth):m&&i.width(m);if(f){for(k=
|
||||
h=0;k<j.length;k++)o=c[j[k]],e=p.bBounding?n[k].getBoundingClientRect().width:g(n[k]).outerWidth(),h+=null===o.sWidthOrig?e:parseInt(o.sWidth,10)+e-g(n[k]).width();i.width(t(h));b.style.width=t(h)}for(k=0;k<j.length;k++)if(o=c[j[k]],p=g(n[k]).width())o.sWidth=t(p);b.style.width=t(i.css("width"));q.remove()}m&&(b.style.width=t(m));if((m||f)&&!a._reszEvt)b=function(){g(Fa).bind("resize.DT-"+a.sInstance,ua(function(){Y(a)}))},d?setTimeout(b,1E3):b(),a._reszEvt=!0}function ua(a,b){var c=b!==l?b:200,d,
|
||||
e;return function(){var b=this,h=+new Date,i=arguments;d&&h<d+c?(clearTimeout(e),e=setTimeout(function(){d=l;a.apply(b,i)},c)):(d=h,a.apply(b,i))}}function Eb(a,b){if(!a)return 0;var c=g("<div/>").css("width",t(a)).appendTo(b||T.body),d=c[0].offsetWidth;c.remove();return d}function Fb(a,b){var c=Gb(a,b);if(0>c)return null;var d=a.aoData[c];return!d.nTr?g("<td/>").html(B(a,c,b,"display"))[0]:d.anCells[b]}function Gb(a,b){for(var c,d=-1,e=-1,f=0,h=a.aoData.length;f<h;f++)c=B(a,f,b,"display")+"",c=c.replace(Zb,
|
||||
""),c.length>d&&(d=c.length,e=f);return e}function t(a){return null===a?"0px":"number"==typeof a?0>a?"0px":a+"px":a.match(/\d$/)?a+"px":a}function V(a){var b,c,d=[],e=a.aoColumns,f,h,i,j;b=a.aaSortingFixed;c=g.isPlainObject(b);var n=[];f=function(a){a.length&&!g.isArray(a[0])?n.push(a):g.merge(n,a)};g.isArray(b)&&f(b);c&&b.pre&&f(b.pre);f(a.aaSorting);c&&b.post&&f(b.post);for(a=0;a<n.length;a++){j=n[a][0];f=e[j].aDataSort;b=0;for(c=f.length;b<c;b++)h=f[b],i=e[h].sType||"string",n[a]._idx===l&&(n[a]._idx=
|
||||
g.inArray(n[a][1],e[h].asSorting)),d.push({src:j,col:h,dir:n[a][1],index:n[a]._idx,type:i,formatter:k.ext.type.order[i+"-pre"]})}return d}function lb(a){var b,c,d=[],e=k.ext.type.order,f=a.aoData,h=0,i,g=a.aiDisplayMaster,n;Ia(a);n=V(a);b=0;for(c=n.length;b<c;b++)i=n[b],i.formatter&&h++,Hb(a,i.col);if("ssp"!=y(a)&&0!==n.length){b=0;for(c=g.length;b<c;b++)d[g[b]]=b;h===n.length?g.sort(function(a,b){var c,e,h,i,g=n.length,j=f[a]._aSortData,l=f[b]._aSortData;for(h=0;h<g;h++)if(i=n[h],c=j[i.col],e=l[i.col],
|
||||
c=c<e?-1:c>e?1:0,0!==c)return"asc"===i.dir?c:-c;c=d[a];e=d[b];return c<e?-1:c>e?1:0}):g.sort(function(a,b){var c,h,i,g,j=n.length,l=f[a]._aSortData,k=f[b]._aSortData;for(i=0;i<j;i++)if(g=n[i],c=l[g.col],h=k[g.col],g=e[g.type+"-"+g.dir]||e["string-"+g.dir],c=g(c,h),0!==c)return c;c=d[a];h=d[b];return c<h?-1:c>h?1:0})}a.bSorted=!0}function Ib(a){for(var b,c,d=a.aoColumns,e=V(a),a=a.oLanguage.oAria,f=0,h=d.length;f<h;f++){c=d[f];var i=c.asSorting;b=c.sTitle.replace(/<.*?>/g,"");var g=c.nTh;g.removeAttribute("aria-sort");
|
||||
c.bSortable&&(0<e.length&&e[0].col==f?(g.setAttribute("aria-sort","asc"==e[0].dir?"ascending":"descending"),c=i[e[0].index+1]||i[0]):c=i[0],b+="asc"===c?a.sSortAscending:a.sSortDescending);g.setAttribute("aria-label",b)}}function Ua(a,b,c,d){var e=a.aaSorting,f=a.aoColumns[b].asSorting,h=function(a,b){var c=a._idx;c===l&&(c=g.inArray(a[1],f));return c+1<f.length?c+1:b?null:0};"number"===typeof e[0]&&(e=a.aaSorting=[e]);c&&a.oFeatures.bSortMulti?(c=g.inArray(b,D(e,"0")),-1!==c?(b=h(e[c],!0),null===
|
||||
b&&1===e.length&&(b=0),null===b?e.splice(c,1):(e[c][1]=f[b],e[c]._idx=b)):(e.push([b,f[0],0]),e[e.length-1]._idx=0)):e.length&&e[0][0]==b?(b=h(e[0]),e.length=1,e[0][1]=f[b],e[0]._idx=b):(e.length=0,e.push([b,f[0]]),e[0]._idx=0);R(a);"function"==typeof d&&d(a)}function Oa(a,b,c,d){var e=a.aoColumns[c];Va(b,{},function(b){!1!==e.bSortable&&(a.oFeatures.bProcessing?(C(a,!0),setTimeout(function(){Ua(a,c,b.shiftKey,d);"ssp"!==y(a)&&C(a,!1)},0)):Ua(a,c,b.shiftKey,d))})}function xa(a){var b=a.aLastSort,
|
||||
c=a.oClasses.sSortColumn,d=V(a),e=a.oFeatures,f,h;if(e.bSort&&e.bSortClasses){e=0;for(f=b.length;e<f;e++)h=b[e].src,g(D(a.aoData,"anCells",h)).removeClass(c+(2>e?e+1:3));e=0;for(f=d.length;e<f;e++)h=d[e].src,g(D(a.aoData,"anCells",h)).addClass(c+(2>e?e+1:3))}a.aLastSort=d}function Hb(a,b){var c=a.aoColumns[b],d=k.ext.order[c.sSortDataType],e;d&&(e=d.call(a.oInstance,a,b,ba(a,b)));for(var f,h=k.ext.type.order[c.sType+"-pre"],i=0,g=a.aoData.length;i<g;i++)if(c=a.aoData[i],c._aSortData||(c._aSortData=
|
||||
[]),!c._aSortData[b]||d)f=d?e[i]:B(a,i,b,"sort"),c._aSortData[b]=h?h(f):f}function ya(a){if(a.oFeatures.bStateSave&&!a.bDestroying){var b={time:+new Date,start:a._iDisplayStart,length:a._iDisplayLength,order:g.extend(!0,[],a.aaSorting),search:zb(a.oPreviousSearch),columns:g.map(a.aoColumns,function(b,d){return{visible:b.bVisible,search:zb(a.aoPreSearchCols[d])}})};w(a,"aoStateSaveParams","stateSaveParams",[a,b]);a.oSavedState=b;a.fnStateSaveCallback.call(a.oInstance,a,b)}}function Jb(a){var b,c,d=
|
||||
a.aoColumns;if(a.oFeatures.bStateSave){var e=a.fnStateLoadCallback.call(a.oInstance,a);if(e&&e.time&&(b=w(a,"aoStateLoadParams","stateLoadParams",[a,e]),-1===g.inArray(!1,b)&&(b=a.iStateDuration,!(0<b&&e.time<+new Date-1E3*b)&&d.length===e.columns.length))){a.oLoadedState=g.extend(!0,{},e);e.start!==l&&(a._iDisplayStart=e.start,a.iInitDisplayStart=e.start);e.length!==l&&(a._iDisplayLength=e.length);e.order!==l&&(a.aaSorting=[],g.each(e.order,function(b,c){a.aaSorting.push(c[0]>=d.length?[0,c[1]]:
|
||||
c)}));e.search!==l&&g.extend(a.oPreviousSearch,Ab(e.search));b=0;for(c=e.columns.length;b<c;b++){var f=e.columns[b];f.visible!==l&&(d[b].bVisible=f.visible);f.search!==l&&g.extend(a.aoPreSearchCols[b],Ab(f.search))}w(a,"aoStateLoaded","stateLoaded",[a,e])}}}function za(a){var b=k.settings,a=g.inArray(a,D(b,"nTable"));return-1!==a?b[a]:null}function I(a,b,c,d){c="DataTables warning: "+(a?"table id="+a.sTableId+" - ":"")+c;d&&(c+=". For more information about this error, please see http://datatables.net/tn/"+
|
||||
d);if(b)Fa.console&&console.log&&console.log(c);else if(b=k.ext,b=b.sErrMode||b.errMode,a&&w(a,null,"error",[a,d,c]),"alert"==b)alert(c);else{if("throw"==b)throw Error(c);"function"==typeof b&&b(a,d,c)}}function E(a,b,c,d){g.isArray(c)?g.each(c,function(c,d){g.isArray(d)?E(a,b,d[0],d[1]):E(a,b,d)}):(d===l&&(d=c),b[c]!==l&&(a[d]=b[c]))}function Kb(a,b,c){var d,e;for(e in b)b.hasOwnProperty(e)&&(d=b[e],g.isPlainObject(d)?(g.isPlainObject(a[e])||(a[e]={}),g.extend(!0,a[e],d)):a[e]=c&&"data"!==e&&"aaData"!==
|
||||
e&&g.isArray(d)?d.slice():d);return a}function Va(a,b,c){g(a).bind("click.DT",b,function(b){a.blur();c(b)}).bind("keypress.DT",b,function(a){13===a.which&&(a.preventDefault(),c(a))}).bind("selectstart.DT",function(){return!1})}function z(a,b,c,d){c&&a[b].push({fn:c,sName:d})}function w(a,b,c,d){var e=[];b&&(e=g.map(a[b].slice().reverse(),function(b){return b.fn.apply(a.oInstance,d)}));null!==c&&(b=g.Event(c+".dt"),g(a.nTable).trigger(b,d),e.push(b.result));return e}function Sa(a){var b=a._iDisplayStart,
|
||||
c=a.fnDisplayEnd(),d=a._iDisplayLength;b>=c&&(b=c-d);b-=b%d;if(-1===d||0>b)b=0;a._iDisplayStart=b}function Pa(a,b){var c=a.renderer,d=k.ext.renderer[b];return g.isPlainObject(c)&&c[b]?d[c[b]]||d._:"string"===typeof c?d[c]||d._:d._}function y(a){return a.oFeatures.bServerSide?"ssp":a.ajax||a.sAjaxSource?"ajax":"dom"}function Aa(a,b){var c=[],c=Lb.numbers_length,d=Math.floor(c/2);b<=c?c=W(0,b):a<=d?(c=W(0,c-2),c.push("ellipsis"),c.push(b-1)):(a>=b-1-d?c=W(b-(c-2),b):(c=W(a-d+2,a+d-1),c.push("ellipsis"),
|
||||
c.push(b-1)),c.splice(0,0,"ellipsis"),c.splice(0,0,0));c.DT_el="span";return c}function cb(a){g.each({num:function(b){return Ba(b,a)},"num-fmt":function(b){return Ba(b,a,Wa)},"html-num":function(b){return Ba(b,a,Ca)},"html-num-fmt":function(b){return Ba(b,a,Ca,Wa)}},function(b,c){v.type.order[b+a+"-pre"]=c;b.match(/^html\-/)&&(v.type.search[b+a]=v.type.search.html)})}function Mb(a){return function(){var b=[za(this[k.ext.iApiIndex])].concat(Array.prototype.slice.call(arguments));return k.ext.internal[a].apply(this,
|
||||
c[d]);a.aiDisplay=a.aiDisplayMaster.slice();a.bAjaxDataGet=!1;M(a);a._bInitComplete||ta(a,b);a.bAjaxDataGet=!0;C(a,!1)}function sa(a,b){var c=h.isPlainObject(a.ajax)&&a.ajax.dataSrc!==l?a.ajax.dataSrc:a.sAjaxDataProp;return"data"===c?b.aaData||b[c]:""!==c?P(c)(b):b}function ob(a){var b=a.oClasses,c=a.sTableId,d=a.oLanguage,e=a.oPreviousSearch,f=a.aanFeatures,g='<input type="search" class="'+b.sFilterInput+'"/>',i=d.sSearch,i=i.match(/_INPUT_/)?i.replace("_INPUT_",g):i+g,b=h("<div/>",{id:!f.f?c+"_filter":
|
||||
null,"class":b.sFilter}).append(h("<label/>").append(i)),f=function(){var b=!this.value?"":this.value;b!=e.sSearch&&(ha(a,{sSearch:b,bRegex:e.bRegex,bSmart:e.bSmart,bCaseInsensitive:e.bCaseInsensitive}),a._iDisplayStart=0,M(a))},g=null!==a.searchDelay?a.searchDelay:"ssp"===y(a)?400:0,j=h("input",b).val(e.sSearch).attr("placeholder",d.sSearchPlaceholder).bind("keyup.DT search.DT input.DT paste.DT cut.DT",g?ua(f,g):f).bind("keypress.DT",function(a){if(13==a.keyCode)return!1}).attr("aria-controls",c);
|
||||
h(a.nTable).on("search.dt.DT",function(b,c){if(a===c)try{j[0]!==T.activeElement&&j.val(e.sSearch)}catch(d){}});return b[0]}function ha(a,b,c){var d=a.oPreviousSearch,e=a.aoPreSearchCols,f=function(a){d.sSearch=a.sSearch;d.bRegex=a.bRegex;d.bSmart=a.bSmart;d.bCaseInsensitive=a.bCaseInsensitive};Ia(a);if("ssp"!=y(a)){vb(a,b.sSearch,c,b.bEscapeRegex!==l?!b.bEscapeRegex:b.bRegex,b.bSmart,b.bCaseInsensitive);f(b);for(b=0;b<e.length;b++)wb(a,e[b].sSearch,b,e[b].bEscapeRegex!==l?!e[b].bEscapeRegex:e[b].bRegex,
|
||||
e[b].bSmart,e[b].bCaseInsensitive);xb(a)}else f(b);a.bFiltered=!0;w(a,null,"search",[a])}function xb(a){for(var b=k.ext.search,c=a.aiDisplay,d,e,f=0,g=b.length;f<g;f++){for(var i=[],j=0,n=c.length;j<n;j++)e=c[j],d=a.aoData[e],b[f](a,d._aFilterData,e,d._aData,j)&&i.push(e);c.length=0;h.merge(c,i)}}function wb(a,b,c,d,e,f){if(""!==b)for(var g=a.aiDisplay,d=Qa(b,d,e,f),e=g.length-1;0<=e;e--)b=a.aoData[g[e]]._aFilterData[c],d.test(b)||g.splice(e,1)}function vb(a,b,c,d,e,f){var d=Qa(b,d,e,f),e=a.oPreviousSearch.sSearch,
|
||||
f=a.aiDisplayMaster,g;0!==k.ext.search.length&&(c=!0);g=yb(a);if(0>=b.length)a.aiDisplay=f.slice();else{if(g||c||e.length>b.length||0!==b.indexOf(e)||a.bSorted)a.aiDisplay=f.slice();b=a.aiDisplay;for(c=b.length-1;0<=c;c--)d.test(a.aoData[b[c]]._sFilterRow)||b.splice(c,1)}}function Qa(a,b,c,d){a=b?a:va(a);c&&(a="^(?=.*?"+h.map(a.match(/"[^"]+"|[^ ]+/g)||[""],function(a){if('"'===a.charAt(0))var b=a.match(/^"(.*)"$/),a=b?b[1]:a;return a.replace('"',"")}).join(")(?=.*?")+").*$");return RegExp(a,d?"i":
|
||||
"")}function va(a){return a.replace(Xb,"\\$1")}function yb(a){var b=a.aoColumns,c,d,e,f,g,i,j,h,m=k.ext.type.search;c=!1;d=0;for(f=a.aoData.length;d<f;d++)if(h=a.aoData[d],!h._aFilterData){i=[];e=0;for(g=b.length;e<g;e++)c=b[e],c.bSearchable?(j=B(a,d,e,"filter"),m[c.sType]&&(j=m[c.sType](j)),null===j&&(j=""),"string"!==typeof j&&j.toString&&(j=j.toString())):j="",j.indexOf&&-1!==j.indexOf("&")&&(wa.innerHTML=j,j=Yb?wa.textContent:wa.innerText),j.replace&&(j=j.replace(/[\r\n]/g,"")),i.push(j);h._aFilterData=
|
||||
i;h._sFilterRow=i.join(" ");c=!0}return c}function zb(a){return{search:a.sSearch,smart:a.bSmart,regex:a.bRegex,caseInsensitive:a.bCaseInsensitive}}function Ab(a){return{sSearch:a.search,bSmart:a.smart,bRegex:a.regex,bCaseInsensitive:a.caseInsensitive}}function rb(a){var b=a.sTableId,c=a.aanFeatures.i,d=h("<div/>",{"class":a.oClasses.sInfo,id:!c?b+"_info":null});c||(a.aoDrawCallback.push({fn:Bb,sName:"information"}),d.attr("role","status").attr("aria-live","polite"),h(a.nTable).attr("aria-describedby",
|
||||
b+"_info"));return d[0]}function Bb(a){var b=a.aanFeatures.i;if(0!==b.length){var c=a.oLanguage,d=a._iDisplayStart+1,e=a.fnDisplayEnd(),f=a.fnRecordsTotal(),g=a.fnRecordsDisplay(),i=g?c.sInfo:c.sInfoEmpty;g!==f&&(i+=" "+c.sInfoFiltered);i+=c.sInfoPostFix;i=Cb(a,i);c=c.fnInfoCallback;null!==c&&(i=c.call(a.oInstance,a,d,e,f,g,i));h(b).html(i)}}function Cb(a,b){var c=a.fnFormatNumber,d=a._iDisplayStart+1,e=a._iDisplayLength,f=a.fnRecordsDisplay(),g=-1===e;return b.replace(/_START_/g,c.call(a,d)).replace(/_END_/g,
|
||||
c.call(a,a.fnDisplayEnd())).replace(/_MAX_/g,c.call(a,a.fnRecordsTotal())).replace(/_TOTAL_/g,c.call(a,f)).replace(/_PAGE_/g,c.call(a,g?1:Math.ceil(d/e))).replace(/_PAGES_/g,c.call(a,g?1:Math.ceil(f/e)))}function ia(a){var b,c,d=a.iInitDisplayStart,e=a.aoColumns,f;c=a.oFeatures;var g=a.bDeferLoading;if(a.bInitialised){mb(a);jb(a);ga(a,a.aoHeader);ga(a,a.aoFooter);C(a,!0);c.bAutoWidth&&Ha(a);b=0;for(c=e.length;b<c;b++)f=e[b],f.sWidth&&(f.nTh.style.width=t(f.sWidth));w(a,null,"preInit",[a]);R(a);e=
|
||||
y(a);if("ssp"!=e||g)"ajax"==e?ra(a,[],function(c){var f=sa(a,c);for(b=0;b<f.length;b++)L(a,f[b]);a.iInitDisplayStart=d;R(a);C(a,!1);ta(a,c)},a):(C(a,!1),ta(a))}else setTimeout(function(){ia(a)},200)}function ta(a,b){a._bInitComplete=!0;(b||a.oInit.aaData)&&Y(a);w(a,"aoInitComplete","init",[a,b])}function Ra(a,b){var c=parseInt(b,10);a._iDisplayLength=c;Sa(a);w(a,null,"length",[a,c])}function nb(a){for(var b=a.oClasses,c=a.sTableId,d=a.aLengthMenu,e=h.isArray(d[0]),f=e?d[0]:d,d=e?d[1]:d,e=h("<select/>",
|
||||
{name:c+"_length","aria-controls":c,"class":b.sLengthSelect}),g=0,i=f.length;g<i;g++)e[0][g]=new Option(d[g],f[g]);var j=h("<div><label/></div>").addClass(b.sLength);a.aanFeatures.l||(j[0].id=c+"_length");j.children().append(a.oLanguage.sLengthMenu.replace("_MENU_",e[0].outerHTML));h("select",j).val(a._iDisplayLength).bind("change.DT",function(){Ra(a,h(this).val());M(a)});h(a.nTable).bind("length.dt.DT",function(b,c,d){a===c&&h("select",j).val(d)});return j[0]}function sb(a){var b=a.sPaginationType,
|
||||
c=k.ext.pager[b],d="function"===typeof c,e=function(a){M(a)},b=h("<div/>").addClass(a.oClasses.sPaging+b)[0],f=a.aanFeatures;d||c.fnInit(a,b,e);f.p||(b.id=a.sTableId+"_paginate",a.aoDrawCallback.push({fn:function(a){if(d){var b=a._iDisplayStart,j=a._iDisplayLength,h=a.fnRecordsDisplay(),m=-1===j,b=m?0:Math.ceil(b/j),j=m?1:Math.ceil(h/j),h=c(b,j),l,m=0;for(l=f.p.length;m<l;m++)Pa(a,"pageButton")(a,f.p[m],m,h,b,j)}else c.fnUpdate(a,e)},sName:"pagination"}));return b}function Ta(a,b,c){var d=a._iDisplayStart,
|
||||
e=a._iDisplayLength,f=a.fnRecordsDisplay();0===f||-1===e?d=0:"number"===typeof b?(d=b*e,d>f&&(d=0)):"first"==b?d=0:"previous"==b?(d=0<=e?d-e:0,0>d&&(d=0)):"next"==b?d+e<f&&(d+=e):"last"==b?d=Math.floor((f-1)/e)*e:I(a,0,"Unknown paging action: "+b,5);b=a._iDisplayStart!==d;a._iDisplayStart=d;b&&(w(a,null,"page",[a]),c&&M(a));return b}function pb(a){return h("<div/>",{id:!a.aanFeatures.r?a.sTableId+"_processing":null,"class":a.oClasses.sProcessing}).html(a.oLanguage.sProcessing).insertBefore(a.nTable)[0]}
|
||||
function C(a,b){a.oFeatures.bProcessing&&h(a.aanFeatures.r).css("display",b?"block":"none");w(a,null,"processing",[a,b])}function qb(a){var b=h(a.nTable);b.attr("role","grid");var c=a.oScroll;if(""===c.sX&&""===c.sY)return a.nTable;var d=c.sX,e=c.sY,f=a.oClasses,g=b.children("caption"),i=g.length?g[0]._captionSide:null,j=h(b[0].cloneNode(!1)),n=h(b[0].cloneNode(!1)),m=b.children("tfoot");c.sX&&"100%"===b.attr("width")&&b.removeAttr("width");m.length||(m=null);j=h("<div/>",{"class":f.sScrollWrapper}).append(h("<div/>",
|
||||
{"class":f.sScrollHead}).css({overflow:"hidden",position:"relative",border:0,width:d?!d?null:t(d):"100%"}).append(h("<div/>",{"class":f.sScrollHeadInner}).css({"box-sizing":"content-box",width:c.sXInner||"100%"}).append(j.removeAttr("id").css("margin-left",0).append("top"===i?g:null).append(b.children("thead"))))).append(h("<div/>",{"class":f.sScrollBody}).css({position:"relative",overflow:"auto",width:!d?null:t(d)}).append(b));m&&j.append(h("<div/>",{"class":f.sScrollFoot}).css({overflow:"hidden",
|
||||
border:0,width:d?!d?null:t(d):"100%"}).append(h("<div/>",{"class":f.sScrollFootInner}).append(n.removeAttr("id").css("margin-left",0).append("bottom"===i?g:null).append(b.children("tfoot")))));var b=j.children(),l=b[0],f=b[1],q=m?b[2]:null;if(d)h(f).on("scroll.DT",function(){var a=this.scrollLeft;l.scrollLeft=a;m&&(q.scrollLeft=a)});h(f).css(e&&c.bCollapse?"max-height":"height",e);a.nScrollHead=l;a.nScrollBody=f;a.nScrollFoot=q;a.aoDrawCallback.push({fn:Z,sName:"scrolling"});return j[0]}function Z(a){var b=
|
||||
a.oScroll,c=b.sX,d=b.sXInner,e=b.sY,b=b.iBarWidth,f=h(a.nScrollHead),g=f[0].style,i=f.children("div"),j=i[0].style,n=i.children("table"),i=a.nScrollBody,m=h(i),l=i.style,q=h(a.nScrollFoot).children("div"),J=q.children("table"),o=h(a.nTHead),k=h(a.nTable),p=k[0],s=p.style,N=a.nTFoot?h(a.nTFoot):null,Db=a.oBrowser,w=Db.bScrollOversize,u,v,O,x,y=[],z=[],A=[],B,C=function(a){a=a.style;a.paddingTop="0";a.paddingBottom="0";a.borderTopWidth="0";a.borderBottomWidth="0";a.height=0};k.children("thead, tfoot").remove();
|
||||
x=o.clone().prependTo(k);o=o.find("tr");v=x.find("tr");x.find("th, td").removeAttr("tabindex");N&&(O=N.clone().prependTo(k),u=N.find("tr"),O=O.find("tr"));c||(l.width="100%",f[0].style.width="100%");h.each(qa(a,x),function(b,c){B=$(a,b);c.style.width=a.aoColumns[B].sWidth});N&&G(function(a){a.style.width=""},O);f=k.outerWidth();if(""===c){s.width="100%";if(w&&(k.find("tbody").height()>i.offsetHeight||"scroll"==m.css("overflow-y")))s.width=t(k.outerWidth()-b);f=k.outerWidth()}else""!==d&&(s.width=
|
||||
t(d),f=k.outerWidth());G(C,v);G(function(a){A.push(a.innerHTML);y.push(t(h(a).css("width")))},v);G(function(a,b){a.style.width=y[b]},o);h(v).height(0);N&&(G(C,O),G(function(a){z.push(t(h(a).css("width")))},O),G(function(a,b){a.style.width=z[b]},u),h(O).height(0));G(function(a,b){a.innerHTML='<div class="dataTables_sizing" style="height:0;overflow:hidden;">'+A[b]+"</div>";a.style.width=y[b]},v);N&&G(function(a,b){a.innerHTML="";a.style.width=z[b]},O);if(k.outerWidth()<f){u=i.scrollHeight>i.offsetHeight||
|
||||
"scroll"==m.css("overflow-y")?f+b:f;if(w&&(i.scrollHeight>i.offsetHeight||"scroll"==m.css("overflow-y")))s.width=t(u-b);(""===c||""!==d)&&I(a,1,"Possible column misalignment",6)}else u="100%";l.width=t(u);g.width=t(u);N&&(a.nScrollFoot.style.width=t(u));!e&&w&&(l.height=t(p.offsetHeight+b));c=k.outerWidth();n[0].style.width=t(c);j.width=t(c);d=k.height()>i.clientHeight||"scroll"==m.css("overflow-y");e="padding"+(Db.bScrollbarLeft?"Left":"Right");j[e]=d?b+"px":"0px";N&&(J[0].style.width=t(c),q[0].style.width=
|
||||
t(c),q[0].style[e]=d?b+"px":"0px");m.scroll();if((a.bSorted||a.bFiltered)&&!a._drawHold)i.scrollTop=0}function G(a,b,c){for(var d=0,e=0,f=b.length,g,i;e<f;){g=b[e].firstChild;for(i=c?c[e].firstChild:null;g;)1===g.nodeType&&(c?a(g,i,d):a(g,d),d++),g=g.nextSibling,i=c?i.nextSibling:null;e++}}function Ha(a){var b=a.nTable,c=a.aoColumns,d=a.oScroll,e=d.sY,f=d.sX,g=d.sXInner,i=c.length,j=aa(a,"bVisible"),n=h("th",a.nTHead),m=b.getAttribute("width"),l=b.parentNode,q=!1,k,o,p;p=a.oBrowser;d=p.bScrollOversize;
|
||||
(k=b.style.width)&&-1!==k.indexOf("%")&&(m=k);for(k=0;k<j.length;k++)o=c[j[k]],null!==o.sWidth&&(o.sWidth=Eb(o.sWidthOrig,l),q=!0);if(d||!q&&!f&&!e&&i==ca(a)&&i==n.length)for(k=0;k<i;k++){if(j=$(a,k))c[j].sWidth=t(n.eq(k).width())}else{i=h(b).clone().css("visibility","hidden").removeAttr("id");i.find("tbody tr").remove();var s=h("<tr/>").appendTo(i.find("tbody"));i.find("thead, tfoot").remove();i.append(h(a.nTHead).clone()).append(h(a.nTFoot).clone());i.find("tfoot th, tfoot td").css("width","");
|
||||
n=qa(a,i.find("thead")[0]);for(k=0;k<j.length;k++)o=c[j[k]],n[k].style.width=null!==o.sWidthOrig&&""!==o.sWidthOrig?t(o.sWidthOrig):"";if(a.aoData.length)for(k=0;k<j.length;k++)q=j[k],o=c[q],h(Fb(a,q)).clone(!1).append(o.sContentPadding).appendTo(s);q=h("<div/>").css(f||e?{position:"absolute",top:0,left:0,height:1,right:0,overflow:"hidden"}:{}).append(i).appendTo(l);f&&g?i.width(g):f?(i.css("width","auto"),i.width()<l.clientWidth&&i.width(l.clientWidth)):e?i.width(l.clientWidth):m&&i.width(m);if(f){for(k=
|
||||
g=0;k<j.length;k++)o=c[j[k]],e=p.bBounding?n[k].getBoundingClientRect().width:h(n[k]).outerWidth(),g+=null===o.sWidthOrig?e:parseInt(o.sWidth,10)+e-h(n[k]).width();i.width(t(g));b.style.width=t(g)}for(k=0;k<j.length;k++)if(o=c[j[k]],p=h(n[k]).width())o.sWidth=t(p);b.style.width=t(i.css("width"));q.remove()}m&&(b.style.width=t(m));if((m||f)&&!a._reszEvt)b=function(){h(Fa).bind("resize.DT-"+a.sInstance,ua(function(){Y(a)}))},d?setTimeout(b,1E3):b(),a._reszEvt=!0}function ua(a,b){var c=b!==l?b:200,d,
|
||||
e;return function(){var b=this,g=+new Date,i=arguments;d&&g<d+c?(clearTimeout(e),e=setTimeout(function(){d=l;a.apply(b,i)},c)):(d=g,a.apply(b,i))}}function Eb(a,b){if(!a)return 0;var c=h("<div/>").css("width",t(a)).appendTo(b||T.body),d=c[0].offsetWidth;c.remove();return d}function Fb(a,b){var c=Gb(a,b);if(0>c)return null;var d=a.aoData[c];return!d.nTr?h("<td/>").html(B(a,c,b,"display"))[0]:d.anCells[b]}function Gb(a,b){for(var c,d=-1,e=-1,f=0,g=a.aoData.length;f<g;f++)c=B(a,f,b,"display")+"",c=c.replace(Zb,
|
||||
""),c.length>d&&(d=c.length,e=f);return e}function t(a){return null===a?"0px":"number"==typeof a?0>a?"0px":a+"px":a.match(/\d$/)?a+"px":a}function V(a){var b,c,d=[],e=a.aoColumns,f,g,i,j;b=a.aaSortingFixed;c=h.isPlainObject(b);var n=[];f=function(a){a.length&&!h.isArray(a[0])?n.push(a):h.merge(n,a)};h.isArray(b)&&f(b);c&&b.pre&&f(b.pre);f(a.aaSorting);c&&b.post&&f(b.post);for(a=0;a<n.length;a++){j=n[a][0];f=e[j].aDataSort;b=0;for(c=f.length;b<c;b++)g=f[b],i=e[g].sType||"string",n[a]._idx===l&&(n[a]._idx=
|
||||
h.inArray(n[a][1],e[g].asSorting)),d.push({src:j,col:g,dir:n[a][1],index:n[a]._idx,type:i,formatter:k.ext.type.order[i+"-pre"]})}return d}function lb(a){var b,c,d=[],e=k.ext.type.order,f=a.aoData,g=0,i,j=a.aiDisplayMaster,h;Ia(a);h=V(a);b=0;for(c=h.length;b<c;b++)i=h[b],i.formatter&&g++,Hb(a,i.col);if("ssp"!=y(a)&&0!==h.length){b=0;for(c=j.length;b<c;b++)d[j[b]]=b;g===h.length?j.sort(function(a,b){var c,e,g,i,j=h.length,l=f[a]._aSortData,k=f[b]._aSortData;for(g=0;g<j;g++)if(i=h[g],c=l[i.col],e=k[i.col],
|
||||
c=c<e?-1:c>e?1:0,0!==c)return"asc"===i.dir?c:-c;c=d[a];e=d[b];return c<e?-1:c>e?1:0}):j.sort(function(a,b){var c,g,i,j,l=h.length,k=f[a]._aSortData,p=f[b]._aSortData;for(i=0;i<l;i++)if(j=h[i],c=k[j.col],g=p[j.col],j=e[j.type+"-"+j.dir]||e["string-"+j.dir],c=j(c,g),0!==c)return c;c=d[a];g=d[b];return c<g?-1:c>g?1:0})}a.bSorted=!0}function Ib(a){for(var b,c,d=a.aoColumns,e=V(a),a=a.oLanguage.oAria,f=0,g=d.length;f<g;f++){c=d[f];var i=c.asSorting;b=c.sTitle.replace(/<.*?>/g,"");var j=c.nTh;j.removeAttribute("aria-sort");
|
||||
c.bSortable&&(0<e.length&&e[0].col==f?(j.setAttribute("aria-sort","asc"==e[0].dir?"ascending":"descending"),c=i[e[0].index+1]||i[0]):c=i[0],b+="asc"===c?a.sSortAscending:a.sSortDescending);j.setAttribute("aria-label",b)}}function Ua(a,b,c,d){var e=a.aaSorting,f=a.aoColumns[b].asSorting,g=function(a,b){var c=a._idx;c===l&&(c=h.inArray(a[1],f));return c+1<f.length?c+1:b?null:0};"number"===typeof e[0]&&(e=a.aaSorting=[e]);c&&a.oFeatures.bSortMulti?(c=h.inArray(b,D(e,"0")),-1!==c?(b=g(e[c],!0),null===
|
||||
b&&1===e.length&&(b=0),null===b?e.splice(c,1):(e[c][1]=f[b],e[c]._idx=b)):(e.push([b,f[0],0]),e[e.length-1]._idx=0)):e.length&&e[0][0]==b?(b=g(e[0]),e.length=1,e[0][1]=f[b],e[0]._idx=b):(e.length=0,e.push([b,f[0]]),e[0]._idx=0);R(a);"function"==typeof d&&d(a)}function Oa(a,b,c,d){var e=a.aoColumns[c];Va(b,{},function(b){!1!==e.bSortable&&(a.oFeatures.bProcessing?(C(a,!0),setTimeout(function(){Ua(a,c,b.shiftKey,d);"ssp"!==y(a)&&C(a,!1)},0)):Ua(a,c,b.shiftKey,d))})}function xa(a){var b=a.aLastSort,
|
||||
c=a.oClasses.sSortColumn,d=V(a),e=a.oFeatures,f,g;if(e.bSort&&e.bSortClasses){e=0;for(f=b.length;e<f;e++)g=b[e].src,h(D(a.aoData,"anCells",g)).removeClass(c+(2>e?e+1:3));e=0;for(f=d.length;e<f;e++)g=d[e].src,h(D(a.aoData,"anCells",g)).addClass(c+(2>e?e+1:3))}a.aLastSort=d}function Hb(a,b){var c=a.aoColumns[b],d=k.ext.order[c.sSortDataType],e;d&&(e=d.call(a.oInstance,a,b,ba(a,b)));for(var f,g=k.ext.type.order[c.sType+"-pre"],i=0,h=a.aoData.length;i<h;i++)if(c=a.aoData[i],c._aSortData||(c._aSortData=
|
||||
[]),!c._aSortData[b]||d)f=d?e[i]:B(a,i,b,"sort"),c._aSortData[b]=g?g(f):f}function ya(a){if(a.oFeatures.bStateSave&&!a.bDestroying){var b={time:+new Date,start:a._iDisplayStart,length:a._iDisplayLength,order:h.extend(!0,[],a.aaSorting),search:zb(a.oPreviousSearch),columns:h.map(a.aoColumns,function(b,d){return{visible:b.bVisible,search:zb(a.aoPreSearchCols[d])}})};w(a,"aoStateSaveParams","stateSaveParams",[a,b]);a.oSavedState=b;a.fnStateSaveCallback.call(a.oInstance,a,b)}}function Jb(a){var b,c,d=
|
||||
a.aoColumns;if(a.oFeatures.bStateSave){var e=a.fnStateLoadCallback.call(a.oInstance,a);if(e&&e.time&&(b=w(a,"aoStateLoadParams","stateLoadParams",[a,e]),-1===h.inArray(!1,b)&&(b=a.iStateDuration,!(0<b&&e.time<+new Date-1E3*b)&&d.length===e.columns.length))){a.oLoadedState=h.extend(!0,{},e);e.start!==l&&(a._iDisplayStart=e.start,a.iInitDisplayStart=e.start);e.length!==l&&(a._iDisplayLength=e.length);e.order!==l&&(a.aaSorting=[],h.each(e.order,function(b,c){a.aaSorting.push(c[0]>=d.length?[0,c[1]]:
|
||||
c)}));e.search!==l&&h.extend(a.oPreviousSearch,Ab(e.search));b=0;for(c=e.columns.length;b<c;b++){var f=e.columns[b];f.visible!==l&&(d[b].bVisible=f.visible);f.search!==l&&h.extend(a.aoPreSearchCols[b],Ab(f.search))}w(a,"aoStateLoaded","stateLoaded",[a,e])}}}function za(a){var b=k.settings,a=h.inArray(a,D(b,"nTable"));return-1!==a?b[a]:null}function I(a,b,c,d){c="DataTables warning: "+(a?"table id="+a.sTableId+" - ":"")+c;d&&(c+=". For more information about this error, please see http://datatables.net/tn/"+
|
||||
d);if(b)Fa.console&&console.log&&console.log(c);else if(b=k.ext,b=b.sErrMode||b.errMode,a&&w(a,null,"error",[a,d,c]),"alert"==b)alert(c);else{if("throw"==b)throw Error(c);"function"==typeof b&&b(a,d,c)}}function E(a,b,c,d){h.isArray(c)?h.each(c,function(c,d){h.isArray(d)?E(a,b,d[0],d[1]):E(a,b,d)}):(d===l&&(d=c),b[c]!==l&&(a[d]=b[c]))}function Kb(a,b,c){var d,e;for(e in b)b.hasOwnProperty(e)&&(d=b[e],h.isPlainObject(d)?(h.isPlainObject(a[e])||(a[e]={}),h.extend(!0,a[e],d)):a[e]=c&&"data"!==e&&"aaData"!==
|
||||
e&&h.isArray(d)?d.slice():d);return a}function Va(a,b,c){h(a).bind("click.DT",b,function(b){a.blur();c(b)}).bind("keypress.DT",b,function(a){13===a.which&&(a.preventDefault(),c(a))}).bind("selectstart.DT",function(){return!1})}function z(a,b,c,d){c&&a[b].push({fn:c,sName:d})}function w(a,b,c,d){var e=[];b&&(e=h.map(a[b].slice().reverse(),function(b){return b.fn.apply(a.oInstance,d)}));null!==c&&(b=h.Event(c+".dt"),h(a.nTable).trigger(b,d),e.push(b.result));return e}function Sa(a){var b=a._iDisplayStart,
|
||||
c=a.fnDisplayEnd(),d=a._iDisplayLength;b>=c&&(b=c-d);b-=b%d;if(-1===d||0>b)b=0;a._iDisplayStart=b}function Pa(a,b){var c=a.renderer,d=k.ext.renderer[b];return h.isPlainObject(c)&&c[b]?d[c[b]]||d._:"string"===typeof c?d[c]||d._:d._}function y(a){return a.oFeatures.bServerSide?"ssp":a.ajax||a.sAjaxSource?"ajax":"dom"}function Aa(a,b){var c=[],c=Lb.numbers_length,d=Math.floor(c/2);b<=c?c=W(0,b):a<=d?(c=W(0,c-2),c.push("ellipsis"),c.push(b-1)):(a>=b-1-d?c=W(b-(c-2),b):(c=W(a-d+2,a+d-1),c.push("ellipsis"),
|
||||
c.push(b-1)),c.splice(0,0,"ellipsis"),c.splice(0,0,0));c.DT_el="span";return c}function cb(a){h.each({num:function(b){return Ba(b,a)},"num-fmt":function(b){return Ba(b,a,Wa)},"html-num":function(b){return Ba(b,a,Ca)},"html-num-fmt":function(b){return Ba(b,a,Ca,Wa)}},function(b,c){v.type.order[b+a+"-pre"]=c;b.match(/^html\-/)&&(v.type.search[b+a]=v.type.search.html)})}function Mb(a){return function(){var b=[za(this[k.ext.iApiIndex])].concat(Array.prototype.slice.call(arguments));return k.ext.internal[a].apply(this,
|
||||
b)}}var k,v,s,p,u,Xa={},Nb=/[\r\n]/g,Ca=/<.*?>/g,$b=/^[\w\+\-]/,ac=/[\w\+\-]$/,Xb=RegExp("(\\/|\\.|\\*|\\+|\\?|\\||\\(|\\)|\\[|\\]|\\{|\\}|\\\\|\\$|\\^|\\-)","g"),Wa=/[',$£€¥%\u2009\u202F\u20BD\u20a9\u20BArfk]/gi,K=function(a){return!a||!0===a||"-"===a?!0:!1},Ob=function(a){var b=parseInt(a,10);return!isNaN(b)&&isFinite(a)?b:null},Pb=function(a,b){Xa[b]||(Xa[b]=RegExp(va(b),"g"));return"string"===typeof a&&"."!==b?a.replace(/\./g,"").replace(Xa[b],"."):a},Ya=function(a,b,c){var d="string"===typeof a;
|
||||
if(K(a))return!0;b&&d&&(a=Pb(a,b));c&&d&&(a=a.replace(Wa,""));return!isNaN(parseFloat(a))&&isFinite(a)},Qb=function(a,b,c){return K(a)?!0:!(K(a)||"string"===typeof a)?null:Ya(a.replace(Ca,""),b,c)?!0:null},D=function(a,b,c){var d=[],e=0,f=a.length;if(c!==l)for(;e<f;e++)a[e]&&a[e][b]&&d.push(a[e][b][c]);else for(;e<f;e++)a[e]&&d.push(a[e][b]);return d},ja=function(a,b,c,d){var e=[],f=0,h=b.length;if(d!==l)for(;f<h;f++)a[b[f]][c]&&e.push(a[b[f]][c][d]);else for(;f<h;f++)e.push(a[b[f]][c]);return e},
|
||||
W=function(a,b){var c=[],d;b===l?(b=0,d=a):(d=b,b=a);for(var e=b;e<d;e++)c.push(e);return c},Rb=function(a){for(var b=[],c=0,d=a.length;c<d;c++)a[c]&&b.push(a[c]);return b},pa=function(a){var b=[],c,d,e=a.length,f,h=0;d=0;a:for(;d<e;d++){c=a[d];for(f=0;f<h;f++)if(b[f]===c)continue a;b.push(c);h++}return b},A=function(a,b,c){a[b]!==l&&(a[c]=a[b])},da=/\[.*?\]$/,U=/\(\)$/,wa=g("<div>")[0],Yb=wa.textContent!==l,Zb=/<.*?>/g;k=function(a){this.$=function(a,b){return this.api(!0).$(a,b)};this._=function(a,
|
||||
b){return this.api(!0).rows(a,b).data()};this.api=function(a){return a?new s(za(this[v.iApiIndex])):new s(this)};this.fnAddData=function(a,b){var c=this.api(!0),d=g.isArray(a)&&(g.isArray(a[0])||g.isPlainObject(a[0]))?c.rows.add(a):c.row.add(a);(b===l||b)&&c.draw();return d.flatten().toArray()};this.fnAdjustColumnSizing=function(a){var b=this.api(!0).columns.adjust(),c=b.settings()[0],d=c.oScroll;a===l||a?b.draw(!1):(""!==d.sX||""!==d.sY)&&Z(c)};this.fnClearTable=function(a){var b=this.api(!0).clear();
|
||||
(a===l||a)&&b.draw()};this.fnClose=function(a){this.api(!0).row(a).child.hide()};this.fnDeleteRow=function(a,b,c){var d=this.api(!0),a=d.rows(a),e=a.settings()[0],g=e.aoData[a[0][0]];a.remove();b&&b.call(this,e,g);(c===l||c)&&d.draw();return g};this.fnDestroy=function(a){this.api(!0).destroy(a)};this.fnDraw=function(a){this.api(!0).draw(a)};this.fnFilter=function(a,b,c,d,e,g){e=this.api(!0);null===b||b===l?e.search(a,c,d,g):e.column(b).search(a,c,d,g);e.draw()};this.fnGetData=function(a,b){var c=
|
||||
if(K(a))return!0;b&&d&&(a=Pb(a,b));c&&d&&(a=a.replace(Wa,""));return!isNaN(parseFloat(a))&&isFinite(a)},Qb=function(a,b,c){return K(a)?!0:!(K(a)||"string"===typeof a)?null:Ya(a.replace(Ca,""),b,c)?!0:null},D=function(a,b,c){var d=[],e=0,f=a.length;if(c!==l)for(;e<f;e++)a[e]&&a[e][b]&&d.push(a[e][b][c]);else for(;e<f;e++)a[e]&&d.push(a[e][b]);return d},ja=function(a,b,c,d){var e=[],f=0,g=b.length;if(d!==l)for(;f<g;f++)a[b[f]][c]&&e.push(a[b[f]][c][d]);else for(;f<g;f++)e.push(a[b[f]][c]);return e},
|
||||
W=function(a,b){var c=[],d;b===l?(b=0,d=a):(d=b,b=a);for(var e=b;e<d;e++)c.push(e);return c},Rb=function(a){for(var b=[],c=0,d=a.length;c<d;c++)a[c]&&b.push(a[c]);return b},pa=function(a){var b=[],c,d,e=a.length,f,g=0;d=0;a:for(;d<e;d++){c=a[d];for(f=0;f<g;f++)if(b[f]===c)continue a;b.push(c);g++}return b},A=function(a,b,c){a[b]!==l&&(a[c]=a[b])},da=/\[.*?\]$/,U=/\(\)$/,wa=h("<div>")[0],Yb=wa.textContent!==l,Zb=/<.*?>/g;k=function(a){this.$=function(a,b){return this.api(!0).$(a,b)};this._=function(a,
|
||||
b){return this.api(!0).rows(a,b).data()};this.api=function(a){return a?new s(za(this[v.iApiIndex])):new s(this)};this.fnAddData=function(a,b){var c=this.api(!0),d=h.isArray(a)&&(h.isArray(a[0])||h.isPlainObject(a[0]))?c.rows.add(a):c.row.add(a);(b===l||b)&&c.draw();return d.flatten().toArray()};this.fnAdjustColumnSizing=function(a){var b=this.api(!0).columns.adjust(),c=b.settings()[0],d=c.oScroll;a===l||a?b.draw(!1):(""!==d.sX||""!==d.sY)&&Z(c)};this.fnClearTable=function(a){var b=this.api(!0).clear();
|
||||
(a===l||a)&&b.draw()};this.fnClose=function(a){this.api(!0).row(a).child.hide()};this.fnDeleteRow=function(a,b,c){var d=this.api(!0),a=d.rows(a),e=a.settings()[0],h=e.aoData[a[0][0]];a.remove();b&&b.call(this,e,h);(c===l||c)&&d.draw();return h};this.fnDestroy=function(a){this.api(!0).destroy(a)};this.fnDraw=function(a){this.api(!0).draw(a)};this.fnFilter=function(a,b,c,d,e,h){e=this.api(!0);null===b||b===l?e.search(a,c,d,h):e.column(b).search(a,c,d,h);e.draw()};this.fnGetData=function(a,b){var c=
|
||||
this.api(!0);if(a!==l){var d=a.nodeName?a.nodeName.toLowerCase():"";return b!==l||"td"==d||"th"==d?c.cell(a,b).data():c.row(a).data()||null}return c.data().toArray()};this.fnGetNodes=function(a){var b=this.api(!0);return a!==l?b.row(a).node():b.rows().nodes().flatten().toArray()};this.fnGetPosition=function(a){var b=this.api(!0),c=a.nodeName.toUpperCase();return"TR"==c?b.row(a).index():"TD"==c||"TH"==c?(a=b.cell(a).index(),[a.row,a.columnVisible,a.column]):null};this.fnIsOpen=function(a){return this.api(!0).row(a).child.isShown()};
|
||||
this.fnOpen=function(a,b,c){return this.api(!0).row(a).child(b,c).show().child()[0]};this.fnPageChange=function(a,b){var c=this.api(!0).page(a);(b===l||b)&&c.draw(!1)};this.fnSetColumnVis=function(a,b,c){a=this.api(!0).column(a).visible(b);(c===l||c)&&a.columns.adjust().draw()};this.fnSettings=function(){return za(this[v.iApiIndex])};this.fnSort=function(a){this.api(!0).order(a).draw()};this.fnSortListener=function(a,b,c){this.api(!0).order.listener(a,b,c)};this.fnUpdate=function(a,b,c,d,e){var g=
|
||||
this.api(!0);c===l||null===c?g.row(b).data(a):g.cell(b,c).data(a);(e===l||e)&&g.columns.adjust();(d===l||d)&&g.draw();return 0};this.fnVersionCheck=v.fnVersionCheck;var b=this,c=a===l,d=this.length;c&&(a={});this.oApi=this.internal=v.internal;for(var e in k.ext.internal)e&&(this[e]=Mb(e));this.each(function(){var e={},e=1<d?Kb(e,a,!0):a,h=0,i,j=this.getAttribute("id"),n=!1,m=k.defaults,r=g(this);if("table"!=this.nodeName.toLowerCase())I(null,0,"Non-table node initialisation ("+this.nodeName+")",2);
|
||||
else{db(m);eb(m.column);H(m,m,!0);H(m.column,m.column,!0);H(m,g.extend(e,r.data()));var q=k.settings,h=0;for(i=q.length;h<i;h++){var p=q[h];if(p.nTable==this||p.nTHead.parentNode==this||p.nTFoot&&p.nTFoot.parentNode==this){h=e.bRetrieve!==l?e.bRetrieve:m.bRetrieve;if(c||h)return p.oInstance;if(e.bDestroy!==l?e.bDestroy:m.bDestroy){p.oInstance.fnDestroy();break}else{I(p,0,"Cannot reinitialise DataTable",3);return}}if(p.sTableId==this.id){q.splice(h,1);break}}if(null===j||""===j)this.id=j="DataTables_Table_"+
|
||||
k.ext._unique++;var o=g.extend(!0,{},k.models.oSettings,{sDestroyWidth:r[0].style.width,sInstance:j,sTableId:j});o.nTable=this;o.oApi=b.internal;o.oInit=e;q.push(o);o.oInstance=1===b.length?b:r.dataTable();db(e);e.oLanguage&&S(e.oLanguage);e.aLengthMenu&&!e.iDisplayLength&&(e.iDisplayLength=g.isArray(e.aLengthMenu[0])?e.aLengthMenu[0][0]:e.aLengthMenu[0]);e=Kb(g.extend(!0,{},m),e);E(o.oFeatures,e,"bPaginate bLengthChange bFilter bSort bSortMulti bInfo bProcessing bAutoWidth bSortClasses bServerSide bDeferRender".split(" "));
|
||||
this.fnOpen=function(a,b,c){return this.api(!0).row(a).child(b,c).show().child()[0]};this.fnPageChange=function(a,b){var c=this.api(!0).page(a);(b===l||b)&&c.draw(!1)};this.fnSetColumnVis=function(a,b,c){a=this.api(!0).column(a).visible(b);(c===l||c)&&a.columns.adjust().draw()};this.fnSettings=function(){return za(this[v.iApiIndex])};this.fnSort=function(a){this.api(!0).order(a).draw()};this.fnSortListener=function(a,b,c){this.api(!0).order.listener(a,b,c)};this.fnUpdate=function(a,b,c,d,e){var h=
|
||||
this.api(!0);c===l||null===c?h.row(b).data(a):h.cell(b,c).data(a);(e===l||e)&&h.columns.adjust();(d===l||d)&&h.draw();return 0};this.fnVersionCheck=v.fnVersionCheck;var b=this,c=a===l,d=this.length;c&&(a={});this.oApi=this.internal=v.internal;for(var e in k.ext.internal)e&&(this[e]=Mb(e));this.each(function(){var e={},e=1<d?Kb(e,a,!0):a,g=0,i,j=this.getAttribute("id"),n=!1,m=k.defaults,r=h(this);if("table"!=this.nodeName.toLowerCase())I(null,0,"Non-table node initialisation ("+this.nodeName+")",2);
|
||||
else{db(m);eb(m.column);H(m,m,!0);H(m.column,m.column,!0);H(m,h.extend(e,r.data()));var q=k.settings,g=0;for(i=q.length;g<i;g++){var p=q[g];if(p.nTable==this||p.nTHead.parentNode==this||p.nTFoot&&p.nTFoot.parentNode==this){g=e.bRetrieve!==l?e.bRetrieve:m.bRetrieve;if(c||g)return p.oInstance;if(e.bDestroy!==l?e.bDestroy:m.bDestroy){p.oInstance.fnDestroy();break}else{I(p,0,"Cannot reinitialise DataTable",3);return}}if(p.sTableId==this.id){q.splice(g,1);break}}if(null===j||""===j)this.id=j="DataTables_Table_"+
|
||||
k.ext._unique++;var o=h.extend(!0,{},k.models.oSettings,{sDestroyWidth:r[0].style.width,sInstance:j,sTableId:j});o.nTable=this;o.oApi=b.internal;o.oInit=e;q.push(o);o.oInstance=1===b.length?b:r.dataTable();db(e);e.oLanguage&&S(e.oLanguage);e.aLengthMenu&&!e.iDisplayLength&&(e.iDisplayLength=h.isArray(e.aLengthMenu[0])?e.aLengthMenu[0][0]:e.aLengthMenu[0]);e=Kb(h.extend(!0,{},m),e);E(o.oFeatures,e,"bPaginate bLengthChange bFilter bSort bSortMulti bInfo bProcessing bAutoWidth bSortClasses bServerSide bDeferRender".split(" "));
|
||||
E(o,e,["asStripeClasses","ajax","fnServerData","fnFormatNumber","sServerMethod","aaSorting","aaSortingFixed","aLengthMenu","sPaginationType","sAjaxSource","sAjaxDataProp","iStateDuration","sDom","bSortCellsTop","iTabIndex","fnStateLoadCallback","fnStateSaveCallback","renderer","searchDelay","rowId",["iCookieDuration","iStateDuration"],["oSearch","oPreviousSearch"],["aoSearchCols","aoPreSearchCols"],["iDisplayLength","_iDisplayLength"],["bJQueryUI","bJUI"]]);E(o.oScroll,e,[["sScrollX","sX"],["sScrollXInner",
|
||||
"sXInner"],["sScrollY","sY"],["bScrollCollapse","bCollapse"]]);E(o.oLanguage,e,"fnInfoCallback");z(o,"aoDrawCallback",e.fnDrawCallback,"user");z(o,"aoServerParams",e.fnServerParams,"user");z(o,"aoStateSaveParams",e.fnStateSaveParams,"user");z(o,"aoStateLoadParams",e.fnStateLoadParams,"user");z(o,"aoStateLoaded",e.fnStateLoaded,"user");z(o,"aoRowCallback",e.fnRowCallback,"user");z(o,"aoRowCreatedCallback",e.fnCreatedRow,"user");z(o,"aoHeaderCallback",e.fnHeaderCallback,"user");z(o,"aoFooterCallback",
|
||||
e.fnFooterCallback,"user");z(o,"aoInitComplete",e.fnInitComplete,"user");z(o,"aoPreDrawCallback",e.fnPreDrawCallback,"user");o.rowIdFn=P(e.rowId);fb(o);j=o.oClasses;e.bJQueryUI?(g.extend(j,k.ext.oJUIClasses,e.oClasses),e.sDom===m.sDom&&"lfrtip"===m.sDom&&(o.sDom='<"H"lfr>t<"F"ip>'),o.renderer)?g.isPlainObject(o.renderer)&&!o.renderer.header&&(o.renderer.header="jqueryui"):o.renderer="jqueryui":g.extend(j,k.ext.classes,e.oClasses);r.addClass(j.sTable);o.iInitDisplayStart===l&&(o.iInitDisplayStart=
|
||||
e.iDisplayStart,o._iDisplayStart=e.iDisplayStart);null!==e.iDeferLoading&&(o.bDeferLoading=!0,h=g.isArray(e.iDeferLoading),o._iRecordsDisplay=h?e.iDeferLoading[0]:e.iDeferLoading,o._iRecordsTotal=h?e.iDeferLoading[1]:e.iDeferLoading);var s=o.oLanguage;g.extend(!0,s,e.oLanguage);""!==s.sUrl&&(g.ajax({dataType:"json",url:s.sUrl,success:function(a){S(a);H(m.oLanguage,a);g.extend(true,s,a);ia(o)},error:function(){ia(o)}}),n=!0);null===e.asStripeClasses&&(o.asStripeClasses=[j.sStripeOdd,j.sStripeEven]);
|
||||
var h=o.asStripeClasses,u=r.children("tbody").find("tr").eq(0);-1!==g.inArray(!0,g.map(h,function(a){return u.hasClass(a)}))&&(g("tbody tr",this).removeClass(h.join(" ")),o.asDestroyStripes=h.slice());q=[];h=this.getElementsByTagName("thead");0!==h.length&&(fa(o.aoHeader,h[0]),q=qa(o));if(null===e.aoColumns){p=[];h=0;for(i=q.length;h<i;h++)p.push(null)}else p=e.aoColumns;h=0;for(i=p.length;h<i;h++)Ga(o,q?q[h]:null);hb(o,e.aoColumnDefs,p,function(a,b){la(o,a,b)});if(u.length){var t=function(a,b){return a.getAttribute("data-"+
|
||||
b)!==null?b:null};g(u[0]).children("th, td").each(function(a,b){var c=o.aoColumns[a];if(c.mData===a){var d=t(b,"sort")||t(b,"order"),e=t(b,"filter")||t(b,"search");if(d!==null||e!==null){c.mData={_:a+".display",sort:d!==null?a+".@data-"+d:l,type:d!==null?a+".@data-"+d:l,filter:e!==null?a+".@data-"+e:l};la(o,a)}}})}var v=o.oFeatures;e.bStateSave&&(v.bStateSave=!0,Jb(o,e),z(o,"aoDrawCallback",ya,"state_save"));if(e.aaSorting===l){q=o.aaSorting;h=0;for(i=q.length;h<i;h++)q[h][1]=o.aoColumns[h].asSorting[0]}xa(o);
|
||||
v.bSort&&z(o,"aoDrawCallback",function(){if(o.bSorted){var a=V(o),b={};g.each(a,function(a,c){b[c.src]=c.dir});w(o,null,"order",[o,a,b]);Ib(o)}});z(o,"aoDrawCallback",function(){(o.bSorted||y(o)==="ssp"||v.bDeferRender)&&xa(o)},"sc");h=r.children("caption").each(function(){this._captionSide=r.css("caption-side")});i=r.children("thead");0===i.length&&(i=g("<thead/>").appendTo(this));o.nTHead=i[0];i=r.children("tbody");0===i.length&&(i=g("<tbody/>").appendTo(this));o.nTBody=i[0];i=r.children("tfoot");
|
||||
if(0===i.length&&0<h.length&&(""!==o.oScroll.sX||""!==o.oScroll.sY))i=g("<tfoot/>").appendTo(this);0===i.length||0===i.children().length?r.addClass(j.sNoFooter):0<i.length&&(o.nTFoot=i[0],fa(o.aoFooter,o.nTFoot));if(e.aaData)for(h=0;h<e.aaData.length;h++)L(o,e.aaData[h]);else(o.bDeferLoading||"dom"==y(o))&&ma(o,g(o.nTBody).children("tr"));o.aiDisplay=o.aiDisplayMaster.slice();o.bInitialised=!0;!1===n&&ia(o)}});b=null;return this};var Sb=[],x=Array.prototype,bc=function(a){var b,c,d=k.settings,e=g.map(d,
|
||||
function(a){return a.nTable});if(a){if(a.nTable&&a.oApi)return[a];if(a.nodeName&&"table"===a.nodeName.toLowerCase())return b=g.inArray(a,e),-1!==b?[d[b]]:null;if(a&&"function"===typeof a.settings)return a.settings().toArray();"string"===typeof a?c=g(a):a instanceof g&&(c=a)}else return[];if(c)return c.map(function(){b=g.inArray(this,e);return-1!==b?d[b]:null}).toArray()};s=function(a,b){if(!(this instanceof s))return new s(a,b);var c=[],d=function(a){(a=bc(a))&&(c=c.concat(a))};if(g.isArray(a))for(var e=
|
||||
0,f=a.length;e<f;e++)d(a[e]);else d(a);this.context=pa(c);b&&g.merge(this,b);this.selector={rows:null,cols:null,opts:null};s.extend(this,this,Sb)};k.Api=s;g.extend(s.prototype,{any:function(){return 0!==this.count()},concat:x.concat,context:[],count:function(){return this.flatten().length},each:function(a){for(var b=0,c=this.length;b<c;b++)a.call(this,this[b],b,this);return this},eq:function(a){var b=this.context;return b.length>a?new s(b[a],this[a]):null},filter:function(a){var b=[];if(x.filter)b=
|
||||
x.filter.call(this,a,this);else for(var c=0,d=this.length;c<d;c++)a.call(this,this[c],c,this)&&b.push(this[c]);return new s(this.context,b)},flatten:function(){var a=[];return new s(this.context,a.concat.apply(a,this.toArray()))},join:x.join,indexOf:x.indexOf||function(a,b){for(var c=b||0,d=this.length;c<d;c++)if(this[c]===a)return c;return-1},iterator:function(a,b,c,d){var e=[],f,h,g,j,n,m=this.context,k,q,p=this.selector;"string"===typeof a&&(d=c,c=b,b=a,a=!1);h=0;for(g=m.length;h<g;h++){var o=
|
||||
new s(m[h]);if("table"===b)f=c.call(o,m[h],h),f!==l&&e.push(f);else if("columns"===b||"rows"===b)f=c.call(o,m[h],this[h],h),f!==l&&e.push(f);else if("column"===b||"column-rows"===b||"row"===b||"cell"===b){q=this[h];"column-rows"===b&&(k=Da(m[h],p.opts));j=0;for(n=q.length;j<n;j++)f=q[j],f="cell"===b?c.call(o,m[h],f.row,f.column,h,j):c.call(o,m[h],f,h,j,k),f!==l&&e.push(f)}}return e.length||d?(a=new s(m,a?e.concat.apply([],e):e),b=a.selector,b.rows=p.rows,b.cols=p.cols,b.opts=p.opts,a):this},lastIndexOf:x.lastIndexOf||
|
||||
e.fnFooterCallback,"user");z(o,"aoInitComplete",e.fnInitComplete,"user");z(o,"aoPreDrawCallback",e.fnPreDrawCallback,"user");o.rowIdFn=P(e.rowId);fb(o);j=o.oClasses;e.bJQueryUI?(h.extend(j,k.ext.oJUIClasses,e.oClasses),e.sDom===m.sDom&&"lfrtip"===m.sDom&&(o.sDom='<"H"lfr>t<"F"ip>'),o.renderer)?h.isPlainObject(o.renderer)&&!o.renderer.header&&(o.renderer.header="jqueryui"):o.renderer="jqueryui":h.extend(j,k.ext.classes,e.oClasses);r.addClass(j.sTable);o.iInitDisplayStart===l&&(o.iInitDisplayStart=
|
||||
e.iDisplayStart,o._iDisplayStart=e.iDisplayStart);null!==e.iDeferLoading&&(o.bDeferLoading=!0,g=h.isArray(e.iDeferLoading),o._iRecordsDisplay=g?e.iDeferLoading[0]:e.iDeferLoading,o._iRecordsTotal=g?e.iDeferLoading[1]:e.iDeferLoading);var s=o.oLanguage;h.extend(!0,s,e.oLanguage);""!==s.sUrl&&(h.ajax({dataType:"json",url:s.sUrl,success:function(a){S(a);H(m.oLanguage,a);h.extend(true,s,a);ia(o)},error:function(){ia(o)}}),n=!0);null===e.asStripeClasses&&(o.asStripeClasses=[j.sStripeOdd,j.sStripeEven]);
|
||||
var g=o.asStripeClasses,u=r.children("tbody").find("tr").eq(0);-1!==h.inArray(!0,h.map(g,function(a){return u.hasClass(a)}))&&(h("tbody tr",this).removeClass(g.join(" ")),o.asDestroyStripes=g.slice());q=[];g=this.getElementsByTagName("thead");0!==g.length&&(fa(o.aoHeader,g[0]),q=qa(o));if(null===e.aoColumns){p=[];g=0;for(i=q.length;g<i;g++)p.push(null)}else p=e.aoColumns;g=0;for(i=p.length;g<i;g++)Ga(o,q?q[g]:null);hb(o,e.aoColumnDefs,p,function(a,b){la(o,a,b)});if(u.length){var t=function(a,b){return a.getAttribute("data-"+
|
||||
b)!==null?b:null};h(u[0]).children("th, td").each(function(a,b){var c=o.aoColumns[a];if(c.mData===a){var d=t(b,"sort")||t(b,"order"),e=t(b,"filter")||t(b,"search");if(d!==null||e!==null){c.mData={_:a+".display",sort:d!==null?a+".@data-"+d:l,type:d!==null?a+".@data-"+d:l,filter:e!==null?a+".@data-"+e:l};la(o,a)}}})}var v=o.oFeatures;e.bStateSave&&(v.bStateSave=!0,Jb(o,e),z(o,"aoDrawCallback",ya,"state_save"));if(e.aaSorting===l){q=o.aaSorting;g=0;for(i=q.length;g<i;g++)q[g][1]=o.aoColumns[g].asSorting[0]}xa(o);
|
||||
v.bSort&&z(o,"aoDrawCallback",function(){if(o.bSorted){var a=V(o),b={};h.each(a,function(a,c){b[c.src]=c.dir});w(o,null,"order",[o,a,b]);Ib(o)}});z(o,"aoDrawCallback",function(){(o.bSorted||y(o)==="ssp"||v.bDeferRender)&&xa(o)},"sc");g=r.children("caption").each(function(){this._captionSide=r.css("caption-side")});i=r.children("thead");0===i.length&&(i=h("<thead/>").appendTo(this));o.nTHead=i[0];i=r.children("tbody");0===i.length&&(i=h("<tbody/>").appendTo(this));o.nTBody=i[0];i=r.children("tfoot");
|
||||
if(0===i.length&&0<g.length&&(""!==o.oScroll.sX||""!==o.oScroll.sY))i=h("<tfoot/>").appendTo(this);0===i.length||0===i.children().length?r.addClass(j.sNoFooter):0<i.length&&(o.nTFoot=i[0],fa(o.aoFooter,o.nTFoot));if(e.aaData)for(g=0;g<e.aaData.length;g++)L(o,e.aaData[g]);else(o.bDeferLoading||"dom"==y(o))&&ma(o,h(o.nTBody).children("tr"));o.aiDisplay=o.aiDisplayMaster.slice();o.bInitialised=!0;!1===n&&ia(o)}});b=null;return this};var Sb=[],x=Array.prototype,bc=function(a){var b,c,d=k.settings,e=h.map(d,
|
||||
function(a){return a.nTable});if(a){if(a.nTable&&a.oApi)return[a];if(a.nodeName&&"table"===a.nodeName.toLowerCase())return b=h.inArray(a,e),-1!==b?[d[b]]:null;if(a&&"function"===typeof a.settings)return a.settings().toArray();"string"===typeof a?c=h(a):a instanceof h&&(c=a)}else return[];if(c)return c.map(function(){b=h.inArray(this,e);return-1!==b?d[b]:null}).toArray()};s=function(a,b){if(!(this instanceof s))return new s(a,b);var c=[],d=function(a){(a=bc(a))&&(c=c.concat(a))};if(h.isArray(a))for(var e=
|
||||
0,f=a.length;e<f;e++)d(a[e]);else d(a);this.context=pa(c);b&&h.merge(this,b);this.selector={rows:null,cols:null,opts:null};s.extend(this,this,Sb)};k.Api=s;h.extend(s.prototype,{any:function(){return 0!==this.count()},concat:x.concat,context:[],count:function(){return this.flatten().length},each:function(a){for(var b=0,c=this.length;b<c;b++)a.call(this,this[b],b,this);return this},eq:function(a){var b=this.context;return b.length>a?new s(b[a],this[a]):null},filter:function(a){var b=[];if(x.filter)b=
|
||||
x.filter.call(this,a,this);else for(var c=0,d=this.length;c<d;c++)a.call(this,this[c],c,this)&&b.push(this[c]);return new s(this.context,b)},flatten:function(){var a=[];return new s(this.context,a.concat.apply(a,this.toArray()))},join:x.join,indexOf:x.indexOf||function(a,b){for(var c=b||0,d=this.length;c<d;c++)if(this[c]===a)return c;return-1},iterator:function(a,b,c,d){var e=[],f,g,h,j,n,m=this.context,k,q,p=this.selector;"string"===typeof a&&(d=c,c=b,b=a,a=!1);g=0;for(h=m.length;g<h;g++){var o=
|
||||
new s(m[g]);if("table"===b)f=c.call(o,m[g],g),f!==l&&e.push(f);else if("columns"===b||"rows"===b)f=c.call(o,m[g],this[g],g),f!==l&&e.push(f);else if("column"===b||"column-rows"===b||"row"===b||"cell"===b){q=this[g];"column-rows"===b&&(k=Da(m[g],p.opts));j=0;for(n=q.length;j<n;j++)f=q[j],f="cell"===b?c.call(o,m[g],f.row,f.column,g,j):c.call(o,m[g],f,g,j,k),f!==l&&e.push(f)}}return e.length||d?(a=new s(m,a?e.concat.apply([],e):e),b=a.selector,b.rows=p.rows,b.cols=p.cols,b.opts=p.opts,a):this},lastIndexOf:x.lastIndexOf||
|
||||
function(a,b){return this.indexOf.apply(this.toArray.reverse(),arguments)},length:0,map:function(a){var b=[];if(x.map)b=x.map.call(this,a,this);else for(var c=0,d=this.length;c<d;c++)b.push(a.call(this,this[c],c));return new s(this.context,b)},pluck:function(a){return this.map(function(b){return b[a]})},pop:x.pop,push:x.push,reduce:x.reduce||function(a,b){return gb(this,a,b,0,this.length,1)},reduceRight:x.reduceRight||function(a,b){return gb(this,a,b,this.length-1,-1,-1)},reverse:x.reverse,selector:null,
|
||||
shift:x.shift,sort:x.sort,splice:x.splice,toArray:function(){return x.slice.call(this)},to$:function(){return g(this)},toJQuery:function(){return g(this)},unique:function(){return new s(this.context,pa(this))},unshift:x.unshift});s.extend=function(a,b,c){if(c.length&&b&&(b instanceof s||b.__dt_wrapper)){var d,e,f,h=function(a,b,c){return function(){var d=b.apply(a,arguments);s.extend(d,d,c.methodExt);return d}};d=0;for(e=c.length;d<e;d++)f=c[d],b[f.name]="function"===typeof f.val?h(a,f.val,f):g.isPlainObject(f.val)?
|
||||
{}:f.val,b[f.name].__dt_wrapper=!0,s.extend(a,b[f.name],f.propExt)}};s.register=p=function(a,b){if(g.isArray(a))for(var c=0,d=a.length;c<d;c++)s.register(a[c],b);else for(var e=a.split("."),f=Sb,h,i,c=0,d=e.length;c<d;c++){h=(i=-1!==e[c].indexOf("()"))?e[c].replace("()",""):e[c];var j;a:{j=0;for(var n=f.length;j<n;j++)if(f[j].name===h){j=f[j];break a}j=null}j||(j={name:h,val:{},methodExt:[],propExt:[]},f.push(j));c===d-1?j.val=b:f=i?j.methodExt:j.propExt}};s.registerPlural=u=function(a,b,c){s.register(a,
|
||||
c);s.register(b,function(){var a=c.apply(this,arguments);return a===this?this:a instanceof s?a.length?g.isArray(a[0])?new s(a.context,a[0]):a[0]:l:a})};p("tables()",function(a){var b;if(a){b=s;var c=this.context;if("number"===typeof a)a=[c[a]];else var d=g.map(c,function(a){return a.nTable}),a=g(d).filter(a).map(function(){var a=g.inArray(this,d);return c[a]}).toArray();b=new b(a)}else b=this;return b});p("table()",function(a){var a=this.tables(a),b=a.context;return b.length?new s(b[0]):a});u("tables().nodes()",
|
||||
shift:x.shift,sort:x.sort,splice:x.splice,toArray:function(){return x.slice.call(this)},to$:function(){return h(this)},toJQuery:function(){return h(this)},unique:function(){return new s(this.context,pa(this))},unshift:x.unshift});s.extend=function(a,b,c){if(c.length&&b&&(b instanceof s||b.__dt_wrapper)){var d,e,f,g=function(a,b,c){return function(){var d=b.apply(a,arguments);s.extend(d,d,c.methodExt);return d}};d=0;for(e=c.length;d<e;d++)f=c[d],b[f.name]="function"===typeof f.val?g(a,f.val,f):h.isPlainObject(f.val)?
|
||||
{}:f.val,b[f.name].__dt_wrapper=!0,s.extend(a,b[f.name],f.propExt)}};s.register=p=function(a,b){if(h.isArray(a))for(var c=0,d=a.length;c<d;c++)s.register(a[c],b);else for(var e=a.split("."),f=Sb,g,i,c=0,d=e.length;c<d;c++){g=(i=-1!==e[c].indexOf("()"))?e[c].replace("()",""):e[c];var j;a:{j=0;for(var n=f.length;j<n;j++)if(f[j].name===g){j=f[j];break a}j=null}j||(j={name:g,val:{},methodExt:[],propExt:[]},f.push(j));c===d-1?j.val=b:f=i?j.methodExt:j.propExt}};s.registerPlural=u=function(a,b,c){s.register(a,
|
||||
c);s.register(b,function(){var a=c.apply(this,arguments);return a===this?this:a instanceof s?a.length?h.isArray(a[0])?new s(a.context,a[0]):a[0]:l:a})};p("tables()",function(a){var b;if(a){b=s;var c=this.context;if("number"===typeof a)a=[c[a]];else var d=h.map(c,function(a){return a.nTable}),a=h(d).filter(a).map(function(){var a=h.inArray(this,d);return c[a]}).toArray();b=new b(a)}else b=this;return b});p("table()",function(a){var a=this.tables(a),b=a.context;return b.length?new s(b[0]):a});u("tables().nodes()",
|
||||
"table().node()",function(){return this.iterator("table",function(a){return a.nTable},1)});u("tables().body()","table().body()",function(){return this.iterator("table",function(a){return a.nTBody},1)});u("tables().header()","table().header()",function(){return this.iterator("table",function(a){return a.nTHead},1)});u("tables().footer()","table().footer()",function(){return this.iterator("table",function(a){return a.nTFoot},1)});u("tables().containers()","table().container()",function(){return this.iterator("table",
|
||||
function(a){return a.nTableWrapper},1)});p("draw()",function(a){return this.iterator("table",function(b){"page"===a?M(b):("string"===typeof a&&(a="full-hold"===a?!1:!0),R(b,!1===a))})});p("page()",function(a){return a===l?this.page.info().page:this.iterator("table",function(b){Ta(b,a)})});p("page.info()",function(){if(0===this.context.length)return l;var a=this.context[0],b=a._iDisplayStart,c=a._iDisplayLength,d=a.fnRecordsDisplay(),e=-1===c;return{page:e?0:Math.floor(b/c),pages:e?1:Math.ceil(d/c),
|
||||
start:b,end:a.fnDisplayEnd(),length:c,recordsTotal:a.fnRecordsTotal(),recordsDisplay:d,serverSide:"ssp"===y(a)}});p("page.len()",function(a){return a===l?0!==this.context.length?this.context[0]._iDisplayLength:l:this.iterator("table",function(b){Ra(b,a)})});var Tb=function(a,b,c){if(c){var d=new s(a);d.one("draw",function(){c(d.ajax.json())})}if("ssp"==y(a))R(a,b);else{C(a,!0);var e=a.jqXHR;e&&4!==e.readyState&&e.abort();ra(a,[],function(c){na(a);for(var c=sa(a,c),d=0,e=c.length;d<e;d++)L(a,c[d]);
|
||||
R(a,b);C(a,!1)})}};p("ajax.json()",function(){var a=this.context;if(0<a.length)return a[0].json});p("ajax.params()",function(){var a=this.context;if(0<a.length)return a[0].oAjaxData});p("ajax.reload()",function(a,b){return this.iterator("table",function(c){Tb(c,!1===b,a)})});p("ajax.url()",function(a){var b=this.context;if(a===l){if(0===b.length)return l;b=b[0];return b.ajax?g.isPlainObject(b.ajax)?b.ajax.url:b.ajax:b.sAjaxSource}return this.iterator("table",function(b){g.isPlainObject(b.ajax)?b.ajax.url=
|
||||
a:b.ajax=a})});p("ajax.url().load()",function(a,b){return this.iterator("table",function(c){Tb(c,!1===b,a)})});var Za=function(a,b,c,d,e){var f=[],h,i,j,n,m,k;j=typeof b;if(!b||"string"===j||"function"===j||b.length===l)b=[b];j=0;for(n=b.length;j<n;j++){i=b[j]&&b[j].split?b[j].split(","):[b[j]];m=0;for(k=i.length;m<k;m++)(h=c("string"===typeof i[m]?g.trim(i[m]):i[m]))&&h.length&&(f=f.concat(h))}a=v.selector[a];if(a.length){j=0;for(n=a.length;j<n;j++)f=a[j](d,e,f)}return pa(f)},$a=function(a){a||(a=
|
||||
{});a.filter&&a.search===l&&(a.search=a.filter);return g.extend({search:"none",order:"current",page:"all"},a)},ab=function(a){for(var b=0,c=a.length;b<c;b++)if(0<a[b].length)return a[0]=a[b],a[0].length=1,a.length=1,a.context=[a.context[b]],a;a.length=0;return a},Da=function(a,b){var c,d,e,f=[],h=a.aiDisplay;c=a.aiDisplayMaster;var i=b.search;d=b.order;e=b.page;if("ssp"==y(a))return"removed"===i?[]:W(0,c.length);if("current"==e){c=a._iDisplayStart;for(d=a.fnDisplayEnd();c<d;c++)f.push(h[c])}else if("current"==
|
||||
d||"applied"==d)f="none"==i?c.slice():"applied"==i?h.slice():g.map(c,function(a){return-1===g.inArray(a,h)?a:null});else if("index"==d||"original"==d){c=0;for(d=a.aoData.length;c<d;c++)"none"==i?f.push(c):(e=g.inArray(c,h),(-1===e&&"removed"==i||0<=e&&"applied"==i)&&f.push(c))}return f};p("rows()",function(a,b){a===l?a="":g.isPlainObject(a)&&(b=a,a="");var b=$a(b),c=this.iterator("table",function(c){var e=b;return Za("row",a,function(a){var b=Ob(a);if(b!==null&&!e)return[b];var i=Da(c,e);if(b!==null&&
|
||||
g.inArray(b,i)!==-1)return[b];if(!a)return i;if(typeof a==="function")return g.map(i,function(b){var e=c.aoData[b];return a(b,e._aData,e.nTr)?b:null});b=Rb(ja(c.aoData,i,"nTr"));if(a.nodeName&&g.inArray(a,b)!==-1)return[a._DT_RowIndex];if(typeof a==="string"&&a.charAt(0)==="#"){i=c.aIds[a.replace(/^#/,"")];if(i!==l)return[i.idx]}return g(b).filter(a).map(function(){return this._DT_RowIndex}).toArray()},c,e)},1);c.selector.rows=a;c.selector.opts=b;return c});p("rows().nodes()",function(){return this.iterator("row",
|
||||
R(a,b);C(a,!1)})}};p("ajax.json()",function(){var a=this.context;if(0<a.length)return a[0].json});p("ajax.params()",function(){var a=this.context;if(0<a.length)return a[0].oAjaxData});p("ajax.reload()",function(a,b){return this.iterator("table",function(c){Tb(c,!1===b,a)})});p("ajax.url()",function(a){var b=this.context;if(a===l){if(0===b.length)return l;b=b[0];return b.ajax?h.isPlainObject(b.ajax)?b.ajax.url:b.ajax:b.sAjaxSource}return this.iterator("table",function(b){h.isPlainObject(b.ajax)?b.ajax.url=
|
||||
a:b.ajax=a})});p("ajax.url().load()",function(a,b){return this.iterator("table",function(c){Tb(c,!1===b,a)})});var Za=function(a,b,c,d,e){var f=[],g,i,j,n,m,k;j=typeof b;if(!b||"string"===j||"function"===j||b.length===l)b=[b];j=0;for(n=b.length;j<n;j++){i=b[j]&&b[j].split?b[j].split(","):[b[j]];m=0;for(k=i.length;m<k;m++)(g=c("string"===typeof i[m]?h.trim(i[m]):i[m]))&&g.length&&(f=f.concat(g))}a=v.selector[a];if(a.length){j=0;for(n=a.length;j<n;j++)f=a[j](d,e,f)}return pa(f)},$a=function(a){a||(a=
|
||||
{});a.filter&&a.search===l&&(a.search=a.filter);return h.extend({search:"none",order:"current",page:"all"},a)},ab=function(a){for(var b=0,c=a.length;b<c;b++)if(0<a[b].length)return a[0]=a[b],a[0].length=1,a.length=1,a.context=[a.context[b]],a;a.length=0;return a},Da=function(a,b){var c,d,e,f=[],g=a.aiDisplay;c=a.aiDisplayMaster;var i=b.search;d=b.order;e=b.page;if("ssp"==y(a))return"removed"===i?[]:W(0,c.length);if("current"==e){c=a._iDisplayStart;for(d=a.fnDisplayEnd();c<d;c++)f.push(g[c])}else if("current"==
|
||||
d||"applied"==d)f="none"==i?c.slice():"applied"==i?g.slice():h.map(c,function(a){return-1===h.inArray(a,g)?a:null});else if("index"==d||"original"==d){c=0;for(d=a.aoData.length;c<d;c++)"none"==i?f.push(c):(e=h.inArray(c,g),(-1===e&&"removed"==i||0<=e&&"applied"==i)&&f.push(c))}return f};p("rows()",function(a,b){a===l?a="":h.isPlainObject(a)&&(b=a,a="");var b=$a(b),c=this.iterator("table",function(c){var e=b;return Za("row",a,function(a){var b=Ob(a);if(b!==null&&!e)return[b];var i=Da(c,e);if(b!==null&&
|
||||
h.inArray(b,i)!==-1)return[b];if(!a)return i;if(typeof a==="function")return h.map(i,function(b){var e=c.aoData[b];return a(b,e._aData,e.nTr)?b:null});b=Rb(ja(c.aoData,i,"nTr"));if(a.nodeName&&h.inArray(a,b)!==-1)return[a._DT_RowIndex];if(typeof a==="string"&&a.charAt(0)==="#"){i=c.aIds[a.replace(/^#/,"")];if(i!==l)return[i.idx]}return h(b).filter(a).map(function(){return this._DT_RowIndex}).toArray()},c,e)},1);c.selector.rows=a;c.selector.opts=b;return c});p("rows().nodes()",function(){return this.iterator("row",
|
||||
function(a,b){return a.aoData[b].nTr||l},1)});p("rows().data()",function(){return this.iterator(!0,"rows",function(a,b){return ja(a.aoData,b,"_aData")},1)});u("rows().cache()","row().cache()",function(a){return this.iterator("row",function(b,c){var d=b.aoData[c];return"search"===a?d._aFilterData:d._aSortData},1)});u("rows().invalidate()","row().invalidate()",function(a){return this.iterator("row",function(b,c){ea(b,c,a)})});u("rows().indexes()","row().index()",function(){return this.iterator("row",
|
||||
function(a,b){return b},1)});u("rows().ids()","row().id()",function(a){for(var b=[],c=this.context,d=0,e=c.length;d<e;d++)for(var f=0,h=this[d].length;f<h;f++){var g=c[d].rowIdFn(c[d].aoData[this[d][f]]._aData);b.push((!0===a?"#":"")+g)}return new s(c,b)});u("rows().remove()","row().remove()",function(){var a=this;this.iterator("row",function(b,c,d){var e=b.aoData,f=e[c];e.splice(c,1);for(var h=0,g=e.length;h<g;h++)null!==e[h].nTr&&(e[h].nTr._DT_RowIndex=h);oa(b.aiDisplayMaster,c);oa(b.aiDisplay,
|
||||
c);oa(a[d],c,!1);Sa(b);c=b.rowIdFn(f._aData);c!==l&&delete b.aIds[c]});this.iterator("table",function(a){for(var c=0,d=a.aoData.length;c<d;c++)a.aoData[c].idx=c});return this});p("rows.add()",function(a){var b=this.iterator("table",function(b){var c,f,h,g=[];f=0;for(h=a.length;f<h;f++)c=a[f],c.nodeName&&"TR"===c.nodeName.toUpperCase()?g.push(ma(b,c)[0]):g.push(L(b,c));return g},1),c=this.rows(-1);c.pop();g.merge(c,b);return c});p("row()",function(a,b){return ab(this.rows(a,b))});p("row().data()",
|
||||
function(a){var b=this.context;if(a===l)return b.length&&this.length?b[0].aoData[this[0]]._aData:l;b[0].aoData[this[0]]._aData=a;ea(b[0],this[0],"data");return this});p("row().node()",function(){var a=this.context;return a.length&&this.length?a[0].aoData[this[0]].nTr||null:null});p("row.add()",function(a){a instanceof g&&a.length&&(a=a[0]);var b=this.iterator("table",function(b){return a.nodeName&&"TR"===a.nodeName.toUpperCase()?ma(b,a)[0]:L(b,a)});return this.row(b[0])});var bb=function(a,b){var c=
|
||||
a.context;if(c.length&&(c=c[0].aoData[b!==l?b:a[0]])&&c._details)c._details.remove(),c._detailsShow=l,c._details=l},Ub=function(a,b){var c=a.context;if(c.length&&a.length){var d=c[0].aoData[a[0]];if(d._details){(d._detailsShow=b)?d._details.insertAfter(d.nTr):d._details.detach();var e=c[0],f=new s(e),h=e.aoData;f.off("draw.dt.DT_details column-visibility.dt.DT_details destroy.dt.DT_details");0<D(h,"_details").length&&(f.on("draw.dt.DT_details",function(a,b){e===b&&f.rows({page:"current"}).eq(0).each(function(a){a=
|
||||
h[a];a._detailsShow&&a._details.insertAfter(a.nTr)})}),f.on("column-visibility.dt.DT_details",function(a,b){if(e===b)for(var c,d=ca(b),f=0,g=h.length;f<g;f++)c=h[f],c._details&&c._details.children("td[colspan]").attr("colspan",d)}),f.on("destroy.dt.DT_details",function(a,b){if(e===b)for(var c=0,d=h.length;c<d;c++)h[c]._details&&bb(f,c)}))}}};p("row().child()",function(a,b){var c=this.context;if(a===l)return c.length&&this.length?c[0].aoData[this[0]]._details:l;if(!0===a)this.child.show();else if(!1===
|
||||
a)bb(this);else if(c.length&&this.length){var d=c[0],c=c[0].aoData[this[0]],e=[],f=function(a,b){if(g.isArray(a)||a instanceof g)for(var c=0,n=a.length;c<n;c++)f(a[c],b);else a.nodeName&&"tr"===a.nodeName.toLowerCase()?e.push(a):(c=g("<tr><td/></tr>").addClass(b),g("td",c).addClass(b).html(a)[0].colSpan=ca(d),e.push(c[0]))};f(a,b);c._details&&c._details.remove();c._details=g(e);c._detailsShow&&c._details.insertAfter(c.nTr)}return this});p(["row().child.show()","row().child().show()"],function(){Ub(this,
|
||||
!0);return this});p(["row().child.hide()","row().child().hide()"],function(){Ub(this,!1);return this});p(["row().child.remove()","row().child().remove()"],function(){bb(this);return this});p("row().child.isShown()",function(){var a=this.context;return a.length&&this.length?a[0].aoData[this[0]]._detailsShow||!1:!1});var cc=/^(.+):(name|visIdx|visible)$/,Vb=function(a,b,c,d,e){for(var c=[],d=0,f=e.length;d<f;d++)c.push(B(a,e[d],b));return c};p("columns()",function(a,b){a===l?a="":g.isPlainObject(a)&&
|
||||
(b=a,a="");var b=$a(b),c=this.iterator("table",function(c){var e=a,f=b,h=c.aoColumns,i=D(h,"sName"),j=D(h,"nTh");return Za("column",e,function(a){var b=Ob(a);if(a==="")return W(h.length);if(b!==null)return[b>=0?b:h.length+b];if(typeof a==="function"){var e=Da(c,f);return g.map(h,function(b,f){return a(f,Vb(c,f,0,0,e),j[f])?f:null})}var l=typeof a==="string"?a.match(cc):"";if(l)switch(l[2]){case "visIdx":case "visible":b=parseInt(l[1],10);if(b<0){var k=g.map(h,function(a,b){return a.bVisible?b:null});
|
||||
return[k[k.length+b]]}return[$(c,b)];case "name":return g.map(i,function(a,b){return a===l[1]?b:null})}else return g(j).filter(a).map(function(){return g.inArray(this,j)}).toArray()},c,f)},1);c.selector.cols=a;c.selector.opts=b;return c});u("columns().header()","column().header()",function(){return this.iterator("column",function(a,b){return a.aoColumns[b].nTh},1)});u("columns().footer()","column().footer()",function(){return this.iterator("column",function(a,b){return a.aoColumns[b].nTf},1)});u("columns().data()",
|
||||
function(a,b){return b},1)});u("rows().ids()","row().id()",function(a){for(var b=[],c=this.context,d=0,e=c.length;d<e;d++)for(var f=0,g=this[d].length;f<g;f++){var h=c[d].rowIdFn(c[d].aoData[this[d][f]]._aData);b.push((!0===a?"#":"")+h)}return new s(c,b)});u("rows().remove()","row().remove()",function(){var a=this;this.iterator("row",function(b,c,d){var e=b.aoData,f=e[c];e.splice(c,1);for(var g=0,h=e.length;g<h;g++)null!==e[g].nTr&&(e[g].nTr._DT_RowIndex=g);oa(b.aiDisplayMaster,c);oa(b.aiDisplay,
|
||||
c);oa(a[d],c,!1);Sa(b);c=b.rowIdFn(f._aData);c!==l&&delete b.aIds[c]});this.iterator("table",function(a){for(var c=0,d=a.aoData.length;c<d;c++)a.aoData[c].idx=c});return this});p("rows.add()",function(a){var b=this.iterator("table",function(b){var c,f,g,h=[];f=0;for(g=a.length;f<g;f++)c=a[f],c.nodeName&&"TR"===c.nodeName.toUpperCase()?h.push(ma(b,c)[0]):h.push(L(b,c));return h},1),c=this.rows(-1);c.pop();h.merge(c,b);return c});p("row()",function(a,b){return ab(this.rows(a,b))});p("row().data()",
|
||||
function(a){var b=this.context;if(a===l)return b.length&&this.length?b[0].aoData[this[0]]._aData:l;b[0].aoData[this[0]]._aData=a;ea(b[0],this[0],"data");return this});p("row().node()",function(){var a=this.context;return a.length&&this.length?a[0].aoData[this[0]].nTr||null:null});p("row.add()",function(a){a instanceof h&&a.length&&(a=a[0]);var b=this.iterator("table",function(b){return a.nodeName&&"TR"===a.nodeName.toUpperCase()?ma(b,a)[0]:L(b,a)});return this.row(b[0])});var bb=function(a,b){var c=
|
||||
a.context;if(c.length&&(c=c[0].aoData[b!==l?b:a[0]])&&c._details)c._details.remove(),c._detailsShow=l,c._details=l},Ub=function(a,b){var c=a.context;if(c.length&&a.length){var d=c[0].aoData[a[0]];if(d._details){(d._detailsShow=b)?d._details.insertAfter(d.nTr):d._details.detach();var e=c[0],f=new s(e),g=e.aoData;f.off("draw.dt.DT_details column-visibility.dt.DT_details destroy.dt.DT_details");0<D(g,"_details").length&&(f.on("draw.dt.DT_details",function(a,b){e===b&&f.rows({page:"current"}).eq(0).each(function(a){a=
|
||||
g[a];a._detailsShow&&a._details.insertAfter(a.nTr)})}),f.on("column-visibility.dt.DT_details",function(a,b){if(e===b)for(var c,d=ca(b),f=0,h=g.length;f<h;f++)c=g[f],c._details&&c._details.children("td[colspan]").attr("colspan",d)}),f.on("destroy.dt.DT_details",function(a,b){if(e===b)for(var c=0,d=g.length;c<d;c++)g[c]._details&&bb(f,c)}))}}};p("row().child()",function(a,b){var c=this.context;if(a===l)return c.length&&this.length?c[0].aoData[this[0]]._details:l;if(!0===a)this.child.show();else if(!1===
|
||||
a)bb(this);else if(c.length&&this.length){var d=c[0],c=c[0].aoData[this[0]],e=[],f=function(a,b){if(h.isArray(a)||a instanceof h)for(var c=0,l=a.length;c<l;c++)f(a[c],b);else a.nodeName&&"tr"===a.nodeName.toLowerCase()?e.push(a):(c=h("<tr><td/></tr>").addClass(b),h("td",c).addClass(b).html(a)[0].colSpan=ca(d),e.push(c[0]))};f(a,b);c._details&&c._details.remove();c._details=h(e);c._detailsShow&&c._details.insertAfter(c.nTr)}return this});p(["row().child.show()","row().child().show()"],function(){Ub(this,
|
||||
!0);return this});p(["row().child.hide()","row().child().hide()"],function(){Ub(this,!1);return this});p(["row().child.remove()","row().child().remove()"],function(){bb(this);return this});p("row().child.isShown()",function(){var a=this.context;return a.length&&this.length?a[0].aoData[this[0]]._detailsShow||!1:!1});var cc=/^(.+):(name|visIdx|visible)$/,Vb=function(a,b,c,d,e){for(var c=[],d=0,f=e.length;d<f;d++)c.push(B(a,e[d],b));return c};p("columns()",function(a,b){a===l?a="":h.isPlainObject(a)&&
|
||||
(b=a,a="");var b=$a(b),c=this.iterator("table",function(c){var e=a,f=b,g=c.aoColumns,i=D(g,"sName"),j=D(g,"nTh");return Za("column",e,function(a){var b=Ob(a);if(a==="")return W(g.length);if(b!==null)return[b>=0?b:g.length+b];if(typeof a==="function"){var e=Da(c,f);return h.map(g,function(b,f){return a(f,Vb(c,f,0,0,e),j[f])?f:null})}var l=typeof a==="string"?a.match(cc):"";if(l)switch(l[2]){case "visIdx":case "visible":b=parseInt(l[1],10);if(b<0){var k=h.map(g,function(a,b){return a.bVisible?b:null});
|
||||
return[k[k.length+b]]}return[$(c,b)];case "name":return h.map(i,function(a,b){return a===l[1]?b:null})}else return h(j).filter(a).map(function(){return h.inArray(this,j)}).toArray()},c,f)},1);c.selector.cols=a;c.selector.opts=b;return c});u("columns().header()","column().header()",function(){return this.iterator("column",function(a,b){return a.aoColumns[b].nTh},1)});u("columns().footer()","column().footer()",function(){return this.iterator("column",function(a,b){return a.aoColumns[b].nTf},1)});u("columns().data()",
|
||||
"column().data()",function(){return this.iterator("column-rows",Vb,1)});u("columns().dataSrc()","column().dataSrc()",function(){return this.iterator("column",function(a,b){return a.aoColumns[b].mData},1)});u("columns().cache()","column().cache()",function(a){return this.iterator("column-rows",function(b,c,d,e,f){return ja(b.aoData,f,"search"===a?"_aFilterData":"_aSortData",c)},1)});u("columns().nodes()","column().nodes()",function(){return this.iterator("column-rows",function(a,b,c,d,e){return ja(a.aoData,
|
||||
e,"anCells",b)},1)});u("columns().visible()","column().visible()",function(a,b){return this.iterator("column",function(c,d){if(a===l)return c.aoColumns[d].bVisible;var e=c.aoColumns,f=e[d],h=c.aoData,i,j,k;if(a!==l&&f.bVisible!==a){if(a){var m=g.inArray(!0,D(e,"bVisible"),d+1);i=0;for(j=h.length;i<j;i++)k=h[i].nTr,e=h[i].anCells,k&&k.insertBefore(e[d],e[m]||null)}else g(D(c.aoData,"anCells",d)).detach();f.bVisible=a;ga(c,c.aoHeader);ga(c,c.aoFooter);if(b===l||b)Y(c),(c.oScroll.sX||c.oScroll.sY)&&
|
||||
e,"anCells",b)},1)});u("columns().visible()","column().visible()",function(a,b){return this.iterator("column",function(c,d){if(a===l)return c.aoColumns[d].bVisible;var e=c.aoColumns,f=e[d],g=c.aoData,i,j,k;if(a!==l&&f.bVisible!==a){if(a){var m=h.inArray(!0,D(e,"bVisible"),d+1);i=0;for(j=g.length;i<j;i++)k=g[i].nTr,e=g[i].anCells,k&&k.insertBefore(e[d],e[m]||null)}else h(D(c.aoData,"anCells",d)).detach();f.bVisible=a;ga(c,c.aoHeader);ga(c,c.aoFooter);if(b===l||b)Y(c),(c.oScroll.sX||c.oScroll.sY)&&
|
||||
Z(c);w(c,null,"column-visibility",[c,d,a]);ya(c)}})});u("columns().indexes()","column().index()",function(a){return this.iterator("column",function(b,c){return"visible"===a?ba(b,c):c},1)});p("columns.adjust()",function(){return this.iterator("table",function(a){Y(a)},1)});p("column.index()",function(a,b){if(0!==this.context.length){var c=this.context[0];if("fromVisible"===a||"toData"===a)return $(c,b);if("fromData"===a||"toVisible"===a)return ba(c,b)}});p("column()",function(a,b){return ab(this.columns(a,
|
||||
b))});p("cells()",function(a,b,c){g.isPlainObject(a)&&(a.row===l?(c=a,a=null):(c=b,b=null));g.isPlainObject(b)&&(c=b,b=null);if(null===b||b===l)return this.iterator("table",function(b){var d=a,e=$a(c),f=b.aoData,h=Da(b,e),i=Rb(ja(f,h,"anCells")),j=g([].concat.apply([],i)),k,m=b.aoColumns.length,n,p,s,u,t,v;return Za("cell",d,function(a){var c=typeof a==="function";if(a===null||a===l||c){n=[];p=0;for(s=h.length;p<s;p++){k=h[p];for(u=0;u<m;u++){t={row:k,column:u};if(c){v=f[k];a(t,B(b,k,u),v.anCells?
|
||||
v.anCells[u]:null)&&n.push(t)}else n.push(t)}}return n}return g.isPlainObject(a)?[a]:j.filter(a).map(function(a,b){if(b.parentNode)k=b.parentNode._DT_RowIndex;else{a=0;for(s=f.length;a<s;a++)if(g.inArray(b,f[a].anCells)!==-1){k=a;break}}return{row:k,column:g.inArray(b,f[k].anCells)}}).toArray()},b,e)});var d=this.columns(b,c),e=this.rows(a,c),f,h,i,j,k,m=this.iterator("table",function(a,b){f=[];h=0;for(i=e[b].length;h<i;h++){j=0;for(k=d[b].length;j<k;j++)f.push({row:e[b][h],column:d[b][j]})}return f},
|
||||
1);g.extend(m.selector,{cols:b,rows:a,opts:c});return m});u("cells().nodes()","cell().node()",function(){return this.iterator("cell",function(a,b,c){return(a=a.aoData[b].anCells)?a[c]:l},1)});p("cells().data()",function(){return this.iterator("cell",function(a,b,c){return B(a,b,c)},1)});u("cells().cache()","cell().cache()",function(a){a="search"===a?"_aFilterData":"_aSortData";return this.iterator("cell",function(b,c,d){return b.aoData[c][a][d]},1)});u("cells().render()","cell().render()",function(a){return this.iterator("cell",
|
||||
b))});p("cells()",function(a,b,c){h.isPlainObject(a)&&(a.row===l?(c=a,a=null):(c=b,b=null));h.isPlainObject(b)&&(c=b,b=null);if(null===b||b===l)return this.iterator("table",function(b){var d=a,e=$a(c),f=b.aoData,g=Da(b,e),i=Rb(ja(f,g,"anCells")),j=h([].concat.apply([],i)),k,m=b.aoColumns.length,n,p,s,u,t,v;return Za("cell",d,function(a){var c=typeof a==="function";if(a===null||a===l||c){n=[];p=0;for(s=g.length;p<s;p++){k=g[p];for(u=0;u<m;u++){t={row:k,column:u};if(c){v=f[k];a(t,B(b,k,u),v.anCells?
|
||||
v.anCells[u]:null)&&n.push(t)}else n.push(t)}}return n}return h.isPlainObject(a)?[a]:j.filter(a).map(function(a,b){if(b.parentNode)k=b.parentNode._DT_RowIndex;else{a=0;for(s=f.length;a<s;a++)if(h.inArray(b,f[a].anCells)!==-1){k=a;break}}return{row:k,column:h.inArray(b,f[k].anCells)}}).toArray()},b,e)});var d=this.columns(b,c),e=this.rows(a,c),f,g,i,j,k,m=this.iterator("table",function(a,b){f=[];g=0;for(i=e[b].length;g<i;g++){j=0;for(k=d[b].length;j<k;j++)f.push({row:e[b][g],column:d[b][j]})}return f},
|
||||
1);h.extend(m.selector,{cols:b,rows:a,opts:c});return m});u("cells().nodes()","cell().node()",function(){return this.iterator("cell",function(a,b,c){return(a=a.aoData[b].anCells)?a[c]:l},1)});p("cells().data()",function(){return this.iterator("cell",function(a,b,c){return B(a,b,c)},1)});u("cells().cache()","cell().cache()",function(a){a="search"===a?"_aFilterData":"_aSortData";return this.iterator("cell",function(b,c,d){return b.aoData[c][a][d]},1)});u("cells().render()","cell().render()",function(a){return this.iterator("cell",
|
||||
function(b,c,d){return B(b,c,d,a)},1)});u("cells().indexes()","cell().index()",function(){return this.iterator("cell",function(a,b,c){return{row:b,column:c,columnVisible:ba(a,c)}},1)});u("cells().invalidate()","cell().invalidate()",function(a){return this.iterator("cell",function(b,c,d){ea(b,c,a,d)})});p("cell()",function(a,b,c){return ab(this.cells(a,b,c))});p("cell().data()",function(a){var b=this.context,c=this[0];if(a===l)return b.length&&c.length?B(b[0],c[0].row,c[0].column):l;ib(b[0],c[0].row,
|
||||
c[0].column,a);ea(b[0],c[0].row,"data",c[0].column);return this});p("order()",function(a,b){var c=this.context;if(a===l)return 0!==c.length?c[0].aaSorting:l;"number"===typeof a?a=[[a,b]]:g.isArray(a[0])||(a=Array.prototype.slice.call(arguments));return this.iterator("table",function(b){b.aaSorting=a.slice()})});p("order.listener()",function(a,b,c){return this.iterator("table",function(d){Oa(d,a,b,c)})});p("order.fixed()",function(a){if(!a){var b=this.context,b=b.length?b[0].aaSortingFixed:l;return g.isArray(b)?
|
||||
{pre:b}:b}return this.iterator("table",function(b){b.aaSortingFixed=g.extend(!0,{},a)})});p(["columns().order()","column().order()"],function(a){var b=this;return this.iterator("table",function(c,d){var e=[];g.each(b[d],function(b,c){e.push([c,a])});c.aaSorting=e})});p("search()",function(a,b,c,d){var e=this.context;return a===l?0!==e.length?e[0].oPreviousSearch.sSearch:l:this.iterator("table",function(e){e.oFeatures.bFilter&&ha(e,g.extend({},e.oPreviousSearch,{sSearch:a+"",bRegex:null===b?!1:b,bSmart:null===
|
||||
c?!0:c,bCaseInsensitive:null===d?!0:d}),1)})});u("columns().search()","column().search()",function(a,b,c,d){return this.iterator("column",function(e,f){var h=e.aoPreSearchCols;if(a===l)return h[f].sSearch;e.oFeatures.bFilter&&(g.extend(h[f],{sSearch:a+"",bRegex:null===b?!1:b,bSmart:null===c?!0:c,bCaseInsensitive:null===d?!0:d}),ha(e,e.oPreviousSearch,1))})});p("state()",function(){return this.context.length?this.context[0].oSavedState:null});p("state.clear()",function(){return this.iterator("table",
|
||||
function(a){a.fnStateSaveCallback.call(a.oInstance,a,{})})});p("state.loaded()",function(){return this.context.length?this.context[0].oLoadedState:null});p("state.save()",function(){return this.iterator("table",function(a){ya(a)})});k.versionCheck=k.fnVersionCheck=function(a){for(var b=k.version.split("."),a=a.split("."),c,d,e=0,f=a.length;e<f;e++)if(c=parseInt(b[e],10)||0,d=parseInt(a[e],10)||0,c!==d)return c>d;return!0};k.isDataTable=k.fnIsDataTable=function(a){var b=g(a).get(0),c=!1;g.each(k.settings,
|
||||
function(a,e){var f=e.nScrollHead?g("table",e.nScrollHead)[0]:null,h=e.nScrollFoot?g("table",e.nScrollFoot)[0]:null;if(e.nTable===b||f===b||h===b)c=!0});return c};k.tables=k.fnTables=function(a){var b=!1;g.isPlainObject(a)&&(b=a.api,a=a.visible);var c=g.map(k.settings,function(b){if(!a||a&&g(b.nTable).is(":visible"))return b.nTable});return b?new s(c):c};k.util={throttle:ua,escapeRegex:va};k.camelToHungarian=H;p("$()",function(a,b){var c=this.rows(b).nodes(),c=g(c);return g([].concat(c.filter(a).toArray(),
|
||||
c.find(a).toArray()))});g.each(["on","one","off"],function(a,b){p(b+"()",function(){var a=Array.prototype.slice.call(arguments);a[0].match(/\.dt\b/)||(a[0]+=".dt");var d=g(this.tables().nodes());d[b].apply(d,a);return this})});p("clear()",function(){return this.iterator("table",function(a){na(a)})});p("settings()",function(){return new s(this.context,this.context)});p("init()",function(){var a=this.context;return a.length?a[0].oInit:null});p("data()",function(){return this.iterator("table",function(a){return D(a.aoData,
|
||||
"_aData")}).flatten()});p("destroy()",function(a){a=a||!1;return this.iterator("table",function(b){var c=b.nTableWrapper.parentNode,d=b.oClasses,e=b.nTable,f=b.nTBody,h=b.nTHead,i=b.nTFoot,j=g(e),f=g(f),l=g(b.nTableWrapper),m=g.map(b.aoData,function(a){return a.nTr}),p;b.bDestroying=!0;w(b,"aoDestroyCallback","destroy",[b]);a||(new s(b)).columns().visible(!0);l.unbind(".DT").find(":not(tbody *)").unbind(".DT");g(Fa).unbind(".DT-"+b.sInstance);e!=h.parentNode&&(j.children("thead").detach(),j.append(h));
|
||||
i&&e!=i.parentNode&&(j.children("tfoot").detach(),j.append(i));b.aaSorting=[];b.aaSortingFixed=[];xa(b);g(m).removeClass(b.asStripeClasses.join(" "));g("th, td",h).removeClass(d.sSortable+" "+d.sSortableAsc+" "+d.sSortableDesc+" "+d.sSortableNone);b.bJUI&&(g("th span."+d.sSortIcon+", td span."+d.sSortIcon,h).detach(),g("th, td",h).each(function(){var a=g("div."+d.sSortJUIWrapper,this);g(this).append(a.contents());a.detach()}));f.children().detach();f.append(m);h=a?"remove":"detach";j[h]();l[h]();
|
||||
!a&&c&&(c.insertBefore(e,b.nTableReinsertBefore),j.css("width",b.sDestroyWidth).removeClass(d.sTable),(p=b.asDestroyStripes.length)&&f.children().each(function(a){g(this).addClass(b.asDestroyStripes[a%p])}));c=g.inArray(b,k.settings);-1!==c&&k.settings.splice(c,1)})});g.each(["column","row","cell"],function(a,b){p(b+"s().every()",function(a){var d=this.selector.opts;return this.iterator(b,function(e,f,h,g,j){a.call((new s(e))[b](f,"cell"===b?h:d,"cell"===b?d:l),f,h,g,j)})})});p("i18n()",function(a,
|
||||
b,c){var d=this.context[0],a=P(a)(d.oLanguage);a===l&&(a=b);c!==l&&g.isPlainObject(a)&&(a=a[c]!==l?a[c]:a._);return a.replace("%d",c)});k.version="1.10.10-dev";k.settings=[];k.models={};k.models.oSearch={bCaseInsensitive:!0,sSearch:"",bRegex:!1,bSmart:!0};k.models.oRow={nTr:null,anCells:null,_aData:[],_aSortData:null,_aFilterData:null,_sFilterRow:null,_sRowStripe:"",src:null,idx:-1};k.models.oColumn={idx:null,aDataSort:null,asSorting:null,bSearchable:null,bSortable:null,bVisible:null,_sManualType:null,
|
||||
c[0].column,a);ea(b[0],c[0].row,"data",c[0].column);return this});p("order()",function(a,b){var c=this.context;if(a===l)return 0!==c.length?c[0].aaSorting:l;"number"===typeof a?a=[[a,b]]:h.isArray(a[0])||(a=Array.prototype.slice.call(arguments));return this.iterator("table",function(b){b.aaSorting=a.slice()})});p("order.listener()",function(a,b,c){return this.iterator("table",function(d){Oa(d,a,b,c)})});p("order.fixed()",function(a){if(!a){var b=this.context,b=b.length?b[0].aaSortingFixed:l;return h.isArray(b)?
|
||||
{pre:b}:b}return this.iterator("table",function(b){b.aaSortingFixed=h.extend(!0,{},a)})});p(["columns().order()","column().order()"],function(a){var b=this;return this.iterator("table",function(c,d){var e=[];h.each(b[d],function(b,c){e.push([c,a])});c.aaSorting=e})});p("search()",function(a,b,c,d){var e=this.context;return a===l?0!==e.length?e[0].oPreviousSearch.sSearch:l:this.iterator("table",function(e){e.oFeatures.bFilter&&ha(e,h.extend({},e.oPreviousSearch,{sSearch:a+"",bRegex:null===b?!1:b,bSmart:null===
|
||||
c?!0:c,bCaseInsensitive:null===d?!0:d}),1)})});u("columns().search()","column().search()",function(a,b,c,d){return this.iterator("column",function(e,f){var g=e.aoPreSearchCols;if(a===l)return g[f].sSearch;e.oFeatures.bFilter&&(h.extend(g[f],{sSearch:a+"",bRegex:null===b?!1:b,bSmart:null===c?!0:c,bCaseInsensitive:null===d?!0:d}),ha(e,e.oPreviousSearch,1))})});p("state()",function(){return this.context.length?this.context[0].oSavedState:null});p("state.clear()",function(){return this.iterator("table",
|
||||
function(a){a.fnStateSaveCallback.call(a.oInstance,a,{})})});p("state.loaded()",function(){return this.context.length?this.context[0].oLoadedState:null});p("state.save()",function(){return this.iterator("table",function(a){ya(a)})});k.versionCheck=k.fnVersionCheck=function(a){for(var b=k.version.split("."),a=a.split("."),c,d,e=0,f=a.length;e<f;e++)if(c=parseInt(b[e],10)||0,d=parseInt(a[e],10)||0,c!==d)return c>d;return!0};k.isDataTable=k.fnIsDataTable=function(a){var b=h(a).get(0),c=!1;h.each(k.settings,
|
||||
function(a,e){var f=e.nScrollHead?h("table",e.nScrollHead)[0]:null,g=e.nScrollFoot?h("table",e.nScrollFoot)[0]:null;if(e.nTable===b||f===b||g===b)c=!0});return c};k.tables=k.fnTables=function(a){var b=!1;h.isPlainObject(a)&&(b=a.api,a=a.visible);var c=h.map(k.settings,function(b){if(!a||a&&h(b.nTable).is(":visible"))return b.nTable});return b?new s(c):c};k.util={throttle:ua,escapeRegex:va};k.camelToHungarian=H;p("$()",function(a,b){var c=this.rows(b).nodes(),c=h(c);return h([].concat(c.filter(a).toArray(),
|
||||
c.find(a).toArray()))});h.each(["on","one","off"],function(a,b){p(b+"()",function(){var a=Array.prototype.slice.call(arguments);a[0].match(/\.dt\b/)||(a[0]+=".dt");var d=h(this.tables().nodes());d[b].apply(d,a);return this})});p("clear()",function(){return this.iterator("table",function(a){na(a)})});p("settings()",function(){return new s(this.context,this.context)});p("init()",function(){var a=this.context;return a.length?a[0].oInit:null});p("data()",function(){return this.iterator("table",function(a){return D(a.aoData,
|
||||
"_aData")}).flatten()});p("destroy()",function(a){a=a||!1;return this.iterator("table",function(b){var c=b.nTableWrapper.parentNode,d=b.oClasses,e=b.nTable,f=b.nTBody,g=b.nTHead,i=b.nTFoot,j=h(e),f=h(f),l=h(b.nTableWrapper),m=h.map(b.aoData,function(a){return a.nTr}),p;b.bDestroying=!0;w(b,"aoDestroyCallback","destroy",[b]);a||(new s(b)).columns().visible(!0);l.unbind(".DT").find(":not(tbody *)").unbind(".DT");h(Fa).unbind(".DT-"+b.sInstance);e!=g.parentNode&&(j.children("thead").detach(),j.append(g));
|
||||
i&&e!=i.parentNode&&(j.children("tfoot").detach(),j.append(i));b.aaSorting=[];b.aaSortingFixed=[];xa(b);h(m).removeClass(b.asStripeClasses.join(" "));h("th, td",g).removeClass(d.sSortable+" "+d.sSortableAsc+" "+d.sSortableDesc+" "+d.sSortableNone);b.bJUI&&(h("th span."+d.sSortIcon+", td span."+d.sSortIcon,g).detach(),h("th, td",g).each(function(){var a=h("div."+d.sSortJUIWrapper,this);h(this).append(a.contents());a.detach()}));f.children().detach();f.append(m);g=a?"remove":"detach";j[g]();l[g]();
|
||||
!a&&c&&(c.insertBefore(e,b.nTableReinsertBefore),j.css("width",b.sDestroyWidth).removeClass(d.sTable),(p=b.asDestroyStripes.length)&&f.children().each(function(a){h(this).addClass(b.asDestroyStripes[a%p])}));c=h.inArray(b,k.settings);-1!==c&&k.settings.splice(c,1)})});h.each(["column","row","cell"],function(a,b){p(b+"s().every()",function(a){var d=this.selector.opts;return this.iterator(b,function(e,f,g,h,j){a.call((new s(e))[b](f,"cell"===b?g:d,"cell"===b?d:l),f,g,h,j)})})});p("i18n()",function(a,
|
||||
b,c){var d=this.context[0],a=P(a)(d.oLanguage);a===l&&(a=b);c!==l&&h.isPlainObject(a)&&(a=a[c]!==l?a[c]:a._);return a.replace("%d",c)});k.version="1.10.10-dev";k.settings=[];k.models={};k.models.oSearch={bCaseInsensitive:!0,sSearch:"",bRegex:!1,bSmart:!0};k.models.oRow={nTr:null,anCells:null,_aData:[],_aSortData:null,_aFilterData:null,_sFilterRow:null,_sRowStripe:"",src:null,idx:-1};k.models.oColumn={idx:null,aDataSort:null,asSorting:null,bSearchable:null,bSortable:null,bVisible:null,_sManualType:null,
|
||||
_bAttrSrc:!1,fnCreatedCell:null,fnGetData:null,fnSetData:null,mData:null,mRender:null,nTh:null,nTf:null,sClass:null,sContentPadding:null,sDefaultContent:null,sName:null,sSortDataType:"std",sSortingClass:null,sSortingClassJUI:null,sTitle:null,sType:null,sWidth:null,sWidthOrig:null};k.defaults={aaData:null,aaSorting:[[0,"asc"]],aaSortingFixed:[],ajax:null,aLengthMenu:[10,25,50,100],aoColumns:null,aoColumnDefs:null,aoSearchCols:[],asStripeClasses:null,bAutoWidth:!0,bDeferRender:!1,bDestroy:!1,bFilter:!0,
|
||||
bInfo:!0,bJQueryUI:!1,bLengthChange:!0,bPaginate:!0,bProcessing:!1,bRetrieve:!1,bScrollCollapse:!1,bServerSide:!1,bSort:!0,bSortMulti:!0,bSortCellsTop:!1,bSortClasses:!0,bStateSave:!1,fnCreatedRow:null,fnDrawCallback:null,fnFooterCallback:null,fnFormatNumber:function(a){return a.toString().replace(/\B(?=(\d{3})+(?!\d))/g,this.oLanguage.sThousands)},fnHeaderCallback:null,fnInfoCallback:null,fnInitComplete:null,fnPreDrawCallback:null,fnRowCallback:null,fnServerData:null,fnServerParams:null,fnStateLoadCallback:function(a){try{return JSON.parse((-1===
|
||||
a.iStateDuration?sessionStorage:localStorage).getItem("DataTables_"+a.sInstance+"_"+location.pathname))}catch(b){}},fnStateLoadParams:null,fnStateLoaded:null,fnStateSaveCallback:function(a,b){try{(-1===a.iStateDuration?sessionStorage:localStorage).setItem("DataTables_"+a.sInstance+"_"+location.pathname,JSON.stringify(b))}catch(c){}},fnStateSaveParams:null,iStateDuration:7200,iDeferLoading:null,iDisplayLength:10,iDisplayStart:0,iTabIndex:0,oClasses:{},oLanguage:{oAria:{sSortAscending:": activate to sort column ascending",
|
||||
sSortDescending:": activate to sort column descending"},oPaginate:{sFirst:"First",sLast:"Last",sNext:"Next",sPrevious:"Previous"},sEmptyTable:"No data available in table",sInfo:"Showing _START_ to _END_ of _TOTAL_ entries",sInfoEmpty:"Showing 0 to 0 of 0 entries",sInfoFiltered:"(filtered from _MAX_ total entries)",sInfoPostFix:"",sDecimal:"",sThousands:",",sLengthMenu:"Show _MENU_ entries",sLoadingRecords:"Loading...",sProcessing:"Processing...",sSearch:"Search:",sSearchPlaceholder:"",sUrl:"",sZeroRecords:"No matching records found"},
|
||||
oSearch:g.extend({},k.models.oSearch),sAjaxDataProp:"data",sAjaxSource:null,sDom:"lfrtip",searchDelay:null,sPaginationType:"simple_numbers",sScrollX:"",sScrollXInner:"",sScrollY:"",sServerMethod:"GET",renderer:null,rowId:"DT_RowId"};X(k.defaults);k.defaults.column={aDataSort:null,iDataSort:-1,asSorting:["asc","desc"],bSearchable:!0,bSortable:!0,bVisible:!0,fnCreatedCell:null,mData:null,mRender:null,sCellType:"td",sClass:"",sContentPadding:"",sDefaultContent:null,sName:"",sSortDataType:"std",sTitle:null,
|
||||
oSearch:h.extend({},k.models.oSearch),sAjaxDataProp:"data",sAjaxSource:null,sDom:"lfrtip",searchDelay:null,sPaginationType:"simple_numbers",sScrollX:"",sScrollXInner:"",sScrollY:"",sServerMethod:"GET",renderer:null,rowId:"DT_RowId"};X(k.defaults);k.defaults.column={aDataSort:null,iDataSort:-1,asSorting:["asc","desc"],bSearchable:!0,bSortable:!0,bVisible:!0,fnCreatedCell:null,mData:null,mRender:null,sCellType:"td",sClass:"",sContentPadding:"",sDefaultContent:null,sName:"",sSortDataType:"std",sTitle:null,
|
||||
sType:null,sWidth:null};X(k.defaults.column);k.models.oSettings={oFeatures:{bAutoWidth:null,bDeferRender:null,bFilter:null,bInfo:null,bLengthChange:null,bPaginate:null,bProcessing:null,bServerSide:null,bSort:null,bSortMulti:null,bSortClasses:null,bStateSave:null},oScroll:{bCollapse:null,iBarWidth:0,sX:null,sXInner:null,sY:null},oLanguage:{fnInfoCallback:null},oBrowser:{bScrollOversize:!1,bScrollbarLeft:!1,bBounding:!1,barWidth:0},ajax:null,aanFeatures:[],aoData:[],aiDisplay:[],aiDisplayMaster:[],
|
||||
aIds:{},aoColumns:[],aoHeader:[],aoFooter:[],oPreviousSearch:{},aoPreSearchCols:[],aaSorting:null,aaSortingFixed:[],asStripeClasses:null,asDestroyStripes:[],sDestroyWidth:0,aoRowCallback:[],aoHeaderCallback:[],aoFooterCallback:[],aoDrawCallback:[],aoRowCreatedCallback:[],aoPreDrawCallback:[],aoInitComplete:[],aoStateSaveParams:[],aoStateLoadParams:[],aoStateLoaded:[],sTableId:"",nTable:null,nTHead:null,nTFoot:null,nTBody:null,nTableWrapper:null,bDeferLoading:!1,bInitialised:!1,aoOpenRows:[],sDom:null,
|
||||
searchDelay:null,sPaginationType:"two_button",iStateDuration:0,aoStateSave:[],aoStateLoad:[],oSavedState:null,oLoadedState:null,sAjaxSource:null,sAjaxDataProp:null,bAjaxDataGet:!0,jqXHR:null,json:l,oAjaxData:l,fnServerData:null,aoServerParams:[],sServerMethod:null,fnFormatNumber:null,aLengthMenu:null,iDraw:0,bDrawing:!1,iDrawError:-1,_iDisplayLength:10,_iDisplayStart:0,_iRecordsTotal:0,_iRecordsDisplay:0,bJUI:null,oClasses:{},bFiltered:!1,bSorted:!1,bSortCellsTop:null,oInit:null,aoDestroyCallback:[],
|
||||
fnRecordsTotal:function(){return"ssp"==y(this)?1*this._iRecordsTotal:this.aiDisplayMaster.length},fnRecordsDisplay:function(){return"ssp"==y(this)?1*this._iRecordsDisplay:this.aiDisplay.length},fnDisplayEnd:function(){var a=this._iDisplayLength,b=this._iDisplayStart,c=b+a,d=this.aiDisplay.length,e=this.oFeatures,f=e.bPaginate;return e.bServerSide?!1===f||-1===a?b+d:Math.min(b+a,this._iRecordsDisplay):!f||c>d||-1===a?d:c},oInstance:null,sInstance:null,iTabIndex:0,nScrollHead:null,nScrollFoot:null,
|
||||
aLastSort:[],oPlugins:{},rowIdFn:null,rowId:null};k.ext=v={buttons:{},classes:{},builder:"-source-",errMode:"alert",feature:[],search:[],selector:{cell:[],column:[],row:[]},internal:{},legacy:{ajax:null},pager:{},renderer:{pageButton:{},header:{}},order:{},type:{detect:[],search:{},order:{}},_unique:0,fnVersionCheck:k.fnVersionCheck,iApiIndex:0,oJUIClasses:{},sVersion:k.version};g.extend(v,{afnFiltering:v.search,aTypes:v.type.detect,ofnSearch:v.type.search,oSort:v.type.order,afnSortData:v.order,aoFeatures:v.feature,
|
||||
oApi:v.internal,oStdClasses:v.classes,oPagination:v.pager});g.extend(k.ext.classes,{sTable:"dataTable",sNoFooter:"no-footer",sPageButton:"paginate_button",sPageButtonActive:"current",sPageButtonDisabled:"disabled",sStripeOdd:"odd",sStripeEven:"even",sRowEmpty:"dataTables_empty",sWrapper:"dataTables_wrapper",sFilter:"dataTables_filter",sInfo:"dataTables_info",sPaging:"dataTables_paginate paging_",sLength:"dataTables_length",sProcessing:"dataTables_processing",sSortAsc:"sorting_asc",sSortDesc:"sorting_desc",
|
||||
aLastSort:[],oPlugins:{},rowIdFn:null,rowId:null};k.ext=v={buttons:{},classes:{},builder:"-source-",errMode:"alert",feature:[],search:[],selector:{cell:[],column:[],row:[]},internal:{},legacy:{ajax:null},pager:{},renderer:{pageButton:{},header:{}},order:{},type:{detect:[],search:{},order:{}},_unique:0,fnVersionCheck:k.fnVersionCheck,iApiIndex:0,oJUIClasses:{},sVersion:k.version};h.extend(v,{afnFiltering:v.search,aTypes:v.type.detect,ofnSearch:v.type.search,oSort:v.type.order,afnSortData:v.order,aoFeatures:v.feature,
|
||||
oApi:v.internal,oStdClasses:v.classes,oPagination:v.pager});h.extend(k.ext.classes,{sTable:"dataTable",sNoFooter:"no-footer",sPageButton:"paginate_button",sPageButtonActive:"current",sPageButtonDisabled:"disabled",sStripeOdd:"odd",sStripeEven:"even",sRowEmpty:"dataTables_empty",sWrapper:"dataTables_wrapper",sFilter:"dataTables_filter",sInfo:"dataTables_info",sPaging:"dataTables_paginate paging_",sLength:"dataTables_length",sProcessing:"dataTables_processing",sSortAsc:"sorting_asc",sSortDesc:"sorting_desc",
|
||||
sSortable:"sorting",sSortableAsc:"sorting_asc_disabled",sSortableDesc:"sorting_desc_disabled",sSortableNone:"sorting_disabled",sSortColumn:"sorting_",sFilterInput:"",sLengthSelect:"",sScrollWrapper:"dataTables_scroll",sScrollHead:"dataTables_scrollHead",sScrollHeadInner:"dataTables_scrollHeadInner",sScrollBody:"dataTables_scrollBody",sScrollFoot:"dataTables_scrollFoot",sScrollFootInner:"dataTables_scrollFootInner",sHeaderTH:"",sFooterTH:"",sSortJUIAsc:"",sSortJUIDesc:"",sSortJUI:"",sSortJUIAscAllowed:"",
|
||||
sSortJUIDescAllowed:"",sSortJUIWrapper:"",sSortIcon:"",sJUIHeader:"",sJUIFooter:""});var Ea="",Ea="",F=Ea+"ui-state-default",ka=Ea+"css_right ui-icon ui-icon-",Wb=Ea+"fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix";g.extend(k.ext.oJUIClasses,k.ext.classes,{sPageButton:"fg-button ui-button "+F,sPageButtonActive:"ui-state-disabled",sPageButtonDisabled:"ui-state-disabled",sPaging:"dataTables_paginate fg-buttonset ui-buttonset fg-buttonset-multi ui-buttonset-multi paging_",sSortAsc:F+" sorting_asc",
|
||||
sSortJUIDescAllowed:"",sSortJUIWrapper:"",sSortIcon:"",sJUIHeader:"",sJUIFooter:""});var Ea="",Ea="",F=Ea+"ui-state-default",ka=Ea+"css_right ui-icon ui-icon-",Wb=Ea+"fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix";h.extend(k.ext.oJUIClasses,k.ext.classes,{sPageButton:"fg-button ui-button "+F,sPageButtonActive:"ui-state-disabled",sPageButtonDisabled:"ui-state-disabled",sPaging:"dataTables_paginate fg-buttonset ui-buttonset fg-buttonset-multi ui-buttonset-multi paging_",sSortAsc:F+" sorting_asc",
|
||||
sSortDesc:F+" sorting_desc",sSortable:F+" sorting",sSortableAsc:F+" sorting_asc_disabled",sSortableDesc:F+" sorting_desc_disabled",sSortableNone:F+" sorting_disabled",sSortJUIAsc:ka+"triangle-1-n",sSortJUIDesc:ka+"triangle-1-s",sSortJUI:ka+"carat-2-n-s",sSortJUIAscAllowed:ka+"carat-1-n",sSortJUIDescAllowed:ka+"carat-1-s",sSortJUIWrapper:"DataTables_sort_wrapper",sSortIcon:"DataTables_sort_icon",sScrollHead:"dataTables_scrollHead "+F,sScrollFoot:"dataTables_scrollFoot "+F,sHeaderTH:F,sFooterTH:F,sJUIHeader:Wb+
|
||||
" ui-corner-tl ui-corner-tr",sJUIFooter:Wb+" ui-corner-bl ui-corner-br"});var Lb=k.ext.pager;g.extend(Lb,{simple:function(){return["previous","next"]},full:function(){return["first","previous","next","last"]},numbers:function(a,b){return[Aa(a,b)]},simple_numbers:function(a,b){return["previous",Aa(a,b),"next"]},full_numbers:function(a,b){return["first","previous",Aa(a,b),"next","last"]},_numbers:Aa,numbers_length:7});g.extend(!0,k.ext.renderer,{pageButton:{_:function(a,b,c,d,e,f){var h=a.oClasses,
|
||||
i=a.oLanguage.oPaginate,j,k,l=0,p=function(b,d){var q,s,u,t,v=function(b){Ta(a,b.data.action,true)};q=0;for(s=d.length;q<s;q++){t=d[q];if(g.isArray(t)){u=g("<"+(t.DT_el||"div")+"/>").appendTo(b);p(u,t)}else{j=null;k="";switch(t){case "ellipsis":b.append('<span class="ellipsis">…</span>');break;case "first":j=i.sFirst;k=t+(e>0?"":" "+h.sPageButtonDisabled);break;case "previous":j=i.sPrevious;k=t+(e>0?"":" "+h.sPageButtonDisabled);break;case "next":j=i.sNext;k=t+(e<f-1?"":" "+h.sPageButtonDisabled);
|
||||
break;case "last":j=i.sLast;k=t+(e<f-1?"":" "+h.sPageButtonDisabled);break;default:j=t+1;k=e===t?h.sPageButtonActive:""}if(j!==null){u=g("<a>",{"class":h.sPageButton+" "+k,"aria-controls":a.sTableId,"data-dt-idx":l,tabindex:a.iTabIndex,id:c===0&&typeof t==="string"?a.sTableId+"_"+t:null}).html(j).appendTo(b);Va(u,{action:t},v);l++}}}},q;try{q=g(b).find(T.activeElement).data("dt-idx")}catch(s){}p(g(b).empty(),d);q&&g(b).find("[data-dt-idx="+q+"]").focus()}}});g.extend(k.ext.type.detect,[function(a,
|
||||
" ui-corner-tl ui-corner-tr",sJUIFooter:Wb+" ui-corner-bl ui-corner-br"});var Lb=k.ext.pager;h.extend(Lb,{simple:function(){return["previous","next"]},full:function(){return["first","previous","next","last"]},numbers:function(a,b){return[Aa(a,b)]},simple_numbers:function(a,b){return["previous",Aa(a,b),"next"]},full_numbers:function(a,b){return["first","previous",Aa(a,b),"next","last"]},_numbers:Aa,numbers_length:7});h.extend(!0,k.ext.renderer,{pageButton:{_:function(a,b,c,d,e,f){var g=a.oClasses,
|
||||
i=a.oLanguage.oPaginate,j,k,l=0,p=function(b,d){var q,s,u,t,v=function(b){Ta(a,b.data.action,true)};q=0;for(s=d.length;q<s;q++){t=d[q];if(h.isArray(t)){u=h("<"+(t.DT_el||"div")+"/>").appendTo(b);p(u,t)}else{j=null;k="";switch(t){case "ellipsis":b.append('<span class="ellipsis">…</span>');break;case "first":j=i.sFirst;k=t+(e>0?"":" "+g.sPageButtonDisabled);break;case "previous":j=i.sPrevious;k=t+(e>0?"":" "+g.sPageButtonDisabled);break;case "next":j=i.sNext;k=t+(e<f-1?"":" "+g.sPageButtonDisabled);
|
||||
break;case "last":j=i.sLast;k=t+(e<f-1?"":" "+g.sPageButtonDisabled);break;default:j=t+1;k=e===t?g.sPageButtonActive:""}if(j!==null){u=h("<a>",{"class":g.sPageButton+" "+k,"aria-controls":a.sTableId,"data-dt-idx":l,tabindex:a.iTabIndex,id:c===0&&typeof t==="string"?a.sTableId+"_"+t:null}).html(j).appendTo(b);Va(u,{action:t},v);l++}}}},q;try{q=h(b).find(T.activeElement).data("dt-idx")}catch(s){}p(h(b).empty(),d);q&&h(b).find("[data-dt-idx="+q+"]").focus()}}});h.extend(k.ext.type.detect,[function(a,
|
||||
b){var c=b.oLanguage.sDecimal;return Ya(a,c)?"num"+c:null},function(a){if(a&&!(a instanceof Date)&&(!$b.test(a)||!ac.test(a)))return null;var b=Date.parse(a);return null!==b&&!isNaN(b)||K(a)?"date":null},function(a,b){var c=b.oLanguage.sDecimal;return Ya(a,c,!0)?"num-fmt"+c:null},function(a,b){var c=b.oLanguage.sDecimal;return Qb(a,c)?"html-num"+c:null},function(a,b){var c=b.oLanguage.sDecimal;return Qb(a,c,!0)?"html-num-fmt"+c:null},function(a){return K(a)||"string"===typeof a&&-1!==a.indexOf("<")?
|
||||
"html":null}]);g.extend(k.ext.type.search,{html:function(a){return K(a)?a:"string"===typeof a?a.replace(Nb," ").replace(Ca,""):""},string:function(a){return K(a)?a:"string"===typeof a?a.replace(Nb," "):a}});var Ba=function(a,b,c,d){if(0!==a&&(!a||"-"===a))return-Infinity;b&&(a=Pb(a,b));a.replace&&(c&&(a=a.replace(c,"")),d&&(a=a.replace(d,"")));return 1*a};g.extend(v.type.order,{"date-pre":function(a){return Date.parse(a)||0},"html-pre":function(a){return K(a)?"":a.replace?a.replace(/<.*?>/g,"").toLowerCase():
|
||||
a+""},"string-pre":function(a){return K(a)?"":"string"===typeof a?a.toLowerCase():!a.toString?"":a.toString()},"string-asc":function(a,b){return a<b?-1:a>b?1:0},"string-desc":function(a,b){return a<b?1:a>b?-1:0}});cb("");g.extend(!0,k.ext.renderer,{header:{_:function(a,b,c,d){g(a.nTable).on("order.dt.DT",function(e,f,h,g){if(a===f){e=c.idx;b.removeClass(c.sSortingClass+" "+d.sSortAsc+" "+d.sSortDesc).addClass(g[e]=="asc"?d.sSortAsc:g[e]=="desc"?d.sSortDesc:c.sSortingClass)}})},jqueryui:function(a,
|
||||
b,c,d){g("<div/>").addClass(d.sSortJUIWrapper).append(b.contents()).append(g("<span/>").addClass(d.sSortIcon+" "+c.sSortingClassJUI)).appendTo(b);g(a.nTable).on("order.dt.DT",function(e,f,h,g){if(a===f){e=c.idx;b.removeClass(d.sSortAsc+" "+d.sSortDesc).addClass(g[e]=="asc"?d.sSortAsc:g[e]=="desc"?d.sSortDesc:c.sSortingClass);b.find("span."+d.sSortIcon).removeClass(d.sSortJUIAsc+" "+d.sSortJUIDesc+" "+d.sSortJUI+" "+d.sSortJUIAscAllowed+" "+d.sSortJUIDescAllowed).addClass(g[e]=="asc"?d.sSortJUIAsc:
|
||||
g[e]=="desc"?d.sSortJUIDesc:c.sSortingClassJUI)}})}}});k.render={number:function(a,b,c,d,e){return{display:function(f){if("number"!==typeof f&&"string"!==typeof f)return f;var g=0>f?"-":"",f=Math.abs(parseFloat(f)),i=parseInt(f,10),f=c?b+(f-i).toFixed(c).substring(2):"";return g+(d||"")+i.toString().replace(/\B(?=(\d{3})+(?!\d))/g,a)+f+(e||"")}}}};g.extend(k.ext.internal,{_fnExternApiFunc:Mb,_fnBuildAjax:ra,_fnAjaxUpdate:kb,_fnAjaxParameters:tb,_fnAjaxUpdateDraw:ub,_fnAjaxDataSrc:sa,_fnAddColumn:Ga,
|
||||
_fnColumnOptions:la,_fnAdjustColumnSizing:Y,_fnVisibleToColumnIndex:$,_fnColumnIndexToVisible:ba,_fnVisbleColumns:ca,_fnGetColumns:aa,_fnColumnTypes:Ia,_fnApplyColumnDefs:hb,_fnHungarianMap:X,_fnCamelToHungarian:H,_fnLanguageCompat:S,_fnBrowserDetect:fb,_fnAddData:L,_fnAddTr:ma,_fnNodeToDataIndex:function(a,b){return b._DT_RowIndex!==l?b._DT_RowIndex:null},_fnNodeToColumnIndex:function(a,b,c){return g.inArray(c,a.aoData[b].anCells)},_fnGetCellData:B,_fnSetCellData:ib,_fnSplitObjNotation:La,_fnGetObjectDataFn:P,
|
||||
"html":null}]);h.extend(k.ext.type.search,{html:function(a){return K(a)?a:"string"===typeof a?a.replace(Nb," ").replace(Ca,""):""},string:function(a){return K(a)?a:"string"===typeof a?a.replace(Nb," "):a}});var Ba=function(a,b,c,d){if(0!==a&&(!a||"-"===a))return-Infinity;b&&(a=Pb(a,b));a.replace&&(c&&(a=a.replace(c,"")),d&&(a=a.replace(d,"")));return 1*a};h.extend(v.type.order,{"date-pre":function(a){return Date.parse(a)||0},"html-pre":function(a){return K(a)?"":a.replace?a.replace(/<.*?>/g,"").toLowerCase():
|
||||
a+""},"string-pre":function(a){return K(a)?"":"string"===typeof a?a.toLowerCase():!a.toString?"":a.toString()},"string-asc":function(a,b){return a<b?-1:a>b?1:0},"string-desc":function(a,b){return a<b?1:a>b?-1:0}});cb("");h.extend(!0,k.ext.renderer,{header:{_:function(a,b,c,d){h(a.nTable).on("order.dt.DT",function(e,f,g,h){if(a===f){e=c.idx;b.removeClass(c.sSortingClass+" "+d.sSortAsc+" "+d.sSortDesc).addClass(h[e]=="asc"?d.sSortAsc:h[e]=="desc"?d.sSortDesc:c.sSortingClass)}})},jqueryui:function(a,
|
||||
b,c,d){h("<div/>").addClass(d.sSortJUIWrapper).append(b.contents()).append(h("<span/>").addClass(d.sSortIcon+" "+c.sSortingClassJUI)).appendTo(b);h(a.nTable).on("order.dt.DT",function(e,f,g,h){if(a===f){e=c.idx;b.removeClass(d.sSortAsc+" "+d.sSortDesc).addClass(h[e]=="asc"?d.sSortAsc:h[e]=="desc"?d.sSortDesc:c.sSortingClass);b.find("span."+d.sSortIcon).removeClass(d.sSortJUIAsc+" "+d.sSortJUIDesc+" "+d.sSortJUI+" "+d.sSortJUIAscAllowed+" "+d.sSortJUIDescAllowed).addClass(h[e]=="asc"?d.sSortJUIAsc:
|
||||
h[e]=="desc"?d.sSortJUIDesc:c.sSortingClassJUI)}})}}});k.render={number:function(a,b,c,d,e){return{display:function(f){if("number"!==typeof f&&"string"!==typeof f)return f;var g=0>f?"-":"",f=Math.abs(parseFloat(f)),h=parseInt(f,10),f=c?b+(f-h).toFixed(c).substring(2):"";return g+(d||"")+h.toString().replace(/\B(?=(\d{3})+(?!\d))/g,a)+f+(e||"")}}}};h.extend(k.ext.internal,{_fnExternApiFunc:Mb,_fnBuildAjax:ra,_fnAjaxUpdate:kb,_fnAjaxParameters:tb,_fnAjaxUpdateDraw:ub,_fnAjaxDataSrc:sa,_fnAddColumn:Ga,
|
||||
_fnColumnOptions:la,_fnAdjustColumnSizing:Y,_fnVisibleToColumnIndex:$,_fnColumnIndexToVisible:ba,_fnVisbleColumns:ca,_fnGetColumns:aa,_fnColumnTypes:Ia,_fnApplyColumnDefs:hb,_fnHungarianMap:X,_fnCamelToHungarian:H,_fnLanguageCompat:S,_fnBrowserDetect:fb,_fnAddData:L,_fnAddTr:ma,_fnNodeToDataIndex:function(a,b){return b._DT_RowIndex!==l?b._DT_RowIndex:null},_fnNodeToColumnIndex:function(a,b,c){return h.inArray(c,a.aoData[b].anCells)},_fnGetCellData:B,_fnSetCellData:ib,_fnSplitObjNotation:La,_fnGetObjectDataFn:P,
|
||||
_fnSetObjectDataFn:Q,_fnGetDataMaster:Ma,_fnClearTable:na,_fnDeleteIndex:oa,_fnInvalidate:ea,_fnGetRowElements:Ka,_fnCreateTr:Ja,_fnBuildHead:jb,_fnDrawHead:ga,_fnDraw:M,_fnReDraw:R,_fnAddOptionsHtml:mb,_fnDetectHeader:fa,_fnGetUniqueThs:qa,_fnFeatureHtmlFilter:ob,_fnFilterComplete:ha,_fnFilterCustom:xb,_fnFilterColumn:wb,_fnFilter:vb,_fnFilterCreateSearch:Qa,_fnEscapeRegex:va,_fnFilterData:yb,_fnFeatureHtmlInfo:rb,_fnUpdateInfo:Bb,_fnInfoMacros:Cb,_fnInitialise:ia,_fnInitComplete:ta,_fnLengthChange:Ra,
|
||||
_fnFeatureHtmlLength:nb,_fnFeatureHtmlPaginate:sb,_fnPageChange:Ta,_fnFeatureHtmlProcessing:pb,_fnProcessingDisplay:C,_fnFeatureHtmlTable:qb,_fnScrollDraw:Z,_fnApplyToChildren:G,_fnCalculateColumnWidths:Ha,_fnThrottle:ua,_fnConvertToWidth:Eb,_fnGetWidestNode:Fb,_fnGetMaxLenString:Gb,_fnStringToCss:t,_fnSortFlatten:V,_fnSort:lb,_fnSortAria:Ib,_fnSortListener:Ua,_fnSortAttachListener:Oa,_fnSortingClasses:xa,_fnSortData:Hb,_fnSaveState:ya,_fnLoadState:Jb,_fnSettingsFromNode:za,_fnLog:I,_fnMap:E,_fnBindAction:Va,
|
||||
_fnCallbackReg:z,_fnCallbackFire:w,_fnLengthOverflow:Sa,_fnRenderer:Pa,_fnDataSource:y,_fnRowAttributes:Na,_fnCalculateEnd:function(){}});g.fn.dataTable=k;g.fn.dataTableSettings=k.settings;g.fn.dataTableExt=k.ext;g.fn.DataTable=function(a){return g(this).dataTable(a).api()};g.each(k,function(a,b){g.fn.DataTable[a]=b});return g.fn.dataTable};"function"===typeof define&&define.amd?define("datatables",["jquery"],S):"object"===typeof exports?module.exports=function(g){return S(g||require("jquery"))}:
|
||||
jQuery&&!jQuery.fn.dataTable&&S(jQuery)})(window,document);
|
||||
_fnCallbackReg:z,_fnCallbackFire:w,_fnLengthOverflow:Sa,_fnRenderer:Pa,_fnDataSource:y,_fnRowAttributes:Na,_fnCalculateEnd:function(){}});h.fn.dataTable=k;h.fn.dataTableSettings=k.settings;h.fn.dataTableExt=k.ext;h.fn.DataTable=function(a){return h(this).dataTable(a).api()};h.each(k,function(a,b){h.fn.DataTable[a]=b});return h.fn.dataTable};"function"===typeof define&&define.amd?define("datatables",["jquery"],S):"object"===typeof exports?module.exports=S(require("jquery")):jQuery&&!jQuery.fn.dataTable&&
|
||||
S(jQuery)})(window,document);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user