rooty/DataTables
1
0
Fork 0
mirror of https://github.com/DataTables/DataTables.git synced 2024-11-29 11:24:10 +01:00
Code Issues Releases Activity

Site: Updates based on my work for the DataTables site. Mostly minor

Browse Source 
changes to styling, naming or docs fixes
This commit is contained in:
Allan Jardine 2013-12-19 14:03:24 +00:00
parent 1a51c7afa1
commit 43400684a4
85 changed files with 625 additions and 997 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.datatables-commit-sync
View File

@ -1 +1 @@
c22b302995481a5da1b91cebaeae97183ce2fa7d
0f0ac66cb61d2858439d0faead1375fc1ca34e7e

23
examples/advanced_init/column_render.html
View File

@ -46,12 +46,12 @@ $(document).ready(function() {
<div class="info">
<p>Each column has an optional rendering control called <a href=
"//datatables.net/init/columns.render"><code class="option" title=
"//datatables.net/reference/option/columns.render"><code class="option" title=
"Initialisation option">columns.render</code></a> which can be used to process the content of each cell
before the data is used. <a href="//datatables.net/init/columns.render"><code class="option" title=
"Initialisation option">columns.render</code></a> has a wide array of options available to it for
rendering different types of data orthogonally (ordering, searching, display etc), but it can be used
very simply to manipulate the content of a cell, as shown here.</p>
before the data is used. <a href="//datatables.net/reference/option/columns.render"><code class=
"option" title="Initialisation option">columns.render</code></a> has a wide array of options available
to it for rendering different types of data orthogonally (ordering, searching, display etc), but it can
be used very simply to manipulate the content of a cell, as shown here.</p>
<p>This example shows the person's age combined with their name in the first column, hiding the age
column. This technique can be useful for adding links, assigning colours based on content rules and any
@ -550,9 +550,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;columnDefs&quot;: [
{
@ -567,8 +566,7 @@ $(document).ready(function() {
{ &quot;visible&quot;: false, &quot;targets&quot;: [ 3 ] }
]
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -590,10 +588,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

17
examples/advanced_init/complex_header.html
View File

@ -43,9 +43,9 @@ $(document).ready(function() {
<p>In addition to the basic behaviour, DataTables can also take colspan and rowspans into account when
working with hidden columns. The colspan and rowspan attributes for each cell are automatically
calculated and rendered on the page for you. This allows the <a href=
"//datatables.net/init/columns.visible"><code class="option" title=
"//datatables.net/reference/option/columns.visible"><code class="option" title=
"Initialisation option">columns.visible</code></a> option and <a href=
"//datatables.net/api/column%28%29.visible%28%29"><code class="api" title=
"//datatables.net/reference/api/column().visible()"><code class="api" title=
"API method">column().visible()</code></a> method to take into account rowspan / colspan cells, drawing
the header correctly.</p>
@ -552,17 +552,15 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;columnDefs&quot;: [ {
&quot;visible&quot;: false,
&quot;targets&quot;: -1
} ]
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -584,10 +582,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

23
examples/advanced_init/defaults.html
View File

@ -40,11 +40,11 @@ $(document).ready(function() {
<div class="info">
<p>When working with DataTables over multiple pages it is often useful to set the initialisation
defaults to common values (for example you might want to set <a href=
"//datatables.net/init/dom"><code class="option" title="Initialisation option">dom</code></a> to a
common value so all tables get the same layout). This can be done using the
<code>$.fn.dataTable.defaults</code> object. This object will take all of the same parameters as the
DataTables initialisation object, but in this case you are setting the default for all future
initialisations of DataTables.</p>
"//datatables.net/reference/option/dom"><code class="option" title=
"Initialisation option">dom</code></a> to a common value so all tables get the same layout). This can
be done using the <code>$.fn.dataTable.defaults</code> object. This object will take all of the same
parameters as the DataTables initialisation object, but in this case you are setting the default for
all future initialisations of DataTables.</p>
<p>This example shows the searching and ordering features of DataTables being disabled by default,
which is reflected in the table when it is initialised.</p>
@ -542,9 +542,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$.extend( $.fn.dataTable.defaults, {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$.extend( $.fn.dataTable.defaults, {
&quot;searching&quot;: false,
&quot;ordering&quot;: false
} );
@ -552,8 +551,7 @@ $.extend( $.fn.dataTable.defaults, {
$(document).ready(function() {
$('#example').dataTable();
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -575,10 +573,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

22
examples/advanced_init/dom_multiple_elements.html
View File

@ -43,9 +43,10 @@ $(document).ready(function() {
<div class="info">
<p>As is described by the basic DOM positioning example you can use the <a href=
"//datatables.net/init/dom"><code class="option" title="Initialisation option">dom</code></a>
initialisation parameter to move DataTables features around the table to where you want them. In
addition to this, you can also use <a href="//datatables.net/init/dom"><code class="option" title=
"//datatables.net/reference/option/dom"><code class="option" title=
"Initialisation option">dom</code></a> initialisation parameter to move DataTables features around the
table to where you want them. In addition to this, you can also use <a href=
"//datatables.net/reference/option/dom"><code class="option" title=
"Initialisation option">dom</code></a> to create multiple instances of these table controls. Simply
include the feature's identification letter where you want it to appear, as many times as you wish, and
the controls will all sync up (note that obviously the table ('t') should be included only once).</p>
@ -546,14 +547,12 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;dom&quot;: '&lt;&quot;top&quot;iflp&lt;&quot;clear&quot;&gt;&gt;rt&lt;&quot;bottom&quot;iflp&lt;&quot;clear&quot;&gt;&gt;'
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -575,16 +574,13 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
div.dataTables_length {
below:</p><code class="multiline brush: js;">div.dataTables_length {
padding-left: 2em;
}
div.dataTables_length,
div.dataTables_filter {
padding-top: 0.55em;
}
</pre>
}</code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

23
examples/advanced_init/dom_toolbar.html
View File

@ -45,13 +45,13 @@ $(document).ready(function() {
<p>DataTables inserts DOM elements around the table to control DataTables features, and you can make
use of this mechanism as well to insert your own custom elements. In this example a <code class="tag"
title="HTML tag">div</code> with a class of 'toolbar' is created using <a href=
"//datatables.net/init/dom"><code class="option" title="Initialisation option">dom</code></a>, with
which HTML is inserted to create the toolbar. You could put whatever HTML you want into the toolbar and
add event handlers etc.</p>
"//datatables.net/reference/option/dom"><code class="option" title=
"Initialisation option">dom</code></a>, with which HTML is inserted to create the toolbar. You could
put whatever HTML you want into the toolbar and add event handlers etc.</p>
<p>For more complex features, or for creating reusable plug-ins, DataTables also has a feature plug-in
API available, which can be used to create plug-ins which are used in a table by a single character
reference in the <a href="//datatables.net/init/dom"><code class="option" title=
reference in the <a href="//datatables.net/reference/option/dom"><code class="option" title=
"Initialisation option">dom</code></a> option (like the built in option of <code class="string" title=
"String">f</code> refers to 'filtering input', you could have an <code class="string" title=
"String">F</code> option which creates your own filtering input control, custom to your app).</p>
@ -553,16 +553,14 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;dom&quot;: '&lt;&quot;toolbar&quot;&gt;frtip'
} );
$(&quot;div.toolbar&quot;).html('&lt;b&gt;Custom tool bar! Text/images etc.&lt;/b&gt;');
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -584,12 +582,9 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
.toolbar {
below:</p><code class="multiline brush: js;">.toolbar {
float: left;
}
</pre>
}</code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

30
examples/advanced_init/dt_events.html
View File

@ -48,15 +48,16 @@ $(document).ready(function() {
<p>All custom events fired by DataTables are fired with the namespace <code>dt</code> in order to
prevent conflicts arising with other jQuery plug-ins which also fire events. The DataTables <a href=
"//datatables.net/api/on%28%29"><code class="api" title="API method">on()</code></a> method can be used
like the jQuery <code>on()</code> method, but will automatically append the <code>dt</code> namespace
if required.</p>
"//datatables.net/reference/api/on()"><code class="api" title="API method">on()</code></a> method can
be used like the jQuery <code>on()</code> method, but will automatically append the <code>dt</code>
namespace if required.</p>
<p>This example shows the use of the <a href="//datatables.net/event/sort"><code class="event" title=
"Event">sort</code></a>, <a href="//datatables.net/event/search"><code class="event" title=
"Event">search</code></a> and <a href="//datatables.net/event/page"><code class="event" title=
"Event">page</code></a> events by adding a notification that the event fired to an element on the page
to show that they have indeed fired.</p>
<p>This example shows the use of the <a href="//datatables.net/reference/event/sort"><code class=
"event" title="Event">sort</code></a>, <a href="//datatables.net/reference/event/search"><code class=
"event" title="Event">search</code></a> and <a href=
"//datatables.net/reference/event/page"><code class="event" title="Event">page</code></a> events by
adding a notification that the event fired to an element on the page to show that they have indeed
fired.</p>
</div>
<div id="demo_info" class="box"></div>
@ -553,9 +554,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
var eventFired = function ( type ) {
var n = $('#demo_info')[0];
n.innerHTML += '&lt;div&gt;'+type+' event - '+new Date().getTime()+'&lt;/div&gt;';
@ -567,8 +567,7 @@ $(document).ready(function() {
.on( 'search.dt', function () { eventFired( 'Search' ); } )
.on( 'page.dt', function () { eventFired( 'Page' ); } )
.dataTable();
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -590,10 +589,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

13
examples/advanced_init/events_live.html
View File

@ -538,17 +538,15 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable();
$('#example tbody').on('click', 'tr', function () {
var name = $('td', this).eq(0).text();
alert( 'You clicked on '+name+'\'s row' );
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -570,10 +568,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

21
examples/advanced_init/footer_callback.html
View File

@ -67,17 +67,17 @@ $(document).ready(function() {
<div class="info">
<p>Through the use of the header and footer callback manipulation functions provided by DataTables
(<a href="//datatables.net/init/headerCallback"><code class="option" title=
(<a href="//datatables.net/reference/option/headerCallback"><code class="option" title=
"Initialisation option">headerCallback</code></a> and <a href=
"//datatables.net/init/footerCallback"><code class="option" title=
"//datatables.net/reference/option/footerCallback"><code class="option" title=
"Initialisation option">footerCallback</code></a>), it is possible to perform some powerful and useful
data manipulation functions, such as summarising data in the table.</p>
<p>The example below shows a footer callback being used to total the data for a column (both the
visible and the hidden data) using the <a href=
"//datatables.net/api/column%28%29.data%28%29"><code class="api" title=
"//datatables.net/reference/api/column().data()"><code class="api" title=
"API method">column().data()</code></a> API method and <a href=
"//datatables.net/api/column%28%29.footer%28%29"><code class="api" title=
"//datatables.net/reference/api/column().footer()"><code class="api" title=
"API method">column().footer()</code></a> for writing the value into the footer.</p>
</div>
@ -511,9 +511,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;footerCallback&quot;: function ( row, data, start, end, display ) {
var api = this.api();
@ -547,8 +546,7 @@ $(document).ready(function() {
);
}
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -570,10 +568,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
th { white-space: nowrap; }
</pre>
below:</p><code class="multiline brush: js;">th { white-space: nowrap; }</code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

13
examples/advanced_init/html5-data-attributes.html
View File

@ -550,12 +550,10 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable();
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -577,10 +575,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

20
examples/advanced_init/language_file.html
View File

@ -37,9 +37,10 @@ $(document).ready(function() {
<div class="info">
<p>As well as being able to pass language information to DataTables through the <a href=
"//datatables.net/init/language"><code class="option" title="Initialisation option">language</code></a>
initialisation option, you can also store the language information in a file, which DataTables can load
by Ajax using the <a href="//datatables.net/init/language.url"><code class="option" title=
"//datatables.net/reference/option/language"><code class="option" title=
"Initialisation option">language</code></a> initialisation option, you can also store the language
information in a file, which DataTables can load by Ajax using the <a href=
"//datatables.net/reference/option/language.url"><code class="option" title=
"Initialisation option">language.url</code></a> option.</p>
<p>The following example shows DataTables reading a German language file.</p>
@ -537,16 +538,14 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;language&quot;: {
&quot;url&quot;: &quot;../resources/de_DE.txt&quot;
}
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -568,10 +567,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

17
examples/advanced_init/length_menu.html
View File

@ -35,8 +35,8 @@ $(document).ready(function() {
<div class="info">
<p>It is possible to easily customise the options shown in the length menu (by default at the top left
of the table) using the <a href="//datatables.net/init/lengthMenu"><code class="option" title=
"Initialisation option">lengthMenu</code></a> initialisation option.</p>
of the table) using the <a href="//datatables.net/reference/option/lengthMenu"><code class="option"
title="Initialisation option">lengthMenu</code></a> initialisation option.</p>
<p>This parameter can take one of two forms:</p>
@ -541,14 +541,12 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;lengthMenu&quot;: [[10, 25, 50, -1], [10, 25, 50, &quot;All&quot;]]
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -570,10 +568,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

19
examples/advanced_init/row_callback.html
View File

@ -45,13 +45,13 @@ $(document).ready(function() {
<div class="info">
<p>The following example shows how a callback function can be used to format a particular row at draw
time. For each row that is generated for display, the <a href=
"//datatables.net/init/createdRow"><code class="option" title=
"//datatables.net/reference/option/createdRow"><code class="option" title=
"Initialisation option">createdRow</code></a> function is called once and once only. It is passed the
create row node which can then be modified.</p>
<p>In this case a trivial example of making the 'salary' column blue and bold by adding a CSS class to
the container cell if the salary is greater than $4,000. Note that <a href=
"//datatables.net/init/createdCell"><code class="option" title=
"//datatables.net/reference/option/createdCell"><code class="option" title=
"Initialisation option">createdCell</code></a> could also be used to create exactly the same
effect.</p>
</div>
@ -548,9 +548,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;createdRow&quot;: function ( row, data, index ) {
if ( data[5].replace(/[\$,]/g, '') * 1 &gt; 4000 ) {
@ -558,8 +557,7 @@ $(document).ready(function() {
}
}
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -581,13 +579,10 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
td.highlight {
below:</p><code class="multiline brush: js;">td.highlight {
font-weight: bold;
color: blue;
}
</pre>
}</code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

17
examples/advanced_init/row_grouping.html
View File

@ -75,7 +75,7 @@ $(document).ready(function() {
<p>In the example below the 'group' is the office location, which is based on the information in the
third column (which is set to hidden). The grouping indicator is added by the <a href=
"//datatables.net/init/drawCallback"><code class="option" title=
"//datatables.net/reference/option/drawCallback"><code class="option" title=
"Initialisation option">drawCallback</code></a> function, which will parse through the rows which are
displayed, and enter a grouping TR element where a new group is found. A <code>click</code> event
handler is added for the grouping rows to allow the grouping order to be restored as well as ordering
@ -574,9 +574,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
var table = $('#example').DataTable({
&quot;columnDefs&quot;: [
{ &quot;visible&quot;: false, &quot;targets&quot;: 2 }
@ -610,8 +609,7 @@ $(document).ready(function() {
table.order( [ 2, 'asc' ] ).draw();
}
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -633,13 +631,10 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
tr.group,
below:</p><code class="multiline brush: js;">tr.group,
tr.group:hover {
background-color: #ddd !important;
}
</pre>
}</code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

15
examples/advanced_init/sort_direction_control.html
View File

@ -43,7 +43,7 @@ $(document).ready(function() {
<div class="info">
<p>At times you may wish to change the default ordering direction sequence for columns (some or all of
them) to be 'descending' rather than DataTables' default ascending. This can be done through the use of
the <a href="//datatables.net/init/columns.orderSequence"><code class="option" title=
the <a href="//datatables.net/reference/option/columns.orderSequence"><code class="option" title=
"Initialisation option">columns.orderSequence</code></a> initialisation parameter. This parameter also
allows you to limit the ordering to a single direction, or you could add complex behaviour to the
ordering interaction.</p>
@ -556,9 +556,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;aoColumns&quot;: [
null,
@ -569,8 +568,7 @@ $(document).ready(function() {
null
]
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -592,10 +590,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

26
examples/ajax/custom_data_flat.html
View File

@ -46,10 +46,10 @@ $(document).ready(function() {
<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/init/ajax"><code class="option" title="Initialisation option">ajax</code></a>
initiation option.</p>
"//datatables.net/reference/option/ajax"><code class="option" title=
"Initialisation option">ajax</code></a> initiation option.</p>
<p>The <a href="//datatables.net/init/ajax.dataSrc"><code class="option" title=
<p>The <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title=
"Initialisation option">ajax.dataSrc</code></a> has a number of ways in which it can be used:</p>
<ul>
@ -62,9 +62,10 @@ $(document).ready(function() {
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/init/ajax.dataSrc"><code class="option" title=
"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>
<p>The example below shows <a href="//datatables.net/reference/option/ajax.dataSrc"><code class=
"option" title="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%">
@ -100,9 +101,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;ajax&quot;: {
&quot;url&quot;: &quot;data/objects_root_array.txt&quot;,
@ -117,8 +117,7 @@ $(document).ready(function() {
{ &quot;data&quot;: &quot;salary&quot; }
]
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -140,10 +139,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

27
examples/ajax/custom_data_property.html
View File

@ -38,10 +38,10 @@ $(document).ready(function() {
<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/init/ajax"><code class="option" title="Initialisation option">ajax</code></a>
initiation option.</p>
"//datatables.net/reference/option/ajax"><code class="option" title=
"Initialisation option">ajax</code></a> initiation option.</p>
<p>The <a href="//datatables.net/init/ajax.dataSrc"><code class="option" title=
<p>The <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title=
"Initialisation option">ajax.dataSrc</code></a> has a number of ways in which it can be used:</p>
<ul>
@ -54,10 +54,10 @@ $(document).ready(function() {
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/init/ajax.dataSrc"><code class="option" title=
"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>The example below shows <a href="//datatables.net/reference/option/ajax.dataSrc"><code class=
"option" title="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>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@ -93,17 +93,15 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;ajax&quot;: {
&quot;url&quot;: &quot;data/arrays_custom_prop.txt&quot;,
&quot;dataSrc&quot;: &quot;demo&quot;
}
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -125,10 +123,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

17
examples/ajax/deep.html
View File

@ -42,11 +42,11 @@ $(document).ready(function() {
<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/init/columns.data"><code class="option" title=
<a href="//datatables.net/reference/option/columns.data"><code class="option" title=
"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/init/columns.data"><code class="option" title=
<a href="//datatables.net/reference/option/columns.data"><code class="option" title=
"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
@ -106,9 +106,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;processing&quot;: true,
&quot;ajax&quot;: &quot;data/objects_deep.txt&quot;,
@ -121,8 +120,7 @@ $(document).ready(function() {
{ &quot;data&quot;: &quot;hr.salary&quot; }
]
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -144,10 +142,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

15
examples/ajax/defer_render.html
View File

@ -35,7 +35,7 @@ $(document).ready(function() {
<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/init/deferRender"><code class="option" title=
<a href="//datatables.net/reference/option/deferRender"><code class="option" title=
"Initialisation option">deferRender</code></a> option.</p>
<p>When deferred rendering is enabled, rather than having DataTables create all <code class="tag"
@ -83,15 +83,13 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;ajax&quot;: &quot;data/arrays.txt&quot;,
&quot;deferRender&quot;: true
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -113,10 +111,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

5
examples/ajax/index.html
View File

@ -19,8 +19,9 @@
<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/init/ajax"><code class="option" title="Initialisation option">ajax</code></a> option,
which has a number of options to customise how the data is retrieved from the server.</p>
"//datatables.net/reference/option/ajax"><code class="option" title=
"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>

35
examples/ajax/null_data_source.html
View File

@ -46,26 +46,28 @@ $(document).ready(function() {
number of ways:</p>
<ul>
<li><a href="//datatables.net/init/columns.render"><code class="option" title=
<li><a href="//datatables.net/reference/option/columns.render"><code class="option" title=
"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/init/columns.defaultContent"><code class="option" title=
<li><a href="//datatables.net/reference/option/columns.defaultContent"><code class="option" title=
"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/init/columns.defaultContent"><code class=
"option" title="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/api/row%28%29.data%28%29"><code class="api" title=
<p>This examples shows the use of <a href=
"//datatables.net/reference/option/columns.defaultContent"><code class="option" title=
"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=
"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/init/columns.data"><code class="option" title=
"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>
<p>Note also that the <a href="//datatables.net/reference/option/columns.data"><code class="option"
title="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%">
@ -101,9 +103,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
var table = $('#example').DataTable( {
&quot;ajax&quot;: &quot;data/arrays.txt&quot;,
&quot;columnDefs&quot;: [ {
@ -117,8 +118,7 @@ $(document).ready(function() {
var data = table.row( $(this).parents('tr') ).data();
alert( data[0] +&quot;'s salary is: &quot;+ data[ 5 ] );
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -140,10 +140,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

20
examples/ajax/objects.html
View File

@ -46,9 +46,10 @@ $(document).ready(function() {
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/init/columns.data"><code class=
"option" title="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>This can be done quite simply by using the <a href=
"//datatables.net/reference/option/columns.data"><code class="option" title=
"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>
@ -98,9 +99,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;ajax&quot;: &quot;data/objects.txt&quot;,
&quot;columns&quot;: [
@ -112,8 +112,7 @@ $(document).ready(function() {
{ &quot;data&quot;: &quot;salary&quot; }
]
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -135,10 +134,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

32
examples/ajax/objects_subarrays.html
View File

@ -41,21 +41,22 @@ $(document).ready(function() {
<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/init/columns.data"><code class="option" title=
"Initialisation option">columns.data</code></a> option, which is particularly useful for working with
JSON feeds in an already defined format.</p>
DataTables through the <a href="//datatables.net/reference/option/columns.data"><code class="option"
title="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/init/columns.data"><code class="option" title=
<p>The <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
"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/init/columns.data"><code class=
"option" title="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/init/columns.data"><code class="option" title=
this, when working with an array data source <a href=
"//datatables.net/reference/option/columns.data"><code class="option" title=
"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=
"Initialisation option">columns.data</code></a> as a function).</p>
<p>This example shows two different aspects of using <a href=
"//datatables.net/init/columns.data"><code class="option" title=
"//datatables.net/reference/option/columns.data"><code class="option" title=
"Initialisation option">columns.data</code></a> to read arrays:</p>
<ul>
@ -119,9 +120,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;ajax&quot;: &quot;data/objects_subarrays.txt&quot;,
&quot;columns&quot;: [
@ -133,8 +133,7 @@ $(document).ready(function() {
{ &quot;data&quot;: &quot;hr.1&quot; }
]
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -156,10 +155,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

28
examples/ajax/simple.html
View File

@ -34,19 +34,20 @@ $(document).ready(function() {
<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/init/ajax"><code class="option" title="Initialisation option">ajax</code></a> option
to the address of the JSON data source.</p>
"//datatables.net/reference/option/ajax"><code class="option" title=
"Initialisation option">ajax</code></a> option to the address of the JSON data source.</p>
<p>The <a href="//datatables.net/init/ajax"><code class="option" title=
<p>The <a href="//datatables.net/reference/option/ajax"><code class="option" title=
"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/init/ajax"><code class=
"option" title="Initialisation option">ajax</code></a> documentation or the other Ajax examples for
DataTables for further information.</p>
altering how the Ajax request is made. See the <a href=
"//datatables.net/reference/option/ajax"><code class="option" title=
"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/init/column.data"><code class="option" title=
"//datatables.net/reference/option/column.data"><code class="option" title=
"Initialisation option">column.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
@ -97,14 +98,12 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;ajax&quot;: &quot;data/arrays.txt&quot;
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -126,10 +125,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

27
examples/api/add_row.html
View File

@ -49,15 +49,15 @@ $(document).ready(function() {
<div class="info">
<p>New rows can be added to a DataTable very easily using the <a href=
"//datatables.net/api/row.add%28%29"><code class="api" title="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/api/rows.add%28%29"><code class="api" title="API method">rows.add()</code></a> method
(note the plural).</p>
"//datatables.net/reference/api/row.add()"><code class="api" title="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="API method">rows.add()</code></a>
method (note the plural).</p>
<p>Note that in order to see the new row in the table you must call the <a href=
"//datatables.net/api/draw%28%29"><code class="api" title="API method">draw()</code></a> method, which
is easily done through the chaining that the DataTables API makes use of.</p>
"//datatables.net/reference/api/draw()"><code class="api" title="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>
</div><button id="addRow">Add new row</button>
@ -93,9 +93,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
var t = $('#example').DataTable();
var counter = 1;
@ -113,8 +112,7 @@ $(document).ready(function() {
// Automatically add a first row of data
$('#addRow').click();
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -136,10 +134,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

23
examples/api/api_in_init.html
View File

@ -40,9 +40,9 @@ $(document).ready(function() {
<div class="info">
<p>There are times when you may wish to call API functions inside the DataTables callback functions
(for example <a href="//datatables.net/init/initComplete"><code class="option" title=
(for example <a href="//datatables.net/reference/option/initComplete"><code class="option" title=
"Initialisation option">initComplete</code></a>, <a href=
"//datatables.net/init/rowCallback"><code class="option" title=
"//datatables.net/reference/option/rowCallback"><code class="option" title=
"Initialisation option">rowCallback</code></a> etc). The complicating issue with this is that the
object hasn't fully initialised, so you can't assign the result to a variable and then use that
variable in the callback. However, all of DataTables' callback functions are executed in the scope of
@ -51,9 +51,9 @@ $(document).ready(function() {
title="HTML tag">table</code> node.</p>
<p>In this example you will be able to see that the <a href=
"//datatables.net/api/%24%28%29"><code class="api" title="API method">$()</code></a> method is used to
get all cell nodes in the table's body and then act on them (in this case adding a click event). The
action here is to apply a filter to the table with the value of what is in each cell.</p>
"//datatables.net/reference/api/%24()"><code class="api" title="API method">$()</code></a> method is
used to get all cell nodes in the table's body and then act on them (in this case adding a click
event). The action here is to apply a filter to the table with the value of what is in each cell.</p>
<p>It is also worth noting that this same effect could be achieved by attaching a delegated click event
after the table has been initialised - but the example shows the use of the API inside the
@ -552,9 +552,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;initComplete&quot;: function () {
var api = this.api();
@ -563,8 +562,7 @@ $(document).ready(function() {
} );
}
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -586,10 +584,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

26
examples/api/counter_columns.html
View File

@ -51,15 +51,16 @@ $(document).ready(function() {
<p>This example shows how this can be achieved with DataTables, where the first column is the counter
column, and is updated when ordering or searching occurs. This is done by listening for the <a href=
"//datatables.net/event/order"><code class="event" title="Event">order</code></a> and <a href=
"//datatables.net/event/search"><code class="event" title="Event">search</code></a> events emitted by
the table. When these events are detected the <a href=
"//datatables.net/api/column%28%29.nodes%28%29"><code class="api" title=
"//datatables.net/reference/event/order"><code class="event" title="Event">order</code></a> and
<a href="//datatables.net/reference/event/search"><code class="event" title="Event">search</code></a>
events emitted by the table. When these events are detected the <a href=
"//datatables.net/reference/api/column().nodes()"><code class="api" title=
"API method">column().nodes()</code></a> method is used to get the TD/TH nodes for the target column
and the <code>each()</code> helper function used to iterate over each, which have their contents
updated as needed. Note that the <code>filter</code> and <code>order</code> options are using in the
<a href="//datatables.net/api/column%28%29"><code class="api" title="API method">column()</code></a>
method to get the nodes in the current order and with the currently applied filter.</p>
<a href="//datatables.net/reference/api/column()"><code class="api" title=
"API method">column()</code></a> method to get the nodes in the current order and with the currently
applied filter.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@ -554,9 +555,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
var t = $('#example').DataTable( {
&quot;columnDefs&quot;: [ {
&quot;searchable&quot;: false,
@ -571,8 +571,7 @@ $(document).ready(function() {
cell.innerHTML = i+1;
} );
} ).draw();
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -594,10 +593,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

22
examples/api/form.html
View File

@ -47,10 +47,11 @@ $(document).ready(function() {
pages requires a little bit of additional work to get the information that is not in the document any
longer.</p>
<p>The <a href="//datatables.net/api/%24%28%29"><code class="api" title="API method">$()</code></a>
method can be used to get nodes from the document regardless of paging, ordering etc. This example
shows <a href="//datatables.net/api/%24%28%29"><code class="api" title="API method">$()</code></a>
being used to get all <code class="tag" title="HTML tag">input</code> elements from the table.</p>
<p>The <a href="//datatables.net/reference/api/%24()"><code class="api" title=
"API method">$()</code></a> method can be used to get nodes from the document regardless of paging,
ordering etc. This example shows <a href="//datatables.net/reference/api/%24()"><code class="api"
title="API method">$()</code></a> being used to get all <code class="tag" title="HTML tag">input</code>
elements from the table.</p>
<p>In the example a simple <code>alert()</code> is used to show the information from the form, but an
Ajax call to the server with the form data could easily be performed.</p>
@ -1616,9 +1617,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
var table = $('#example').DataTable();
$('button').click( function() {
@ -1629,8 +1629,7 @@ $(document).ready(function() {
);
return false;
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -1652,10 +1651,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

21
examples/api/highlight.html
View File

@ -57,11 +57,11 @@ $(document).ready(function() {
easy enough using CSS, but for column highlighting, you need to use a little bit of Javascript.</p>
<p>This example shows that in action on DataTable by making use of the <a href=
"//datatables.net/api/cell%28%29.index%28%29"><code class="api" title=
"//datatables.net/reference/api/cell().index()"><code class="api" title=
"API method">cell().index()</code></a> method to get the index of the column that is to be operated on,
and then the <a href="//datatables.net/api/cells%28%29.nodes%28%29"><code class="api" title=
and then the <a href="//datatables.net/reference/api/cells().nodes()"><code class="api" title=
"API method">cells().nodes()</code></a> and <a href=
"//datatables.net/api/column%28%29.nodes%28%29"><code class="api" title=
"//datatables.net/reference/api/column().nodes()"><code class="api" title=
"API method">column().nodes()</code></a> methods to remove old classes and apply the new highlighted
class, respectively.</p>
</div>
@ -558,9 +558,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
var lastIdx = null;
var table = $('#example').DataTable();
@ -576,8 +575,7 @@ $(document).ready(function() {
.on( 'mouseleave', function () {
$( table.cells().nodes() ).removeClass( 'highlight' );
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -599,12 +597,9 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
td.highlight {
below:</p><code class="multiline brush: js;">td.highlight {
background-color: whitesmoke !important;
}
</pre>
}</code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

23
examples/api/multi_filter.html
View File

@ -52,20 +52,20 @@ $(document).ready(function() {
filter on specific columns only.</p>
<p>DataTables has the ability to apply filtering to a specific column through the <a href=
"//datatables.net/api/column%28%29.search%28%29"><code class="api" title=
"//datatables.net/reference/api/column().search()"><code class="api" title=
"API method">column().search()</code></a> method (note that the name of the method is
<code>search</code> not <code>filter</code> since <a href=
"//datatables.net/api/filter%28%29"><code class="api" title="API method">filter()</code></a> is used to
apply a filter to a data set).</p>
"//datatables.net/reference/api/filter()"><code class="api" title="API method">filter()</code></a> is
used to apply a filter to a data set).</p>
<p>The column filters are cumulative, so you can apply multiple individual column filters, in addition
to the global filter, allowing complex filtering options to be presented to the user.</p>
<p>This examples shows text elements being used with the <a href=
"//datatables.net/api/column%28%29.search%28%29"><code class="api" title=
"//datatables.net/reference/api/column().search()"><code class="api" title=
"API method">column().search()</code></a> method to add input controls in the footer of the table for
each column. Note that the <code>*index*:visible</code> option is used for the column selector to
ensure that the <a href="//datatables.net/api/column%28%29"><code class="api" title=
ensure that the <a href="//datatables.net/reference/api/column()"><code class="api" title=
"API method">column()</code></a> method takes into account any hidden columns when selecting the column
to act upon.</p>
</div>
@ -562,9 +562,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
// Setup - add a text input to each footer cell
$('#example tfoot th').each( function () {
var title = $('#example thead th').eq( $(this).index() ).text();
@ -581,8 +580,7 @@ $(document).ready(function() {
.search( this.value )
.draw();
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -604,10 +602,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

25
examples/api/multi_filter_select.html
View File

@ -52,14 +52,14 @@ $(document).ready(function() {
<p>After the table is initialised, the API is used to build the <code class="tag" title=
"HTML tag">select</code> inputs through the use of the <a href=
"//datatables.net/api/column%28%29.data%28%29"><code class="api" title=
"//datatables.net/reference/api/column().data()"><code class="api" title=
"API method">column().data()</code></a> method to get the data for each column in turn. The helper
methods <a href="//datatables.net/api/unique%28%29"><code class="api" title=
"API method">unique()</code></a> and <a href="//datatables.net/api/sort%28%29"><code class="api" title=
"API method">sort()</code></a> are also used to reduce the data for set input to unique and ordered
elements. Finally the <code>change</code> event from the <code class="tag" title=
methods <a href="//datatables.net/reference/api/unique()"><code class="api" title=
"API method">unique()</code></a> and <a href="//datatables.net/reference/api/sort()"><code class="api"
title="API method">sort()</code></a> are also used to reduce the data for set input to unique and
ordered elements. Finally the <code>change</code> event from the <code class="tag" title=
"HTML tag">select</code> input is used to trigger a column search using the <a href=
"//datatables.net/api/column%28%29.search%28%29"><code class="api" title=
"//datatables.net/reference/api/column().search()"><code class="api" title=
"API method">column().search()</code></a> method.</p>
</div>
@ -555,9 +555,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
var table = $('#example').DataTable();
$(&quot;#example tfoot th&quot;).each( function ( i ) {
@ -573,8 +572,7 @@ $(document).ready(function() {
select.append( '&lt;option value=&quot;'+d+'&quot;&gt;'+d+'&lt;/option&gt;' )
} );
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -596,10 +594,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

21
examples/api/regex.html
View File

@ -58,13 +58,13 @@ $(document).ready(function() {
<div class="info">
<p>Filtering a table is one of the most common user interactions with a DataTables table, and
DataTables provides a number of methods for you to control this interaction. There are APIs for the
global filter (<a href="//datatables.net/api/search%28%29"><code class="api" title=
global filter (<a href="//datatables.net/reference/api/search()"><code class="api" title=
"API method">search()</code></a>) and for each individual column (<a href=
"//datatables.net/api/column%28%29.search%28%29"><code class="api" title=
"//datatables.net/reference/api/column().search()"><code class="api" title=
"API method">column().search()</code></a>).</p>
<p>Note also that you must call the <a href="//datatables.net/api/draw%28%29"><code class="api" title=
"API method">draw()</code></a> method after performing the search, in order for the results to be
<p>Note also that you must call the <a href="//datatables.net/reference/api/draw()"><code class="api"
title="API method">draw()</code></a> method after performing the search, in order for the results to be
displayed.</p>
<p>Each filter (global or column) can be marked as a regular expression (allowing you to create very
@ -630,9 +630,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
function filterGlobal () {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">function filterGlobal () {
$('#example').DataTable().search(
$('#global_filter').val(),
$('#global_regex').prop('checked'),
@ -658,8 +657,7 @@ $(document).ready(function() {
$('input.column_filter').on( 'keyup click', function () {
filterColumn( $(this).parents('tr').attr('data-column') );
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -681,10 +679,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

23
examples/api/row_details.html
View File

@ -95,11 +95,11 @@ $(document).ready(function() {
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/api/row%28%29.child"><code class="api"
title="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/api/row%28%29.child.hide%28%29"><code class="api" title=
<p>The example below makes use of the <a href="//datatables.net/reference/api/row().child"><code class=
"api" title="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=
"API method">row().child.hide()</code></a>), otherwise show it (<a href=
"//datatables.net/api/row%28%29.child.show%28%29"><code class="api" title=
"//datatables.net/reference/api/row().child.show()"><code class="api" title=
"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
@ -137,9 +137,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
/* Formatting function for row details - modify as you need */
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">/* Formatting function for row details - modify as you need */
function format ( d ) {
// `d` is the original data object for the row
return '&lt;table cellpadding=&quot;5&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; style=&quot;padding-left:50px;&quot;&gt;'+
@ -192,8 +191,7 @@ $(document).ready(function() {
tr.addClass('shown');
}
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -215,16 +213,13 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
td.details-control {
below:</p><code class="multiline brush: js;">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;
}
</pre>
}</code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

15
examples/api/select_row.html
View File

@ -42,7 +42,7 @@ $(document).ready(function() {
<div class="info">
<p>It can be quite useful at times to provide the user with the option to select rows in a DataTable.
This can be done by simply using a click event to add / remove a class on the table rows. The <a href=
"//datatables.net/api/rows%28%29.data%28%29"><code class="api" title=
"//datatables.net/reference/api/rows().data()"><code class="api" title=
"API method">rows().data()</code></a> method can then be used to get the data for the selected rows. In
this case it is simply counting the number of selected rows, but much more complex interactions can
easily be developed.</p>
@ -544,9 +544,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
var table = $('#example').DataTable();
$('#example tbody').on( 'click', 'tr', function () {
@ -556,8 +555,7 @@ $(document).ready(function() {
$('#button').click( function () {
alert( table.rows('.selected').data().length +' row(s) selected' );
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -579,10 +577,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

19
examples/api/select_single_row.html
View File

@ -51,10 +51,10 @@ $(document).ready(function() {
if so removing it, if not then the class is removed from any other row in the table which does have it
and applied to the row to be selected.</p>
<p>Also shown is the <a href="//datatables.net/api/row%28%29.remove%28%29"><code class="api" title=
<p>Also shown is the <a href="//datatables.net/reference/api/row().remove()"><code class="api" title=
"API method">row().remove()</code></a> method which will delete a row from a table, and the <a href=
"//datatables.net/api/draw%28%29"><code class="api" title="API method">draw()</code></a> method with
<code>false</code> as its first parameter. This will redraw the table keeping the current paging
"//datatables.net/reference/api/draw()"><code class="api" title="API method">draw()</code></a> method
with <code>false</code> as its first parameter. This will redraw the table keeping the current paging
(without the <code>false</code> parameter the paging would be reset to the first page).</p>
<p>If you are looking for a more complete row selection option <a href=
@ -554,9 +554,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
var table = $('#example').DataTable();
$('#example tbody').on( 'click', 'tr', function () {
@ -572,8 +571,7 @@ $(document).ready(function() {
$('#button').click( function () {
table.row('.selected').remove().draw( false );
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -595,10 +593,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

21
examples/api/show_hide.html
View File

@ -46,15 +46,15 @@ $(document).ready(function() {
<div class="info">
<p>This example shows how you can make use of the <a href=
"//datatables.net/api/column%28%29.visible%28%29"><code class="api" title=
"//datatables.net/reference/api/column().visible()"><code class="api" title=
"API method">column().visible()</code></a> API method to dynamically show and hide columns in a table.
Also included here is scrolling, just to show it enabled with this API method, although that is not
required for the API function to work.</p>
<p>In addition to this, groups of columns can be shown and hidden at the same time using the <a href=
"//datatables.net/api/columns%28%29"><code class="api" title="API method">columns()</code></a> method
to select multiple columns and then using the <a href=
"//datatables.net/api/columns%28%29.visible%28%29"><code class="api" title=
"//datatables.net/reference/api/columns()"><code class="api" title="API method">columns()</code></a>
method to select multiple columns and then using the <a href=
"//datatables.net/reference/api/columns().visible()"><code class="api" title=
"API method">columns().visible()</code></a> method to set their state.</p>
<p>If you are looking for a more complete column visibility interaction controls <a href=
@ -561,9 +561,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
var table = $('#example').DataTable( {
&quot;scrollY&quot;: &quot;200px&quot;,
&quot;paging&quot;: false
@ -578,8 +577,7 @@ $(document).ready(function() {
// Toggle the visibility
column.visible( ! column.visible() );
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -601,10 +599,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

19
examples/api/tabs_and_scrolling.html
View File

@ -52,14 +52,14 @@ $(document).ready(function() {
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/api/columns.adjust%28%29"><code class="api" title=
"//datatables.net/reference/api/columns.adjust()"><code class="api" title=
"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 jQuery UI <code>show</code> event can be used to trigger this method
call. The visible tables on the page are selected using the static <code>dt-api-static tables()</code>
method and passing the result to <a href="//datatables.net/api/columns.adjust%28%29"><code class="api"
title="API method">columns.adjust()</code></a>.</p>
method and passing the result to <a href="//datatables.net/reference/api/columns.adjust()"><code class=
"api" title="API method">columns.adjust()</code></a>.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@ -554,9 +554,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$(&quot;#tabs&quot;).tabs( {
&quot;activate&quot;: function(event, ui) {
$( $.fn.dataTable.tables( true ) ).DataTable().columns.adjust();
@ -569,8 +568,7 @@ $(document).ready(function() {
&quot;paging&quot;: false,
&quot;jQueryUI&quot;: true
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -594,10 +592,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

21
examples/basic_init/alt_pagination.html
View File

@ -35,7 +35,7 @@ $(document).ready(function() {
<p>The default page control presented by DataTables (forward and backward buttons with up to 7 page
numbers in-between) is fine for most situations, but there are cases where you may wish to customise
the options presented to the end user. This is done through DataTables' extensible pagination
mechanism, the <a href="//datatables.net/init/pagingType"><code class="option" title=
mechanism, the <a href="//datatables.net/reference/option/pagingType"><code class="option" title=
"Initialisation option">pagingType</code></a> option.</p>
<p>There are four built-in options for which pagination controls DataTables should show:</p>
@ -51,9 +51,9 @@ $(document).ready(function() {
</ul>
<p>The language strings of 'First', 'Previous' etc can be optionally through the internationalisation
options of DataTables; <a href="//datatables.net/init/language.first"><code class="option" title=
"Initialisation option">language.first</code></a>, <a href=
"//datatables.net/init/language.previous"><code class="option" title=
options of DataTables; <a href="//datatables.net/reference/option/language.first"><code class="option"
title="Initialisation option">language.first</code></a>, <a href=
"//datatables.net/reference/option/language.previous"><code class="option" title=
"Initialisation option">language.previous</code></a> etc.</p>
<p>Additional options for the buttons that are shown can be added through the use of pagination type
@ -556,14 +556,12 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;pagingType&quot;: &quot;full_numbers&quot;
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -585,10 +583,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

20
examples/basic_init/complex_header.html
View File

@ -36,9 +36,10 @@ $(document).ready(function() {
<p>Each column must have one TH cell which is unique to it for the listeners to be added. By default
DataTables will use the bottom unique cell for the column to attach the irder listener, if more than
one cell for a column if found. The <a href="//datatables.net/init/orderCellsTop"><code class="option"
title="Initialisation option">orderCellsTop</code></a> option can be used to tell DataTables to use the
top cell if you prefer.</p>
one cell for a column if found. The <a href=
"//datatables.net/reference/option/orderCellsTop"><code class="option" title=
"Initialisation option">orderCellsTop</code></a> option can be used to tell DataTables to use the top
cell if you prefer.</p>
<p>The example shown below has two sets of grouped information, grouped by colspan in the header.</p>
</div>
@ -539,12 +540,10 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable();
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -566,10 +565,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

32
examples/basic_init/dom.html
View File

@ -35,14 +35,15 @@ $(document).ready(function() {
<p>When customising DataTables for your own usage, you might find that the default position of the
feature elements (filter input etc) is not quite to your liking. To address this issue DataTables takes
inspiration from the CSS 3 Advanced Layout Module and provides the <a href=
"//datatables.net/init/dom"><code class="option" title="Initialisation option">dom</code></a>
initialisation parameter which can be set to indicate where you which particular features to appear in
the DOM. You can also specify <code>div</code> wrapping containers (with an id and / or class) to
provide complete layout flexibility.</p>
"//datatables.net/reference/option/dom"><code class="option" title=
"Initialisation option">dom</code></a> initialisation parameter which can be set to indicate where you
which particular features to appear in the DOM. You can also specify <code>div</code> wrapping
containers (with an id and / or class) to provide complete layout flexibility.</p>
<p>Each HTML control element presented by DataTables is denoted by a single character in the <a href=
"//datatables.net/init/dom"><code class="option" title="Initialisation option">dom</code></a> option.
For example the <code>l</code> option is used for the <code>L</code>ength changing input option.</p>
"//datatables.net/reference/option/dom"><code class="option" title=
"Initialisation option">dom</code></a> option. For example the <code>l</code> option is used for the
<code>L</code>ength changing input option.</p>
<p>The built-in options available are:</p>
@ -101,9 +102,9 @@ $(document).ready(function() {
times, for if you want to show the same control multiple times (pagination at the top and bottom of the
table for example).</p>
<p>Furthermore, note that additional <a href="//datatables.net/init/dom"><code class="option" title=
"Initialisation option">dom</code></a> options can be added to DataTables through the use of
plug-ins.</p>
<p>Furthermore, note that additional <a href="//datatables.net/reference/option/dom"><code class=
"option" title="Initialisation option">dom</code></a> options can be added to DataTables through the
use of plug-ins.</p>
<p>In the example below, the table information is moved to the top of the table, and all the
interaction elements to the bottom, each wrapper in a container <code>div</code>.</p>
@ -601,14 +602,12 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;dom&quot;: '&lt;&quot;top&quot;i&gt;rt&lt;&quot;bottom&quot;flp&gt;&lt;&quot;clear&quot;&gt;'
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -630,10 +629,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

13
examples/basic_init/filter_only.html
View File

@ -531,16 +531,14 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;paging&quot;: false,
&quot;ordering&quot;: false,
&quot;info&quot;: false
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -562,10 +560,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

15
examples/basic_init/flexible_width.html
View File

@ -536,12 +536,10 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable();
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -563,12 +561,9 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
div.container {
below:</p><code class="multiline brush: js;">div.container {
width: 80%;
}
</pre>
}</code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

17
examples/basic_init/hidden_columns.html
View File

@ -45,8 +45,8 @@ $(document).ready(function() {
<p>There are times when you might find it useful to display only a sub-set of the information that was
available in the original table. For example you might want to reduce the amount of data shown on
screen to make it clearer for the user. This is done through the <a href=
"//datatables.net/init/visible"><code class="option" title="Initialisation option">visible</code></a>
column option.</p>
"//datatables.net/reference/option/visible"><code class="option" title=
"Initialisation option">visible</code></a> column option.</p>
<p>The column that is hidden is still part of the table and can be made visible through the <code>api
column().visible()</code> API method at a future time if you wish to have columns which can be shown
@ -552,9 +552,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;columnDefs&quot;: [
{
@ -568,8 +567,7 @@ $(document).ready(function() {
}
]
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -591,10 +589,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

17
examples/basic_init/language.html
View File

@ -39,8 +39,8 @@ $(document).ready(function() {
<div class="info">
<p>Changing the language information displayed by DataTables is as simple as passing in a <a href=
"//datatables.net/init/language"><code class="option" title="Initialisation option">language</code></a>
object to the DataTable constructor.</p>
"//datatables.net/reference/option/language"><code class="option" title=
"Initialisation option">language</code></a> object to the DataTable constructor.</p>
<p>The example above shows a different set of English string being used, rather than the defaults.</p>
</div>
@ -537,9 +537,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;language&quot;: {
&quot;lengthMenu&quot;: &quot;Display _MENU_ records per page&quot;,
@ -549,8 +548,7 @@ $(document).ready(function() {
&quot;infoFiltered&quot;: &quot;(filtered from _MAX_ total records)&quot;
}
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -572,10 +570,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

21
examples/basic_init/multi_col_sort.html
View File

@ -50,17 +50,17 @@ $(document).ready(function() {
column).</li>
<li>On a per-column basis (i.e. order by a specific column and then a secondary column if the data
in the first column is identical), through the <a href=
"//datatables.net/init/orderData"><code class="option" title=
"//datatables.net/reference/option/orderData"><code class="option" title=
"Initialisation option">orderData</code></a> option.</li>
<li>Using the <a href="//datatables.net/init/orderData"><code class="option" title=
<li>Using the <a href="//datatables.net/reference/option/orderData"><code class="option" title=
"Initialisation option">orderData</code></a> option to specify a multiple column order by default
(for example <code>[ [0,'asc'], [1,'asc'] ]</code>).</li>
<li>Through the <a href="//datatables.net/api/order%28%29"><code class="api" title=
<li>Through the <a href="//datatables.net/reference/api/order()"><code class="api" title=
"API method">order()</code></a> API method.</li>
</ul>
<p>Note that, the ability for the user to shift click to order multiple columns can be disabled through
the <a href="//datatables.net/init/orderMutli"><code class="option" title=
the <a href="//datatables.net/reference/option/orderMutli"><code class="option" title=
"Initialisation option">orderMutli</code></a> option.</p>
<p>The example below shows the first column having a secondary order applied to the second column in
@ -491,9 +491,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
columnDefs: [ {
targets: [ 0 ],
@ -506,8 +505,7 @@ $(document).ready(function() {
orderData: [ 4, 0 ]
} ]
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -529,10 +527,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

15
examples/basic_init/multiple_tables.html
View File

@ -331,12 +331,10 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('table.display').dataTable();
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -358,12 +356,9 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
div.dataTables_wrapper {
below:</p><code class="multiline brush: js;">div.dataTables_wrapper {
margin-bottom: 3em;
}
</pre>
}</code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

23
examples/basic_init/scroll_x.html
View File

@ -40,10 +40,10 @@ $(document).ready(function() {
<div class="info">
<p>DataTables has the ability to show tables with horizontal scrolling, which is very useful for when
you have a wide table, but want to constrain it to a limited horizontal display area. To enable
x-scrolling simply set the <a href="//datatables.net/init/scrollX"><code class="option" title=
"Initialisation option">scrollX</code></a> parameter to be whatever you want the container wrapper's
width to be (this should be 100% in almost all cases with the width being constrained by the container
element).</p>
x-scrolling simply set the <a href="//datatables.net/reference/option/scrollX"><code class="option"
title="Initialisation option">scrollX</code></a> parameter to be whatever you want the container
wrapper's width to be (this should be 100% in almost all cases with the width being constrained by the
container element).</p>
<p>The example below shows a table too wide for the containing element with x-scrolling enabled. The
CSS option of <code>th, td { white-space: nowrap; }</code> is also set to have the text content of each
@ -706,14 +706,12 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;scrollX&quot;: true
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -735,14 +733,11 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
th, td { white-space: nowrap; }
below:</p><code class="multiline brush: js;">th, td { white-space: nowrap; }
div.dataTables_wrapper {
width: 800px;
margin: 0 auto;
}
</pre>
}</code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

15
examples/basic_init/scroll_xy.html
View File

@ -698,15 +698,13 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;scrollY&quot;: 200,
&quot;scrollX&quot;: true
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -728,14 +726,11 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
th, td { white-space: nowrap; }
below:</p><code class="multiline brush: js;">th, td { white-space: nowrap; }
div.dataTables_wrapper {
width: 800px;
margin: 0 auto;
}
</pre>
}</code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

29
examples/basic_init/scroll_y.html
View File

@ -39,15 +39,15 @@ $(document).ready(function() {
area, and as such pagination has been disabled here (note that this is not mandatory, it will work just
fine with pagination enabled as well!).</p>
<p>To enable y-scrolling simply set the <a href="//datatables.net/init/scrollY"><code class="option"
title="Initialisation option">scrollY</code></a> parameter to be whatever you want the container
wrapper's height to be (any CSS measurement is acceptable, or just a number which is treated as
pixels).</p>
<p>To enable y-scrolling simply set the <a href=
"//datatables.net/reference/option/scrollY"><code class="option" title=
"Initialisation option">scrollY</code></a> parameter to be whatever you want the container wrapper's
height to be (any CSS measurement is acceptable, or just a number which is treated as pixels).</p>
<p>Note also that the <a href="//datatables.net/init/scrollCollapse"><code class="option" title=
"Initialisation option">scrollCollapse</code></a> option is enabled in this example. This will have the
container match the height of the rows shown in the table if that height is smaller than that given
height by the <a href="//datatables.net/init/scrollY"><code class="option" title=
<p>Note also that the <a href="//datatables.net/reference/option/scrollCollapse"><code class="option"
title="Initialisation option">scrollCollapse</code></a> option is enabled in this example. This will
have the container match the height of the rows shown in the table if that height is smaller than that
given height by the <a href="//datatables.net/reference/option/scrollY"><code class="option" title=
"Initialisation option">scrollY</code></a>.</p>
</div>
@ -543,16 +543,14 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;scrollY&quot;: &quot;200px&quot;,
&quot;scrollCollapse&quot;: true,
&quot;paging&quot;: false
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -574,10 +572,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

13
examples/basic_init/scroll_y_theme.html
View File

@ -531,16 +531,14 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;scrollY&quot;: 200,
&quot;scrollCollapse&quot;: true,
&quot;jQueryUI&quot;: true
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -562,10 +560,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

29
examples/basic_init/state_save.html
View File

@ -33,26 +33,26 @@ $('#example').dataTable( {
<p>DataTables has the option of being able to save the state of a table (its paging position, ordering
state etc) so that is can be restored when the user reloads a page, or comes back to the page after
visiting a sub-page. This state saving ability is enabled by the <a href=
"//datatables.net/init/stateSave"><code class="option" title=
"//datatables.net/reference/option/stateSave"><code class="option" title=
"Initialisation option">stateSave</code></a> option.</p>
<p>The built in state saving method uses the HTML5 <code>localStorage</code> API for efficient storage
of the data. Please note that this means that the built in state saving option <em>will not work with
IE6/7</em> as these browsers do not support this API. Alternative options of using cookies or saving
the state on the server through Ajax can be used through the <a href=
"//datatables.net/init/stateSaveCallback"><code class="option" title=
"//datatables.net/reference/option/stateSaveCallback"><code class="option" title=
"Initialisation option">stateSaveCallback</code></a> and <a href=
"//datatables.net/init/stateLoadCallback"><code class="option" title=
"//datatables.net/reference/option/stateLoadCallback"><code class="option" title=
"Initialisation option">stateLoadCallback</code></a> options.</p>
<p>Additionally, note also that the duration for which the saved state is valid and can be used to
restore the table state can be set using the <a href="//datatables.net/init/stateDuration"><code class=
"option" title="Initialisation option">stateDuration</code></a> initialisation parameter (2 hours by
default).</p>
restore the table state can be set using the <a href=
"//datatables.net/reference/option/stateDuration"><code class="option" title=
"Initialisation option">stateDuration</code></a> initialisation parameter (2 hours by default).</p>
<p>The example below simply shows state saving enabled in DataTables with the <a href=
"//datatables.net/init/saveSave"><code class="option" title="Initialisation option">saveSave</code></a>
option.</p>
"//datatables.net/reference/option/saveSave"><code class="option" title=
"Initialisation option">saveSave</code></a> option.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@ -547,12 +547,10 @@ $('#example').dataTable( {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$('#example').dataTable( {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$('#example').dataTable( {
&quot;stateSave&quot;: true
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -574,10 +572,7 @@ $('#example').dataTable( {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

23
examples/basic_init/table_sorting.html
View File

@ -33,17 +33,17 @@ $(document).ready(function() {
<div class="info">
<p>With DataTables you can alter the ordering characteristics of the table at initialisation time.
Using the <a href="//datatables.net/init/order"><code class="option" title=
Using the <a href="//datatables.net/reference/option/order"><code class="option" title=
"Initialisation option">order</code></a> initialisation parameter, you can set the table to display the
data in exactly the order that you want.</p>
<p>The <a href="//datatables.net/init/order"><code class="option" title=
<p>The <a href="//datatables.net/reference/option/order"><code class="option" title=
"Initialisation option">order</code></a> parameter is an array of arrays where the first value of the
inner array is the column to order on, and the second is <code class="string" title=
"String">'asc'</code> (ascending ordering) or <code class="string" title="String">'desc'</code>
(descending ordering) as required. <a href="//datatables.net/init/order"><code class="option" title=
"Initialisation option">order</code></a> is a 2D array to allow multi-column ordering to be
defined.</p>
(descending ordering) as required. <a href="//datatables.net/reference/option/order"><code class=
"option" title="Initialisation option">order</code></a> is a 2D array to allow multi-column ordering to
be defined.</p>
<p>The table below is ordered (descending) by the Age column.</p>
</div>
@ -540,14 +540,12 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;order&quot;: [[ 3, &quot;desc&quot; ]]
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -569,10 +567,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

13
examples/basic_init/zero_configuration.html
View File

@ -531,12 +531,10 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable();
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -558,10 +556,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

31
examples/data_sources/ajax.html
View File

@ -36,18 +36,20 @@ $(document).ready(function() {
<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/init/ajax"><code class="option" title="Initialisation option">ajax</code></a> option
to the address of the JSON data source.</p>
"//datatables.net/reference/option/ajax"><code class="option" title=
"Initialisation option">ajax</code></a> option to the address of the JSON data source.</p>
<p>The <a href="//datatables.net/init/ajax"><code class="option" title=
<p>The <a href="//datatables.net/reference/option/ajax"><code class="option" title=
"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/init/ajax"><code class=
"option" title="Initialisation option">ajax</code></a> documentation or the other Ajax examples for
DataTables for further information.</p>
altering how the Ajax request is made. See the <a href=
"//datatables.net/reference/option/ajax"><code class="option" title=
"Initialisation option">ajax</code></a> documentation or the other Ajax examples for DataTables 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/init/columns.data"><code class=
"option" title="Initialisation option">columns.data</code></a> option ).</p>
parameters can also be used through the <a href=
"//datatables.net/reference/option/columns.data"><code class="option" title=
"Initialisation option">columns.data</code></a> option ).</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@ -83,14 +85,12 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;ajax&quot;: '../ajax/data/arrays.txt'
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -112,10 +112,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

13
examples/data_sources/dom.html
View File

@ -529,12 +529,10 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable();
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -556,10 +554,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

22
examples/data_sources/js_array.html
View File

@ -105,10 +105,11 @@ $(document).ready(function() {
<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/init/data"><code class="option" title="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/init/columns.data"><code class=
"option" title="Initialisation option">columns.data</code></a> option).</p>
"//datatables.net/reference/option/data"><code class="option" title=
"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=
"Initialisation option">columns.data</code></a> option).</p>
<p>A <code>&lt;table&gt;</code> must be available on the page for DataTables to use. This examples
shows the element being added by Javascript and then initialising the DataTable with a set of data from
@ -125,9 +126,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
var dataSet = [
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">var dataSet = [
['Trident','Internet Explorer 4.0','Win 95+','4','X'],
['Trident','Internet Explorer 5.0','Win 95+','5','C'],
['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],
@ -200,8 +200,7 @@ $(document).ready(function() {
{ &quot;title&quot;: &quot;Grade&quot;, &quot;class&quot;: &quot;center&quot; }
]
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -223,10 +222,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

17
examples/data_sources/server_side.html
View File

@ -42,9 +42,9 @@ $(document).ready(function() {
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/init/serverSide"><code class="option" title=
"//datatables.net/reference/option/serverSide"><code class="option" title=
"Initialisation option">serverSide</code></a> option to <code>true</code> and providing an Ajax data
source through the <a href="//datatables.net/init/ajax"><code class="option" title=
source through the <a href="//datatables.net/reference/option/ajax"><code class="option" title=
"Initialisation option">ajax</code></a> option.</p>
<p>This example shows a very simple table, matching the other examples, but in this instance using
@ -84,16 +84,14 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;processing&quot;: true,
&quot;serverSide&quot;: true,
&quot;ajax&quot;: &quot;../server_side/scripts/server_processing.php&quot;
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -115,10 +113,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

15
examples/plug-ins/api.html
View File

@ -62,7 +62,7 @@ $(document).ready(function() {
sum of a column in a single line: <code>table.column().data().sum()</code>. Due to the chaining of the
methods, this allows <code>sum()</code> to very easily give the sum for any selected column, and to
limit the sum to just the current page, filtered data or all pages. This is done using the options for
the <a href="//datatables.net/api/column%28%29"><code class="api" title=
the <a href="//datatables.net/reference/api/column()"><code class="api" title=
"API method">column()</code></a> method and the options for its selectors.</p>
<p>For more information about API plug-ins; creating them and their requirements, please refer to the
@ -562,9 +562,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$.fn.dataTable.Api.register( 'column().data().sum()', function () {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$.fn.dataTable.Api.register( 'column().data().sum()', function () {
return this.reduce( function (a, b) {
var x = parseFloat( a ) || 0;
var y = parseFloat( b ) || 0;
@ -587,8 +586,7 @@ $(document).ready(function() {
.on( 'click', function () {
alert( 'Column sum is: '+ table.column( 3, {page:'current'} ).data().sum() );
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -610,10 +608,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

18
examples/plug-ins/dom_sort.html
View File

@ -78,8 +78,9 @@ $(document).ready(function() {
<p>This is a fairly simple example, but it you aren't constrained to just using form input elements,
you could use anything and customise your DOM queries to suit yourself. You could also update the
ordering live as a user in entered data into a form using an event handler calling <a href=
"//datatables.net/api/order%28%29"><code class="api" title="API method">order()</code></a> or <a href=
"//datatables.net/api/draw%28%29"><code class="api" title="API method">draw()</code></a> methods.</p>
"//datatables.net/reference/api/order()"><code class="api" title="API method">order()</code></a> or
<a href="//datatables.net/reference/api/draw()"><code class="api" title="API method">draw()</code></a>
methods.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@ -1642,9 +1643,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
/* Create an array with the values of all the input boxes in a column */
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">/* Create an array with the values of all the input boxes in a column */
$.fn.dataTable.ext.order['dom-text'] = function ( settings, col )
{
return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
@ -1678,8 +1678,7 @@ $(document).ready(function() {
{ &quot;orderDataType&quot;: &quot;dom-select&quot; }
]
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -1701,10 +1700,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

13
examples/plug-ins/range_filtering.html
View File

@ -568,9 +568,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
/* Custom filtering function which will filter data in column four between two values */
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">/* Custom filtering function which will filter data in column four between two values */
$.fn.dataTable.ext.filter.push(
function( settings, data, dataIndex ) {
var min = $('#min').val() * 1;
@ -595,8 +594,7 @@ $(document).ready(function() {
$('#min, #max').keyup( function() {
table.draw();
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -618,10 +616,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

13
examples/plug-ins/sorting_auto.html
View File

@ -552,9 +552,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$.fn.dataTable.ext.type.detect.unshift(
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$.fn.dataTable.ext.type.detect.unshift(
function ( d ) {
return /^[\-\d,]+$/.test( d ) ? 'numeric-comma' : null;
}
@ -567,8 +566,7 @@ $.fn.dataTable.ext.type.order['numeric-comma-pre'] = function ( d ) {
$(document).ready(function() {
$('#example').dataTable();
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -590,10 +588,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

21
examples/plug-ins/sorting_manual.html
View File

@ -45,10 +45,10 @@ $(document).ready(function() {
more complex formatted data, it can be desirable to define the ordering order yourself. Using plug-in
ordering functions, you have have DataTables order data in any manner you wish.</p>
<p>This is done by using the <a href="//datatables.net/init/columns.type"><code class="option" title=
"Initialisation option">columns.type</code></a> parameter, in combination with a ordering plug-in. The
ordering plug-in can be be of any level of complexity (natural ordering for example can be fairly
complex while also very powerful), and is defined by attaching to the
<p>This is done by using the <a href="//datatables.net/reference/option/columns.type"><code class=
"option" title="Initialisation option">columns.type</code></a> parameter, in combination with a
ordering plug-in. The ordering plug-in can be be of any level of complexity (natural ordering for
example can be fairly complex while also very powerful), and is defined by attaching to the
<code>$.fn.dataTable.ext.type.order</code> object. For more information about ordering plug-ins;
creating them and their requirements, please refer to the plug-in development documentation.</p>
@ -551,9 +551,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$.fn.dataTable.ext.type.order['numeric-comma-pre'] = function ( d ) {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$.fn.dataTable.ext.type.order['numeric-comma-pre'] = function ( d ) {
return parseFloat( d.replace(/,/g, '.') ) || 0;
};
@ -564,8 +563,7 @@ $(document).ready(function() {
&quot;targets&quot;: 3
} ]
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -587,10 +585,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

22
examples/resources/demo.css
View File

@ -163,36 +163,42 @@ code {
}
code.option {
color: #D14;
color: #D14; /* red */
background-color: #fcf6f8;
border: 1px solid #f7d6df;
}
code.path {
color: #095c05;
color: #095c05; /* dark green */
border: 1px solid #D6E9C6;
}
code.tag {
color: #095c05;
background-color: #f5fcf5;
color: #cad119; /* yellow */
background-color: #f7f8e6;
border: 1px solid #D6E9C6;
}
code.api {
color: #0c199c;
color: #0c199c; /* dark blue */
background-color: #f4f5fc;
border: 1px solid #c6cbe9;
}
code.type {
color: #d119cf; /* purple */
background-color: #faebfa;
border: 1px solid #f3aef2;
}
code.event {
color: #2a839e;
color: #2a839e; /* deep aqua */
background-color: #f5fafb;
border: 1px solid #a8ddec;
}
code.string {
color: #e8941e;
color: #e8941e; /* orange */
background-color: #fcf8f1;
border: 1px solid #f7e4c9;
}
@ -241,7 +247,7 @@ ul.tabs li.active:hover {
}
div.tabs>div {
padding: 0 20px;
padding: 1em;
border: 1px solid #ccc;
margin-top: 1px;
display: none;

15
examples/resources/demo.js
View File

@ -1,5 +1,6 @@
/*global SyntaxHighlighter*/
SyntaxHighlighter.config.tagName = 'code';
$(document).ready( function () {
// Work around for WebKit bug 55740
@ -15,16 +16,16 @@ $(document).ready( function () {
// css
var cssContainer = $('div.tabs div.css');
if ( $.trim( cssContainer.find('pre').text() ) === '' ) {
cssContainer.find('pre, p:eq(0), div').css('display', 'none');
if ( $.trim( cssContainer.find('code').text() ) === '' ) {
cssContainer.find('code, p:eq(0), div').css('display', 'none');
}
// init html
var table = $('<p/>').append( $('table').clone() ).html();
$('div.tabs div.table').append(
'<pre class="brush: html;">\t\t\t'+
'<code class="multiline brush: html;">\t\t\t'+
escapeHtml( table )+
'</pre>'
'</code>'
);
//SyntaxHighlighter.highlight({}, $('#display-init-html')[0]);
@ -36,7 +37,7 @@ $(document).ready( function () {
var show = function ( str ) {
ajaxTab.css( 'display', 'block' );
$('div.tabs div.ajax pre').remove();
$('div.tabs div.ajax code').remove();
// Old IE :-|
try {
@ -44,9 +45,9 @@ $(document).ready( function () {
} catch ( e ) {}
$('div.tabs div.ajax').append(
'<pre class="brush: js;">'+str+'</pre>'
'<code class="multiline brush: js;">'+str+'</code>'
);
SyntaxHighlighter.highlight( {}, $('div.tabs div.ajax pre')[0] );
SyntaxHighlighter.highlight( {}, $('div.tabs div.ajax code')[0] );
};
// First draw

18
examples/server_side/custom_vars.html
View File

@ -43,8 +43,9 @@ $(document).ready(function() {
<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/init/ajax"><code class="option" title="Initialisation option">ajax</code></a>
option's <code>data</code> parameter which can be used in one of two different ways:</p>
"//datatables.net/reference/option/ajax"><code class="option" title=
"Initialisation option">ajax</code></a> option's <code>data</code> parameter which can be used in one
of two different ways:</p>
<ul>
<li><code>object</code> - An object data to send to the server. This is useful for adding static
@ -91,9 +92,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;processing&quot;: true,
&quot;serverSide&quot;: true,
@ -106,8 +106,7 @@ $(document).ready(function() {
}
}
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -129,10 +128,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

17
examples/server_side/defer_loading.html
View File

@ -42,14 +42,14 @@ $(document).ready(function() {
reasons).</p>
<p>This automatic Ajax call to get the first page of data can be overridden by using the <a href=
"//datatables.net/init/deferLoading"><code class="option" title=
"//datatables.net/reference/option/deferLoading"><code class="option" title=
"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/init/deferLoading"><code class="option" title=
<a href="//datatables.net/reference/option/deferLoading"><code class="option" title=
"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>
@ -168,17 +168,15 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;processing&quot;: true,
&quot;serverSide&quot;: true,
&quot;ajax&quot;: &quot;scripts/server_processing.php&quot;,
&quot;deferLoading&quot;: 57
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -200,10 +198,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

13
examples/server_side/ids.html
View File

@ -95,9 +95,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;processing&quot;: true,
&quot;serverSide&quot;: true,
@ -111,8 +110,7 @@ $(document).ready(function() {
{ &quot;data&quot;: &quot;salary&quot; }
]
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -134,10 +132,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

4
examples/server_side/index.html
View File

@ -25,9 +25,9 @@
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/init/serverSide"><code class="option" title=
"//datatables.net/reference/option/serverSide"><code class="option" title=
"Initialisation option">serverSide</code></a> option to <code>true</code> and providing an Ajax data
source through the <a href="//datatables.net/init/ajax"><code class="option" title=
source through the <a href="//datatables.net/reference/option/ajax"><code class="option" title=
"Initialisation option">ajax</code></a> option.</p>
<p>The examples in this section show server-side processing in use and</p>

27
examples/server_side/jsonp.html
View File

@ -41,17 +41,17 @@ $(document).ready(function() {
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/init/ajax"><code class="option" title=
"Initialisation option">ajax</code></a> initialisation option.</p>
<code>dataType</code> option of the <a href="//datatables.net/reference/option/ajax"><code class=
"option" title="Initialisation option">ajax</code></a> initialisation option.</p>
<p>When given as an object, the <a href="//datatables.net/init/ajax"><code class="option" title=
"Initialisation option">ajax</code></a> option maps directly onto the <a href=
<p>When given as an object, the <a href="//datatables.net/reference/option/ajax"><code class="option"
title="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/init/ajax"><code class="option" title="Initialisation option">ajax</code></a>
option).</p>
"//datatables.net/reference/option/ajax"><code class="option" title=
"Initialisation option">ajax</code></a> option).</p>
<p>The example below shows <a href="//datatables.net/init/ajax"><code class="option" title=
<p>The example below shows <a href="//datatables.net/reference/option/ajax"><code class="option" title=
"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>
@ -89,9 +89,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;processing&quot;: true,
&quot;serverSide&quot;: true,
@ -100,8 +99,7 @@ $(document).ready(function() {
&quot;dataType&quot;: &quot;jsonp&quot;
}
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -123,10 +121,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

18
examples/server_side/object_data.html
View File

@ -49,8 +49,9 @@ $(document).ready(function() {
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/init/columns.data"><code class=
"option" title="Initialisation option">columns.data</code></a> property given for each column.</p>
each property that is specified by the <a href=
"//datatables.net/reference/option/columns.data"><code class="option" title=
"Initialisation option">columns.data</code></a> property given for each column.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@ -86,9 +87,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;processing&quot;: true,
&quot;serverSide&quot;: true,
@ -102,8 +102,7 @@ $(document).ready(function() {
{ &quot;data&quot;: &quot;salary&quot; }
]
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -125,10 +124,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

19
examples/server_side/pipeline.html
View File

@ -132,9 +132,9 @@ $(document).ready(function() {
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/init/ajax"><code class="option" title="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>
"//datatables.net/reference/option/ajax"><code class="option" title=
"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,
@ -174,9 +174,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
//
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">//
// Pipelining function for DataTables. To be used to the `ajax` option of DataTables
//
$.fn.dataTable.pipeline = function ( opts ) {
@ -270,8 +269,7 @@ $(document).ready(function() {
pages: 5 // number of pages to cache
} )
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -293,10 +291,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

27
examples/server_side/post.html
View File

@ -48,17 +48,17 @@ $(document).ready(function() {
<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/init/ajax"><code class="option"
title="Initialisation option">ajax</code></a> initialisation option.</p>
using the <code>type</code> option of the <a href="//datatables.net/reference/option/ajax"><code class=
"option" title="Initialisation option">ajax</code></a> initialisation option.</p>
<p>When given as an object, the <a href="//datatables.net/init/ajax"><code class="option" title=
"Initialisation option">ajax</code></a> option maps directly onto the <a href=
<p>When given as an object, the <a href="//datatables.net/reference/option/ajax"><code class="option"
title="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/init/ajax"><code class="option" title="Initialisation option">ajax</code></a>
option).</p>
"//datatables.net/reference/option/ajax"><code class="option" title=
"Initialisation option">ajax</code></a> option).</p>
<p>The example below shows <a href="//datatables.net/init/ajax"><code class="option" title=
<p>The example below shows <a href="//datatables.net/reference/option/ajax"><code class="option" title=
"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>
@ -96,9 +96,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;processing&quot;: true,
&quot;serverSide&quot;: true,
@ -115,8 +114,7 @@ $(document).ready(function() {
{ &quot;data&quot;: &quot;salary&quot; }
]
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -138,10 +136,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

25
examples/server_side/row_details.html
View File

@ -83,15 +83,15 @@ $(document).ready(function() {
<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/init/columns.data"><code class="option" title=
"//datatables.net/reference/option/columns.data"><code class="option" title=
"Initialisation option">columns.data</code></a> and <a href=
"//datatables.net/init/columns.defaultContent"><code class="option" title=
"//datatables.net/reference/option/columns.defaultContent"><code class="option" title=
"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/api/row%28%29.child"><code class="api"
title="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
<p>The event handler makes use of the <a href="//datatables.net/reference/api/row().child"><code class=
"api" title="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>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. Note that the format details function has access to the full data source object
@ -130,9 +130,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
function format ( d ) {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">function format ( d ) {
return 'Full name: '+d.first_name+' '+d.last_name+'&lt;br&gt;'+
'Salary: '+d.salary+'&lt;br&gt;'+
'The child row can contain any data you wish, including links, images, inner tables etc.';
@ -171,8 +170,7 @@ $(document).ready(function() {
row.child( format( row.data() ) ).show();
}
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -194,16 +192,13 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
td.details-control {
below:</p><code class="multiline brush: js;">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;
}
</pre>
}</code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

13
examples/server_side/select_rows.html
View File

@ -100,9 +100,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
var selected = [];
$(&quot;#example&quot;).dataTable({
@ -128,8 +127,7 @@ $(document).ready(function() {
$(this).toggleClass('selected');
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -151,10 +149,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

17
examples/server_side/simple.html
View File

@ -42,9 +42,9 @@ $(document).ready(function() {
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/init/serverSide"><code class="option" title=
"//datatables.net/reference/option/serverSide"><code class="option" title=
"Initialisation option">serverSide</code></a> option to <code>true</code> and providing an Ajax data
source through the <a href="//datatables.net/init/ajax"><code class="option" title=
source through the <a href="//datatables.net/reference/option/ajax"><code class="option" title=
"Initialisation option">ajax</code></a> option.</p>
<p>This example shows a very simple table, matching the other client-side processing examples, but in
@ -84,16 +84,14 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;processing&quot;: true,
&quot;serverSide&quot;: true,
&quot;ajax&quot;: &quot;scripts/server_processing.php&quot;
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -115,10 +113,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

13
examples/styling/bootstrap.html
View File

@ -539,12 +539,10 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable();
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -568,10 +566,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
body { font-size: 140%; }
</pre>
below:</p><code class="multiline brush: js;">body { font-size: 140%; }</code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

13
examples/styling/cell-border.html
View File

@ -526,12 +526,10 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable();
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -553,10 +551,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

13
examples/styling/display.html
View File

@ -542,12 +542,10 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable();
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -569,10 +567,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

13
examples/styling/foundation.html
View File

@ -538,12 +538,10 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable();
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -567,10 +565,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

13
examples/styling/hover.html
View File

@ -526,12 +526,10 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable();
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -553,10 +551,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

26
examples/styling/jqueryUI.html
View File

@ -36,13 +36,14 @@ $(document).ready(function() {
<p>DataTables has built in support for (jQuery UI ThemeRoller)[http://jqueryui.com/themeroller/] which
makes it very easy to style your tables to match other jQuery UI components. To enable the jQuery UI
styling of DataTables, simply include the jQuery stylesheet, DataTables' additions for the jQuery
stylesheet (to add row styling etc) and set the <a href="//datatables.net/init/jQueryUI"><code class=
"option" title="Initialisation option">jQueryUI</code></a> initialisation for your table.</p>
stylesheet (to add row styling etc) and set the <a href=
"//datatables.net/reference/option/jQueryUI"><code class="option" title=
"Initialisation option">jQueryUI</code></a> initialisation for your table.</p>
<p>Please note that the <a href="//datatables.net/init/jQueryUI"><code class="option" title=
"Initialisation option">jQueryUI</code></a> option is deprecated in DataTables 1.10. In DataTables 1.11
it will be replaced with a styling plug-in, matching how Bootstrap and Foundation styles are integrated
into DataTables.</p>
<p>Please note that the <a href="//datatables.net/reference/option/jQueryUI"><code class="option"
title="Initialisation option">jQueryUI</code></a> option is deprecated in DataTables 1.10. In
DataTables 1.11 it will be replaced with a styling plug-in, matching how Bootstrap and Foundation
styles are integrated into DataTables.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@ -537,14 +538,12 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
jQueryUI: true
} );
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -566,10 +565,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

13
examples/styling/no-classes.html
View File

@ -526,12 +526,10 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable();
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -553,10 +551,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

13
examples/styling/order-column.html
View File

@ -527,12 +527,10 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable();
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -554,10 +552,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

13
examples/styling/row-border.html
View File

@ -526,12 +526,10 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable();
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -553,10 +551,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the

13
examples/styling/stripe.html
View File

@ -525,12 +525,10 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable();
} );
</pre>
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
@ -552,10 +550,7 @@ $(document).ready(function() {
<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>
<pre class="brush: js;">
</pre>
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the