mirror of
https://github.com/DataTables/DataTables.git
synced 2025-01-18 11:52:11 +01:00
Dev: Updates for Editor development
Update: Show software tag in the markdown links for the documentation
This commit is contained in:
parent
e948a3682a
commit
c1841e6eff
@ -1 +1 @@
|
||||
c3899371c805bd9eb4736ef080554facc6604083
|
||||
986ac570ba5ebda7a8dc7ee983ef927a4fccbd5d
|
||||
|
@ -48,11 +48,12 @@ $(document).ready(function() {
|
||||
<div class="info">
|
||||
<p>Each column has an optional rendering control called <a href=
|
||||
"//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/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>
|
||||
"DataTables initialisation option">columns.render<span>DT</span></code></a> which can be used to
|
||||
process the content of each cell before the data is used. <a href=
|
||||
"//datatables.net/reference/option/columns.render"><code class="option" title=
|
||||
"DataTables initialisation option">columns.render<span>DT</span></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
|
||||
|
@ -45,10 +45,10 @@ $(document).ready(function() {
|
||||
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/reference/option/columns.visible"><code class="option" title=
|
||||
"Initialisation option">columns.visible</code></a> option and <a href=
|
||||
"DataTables initialisation option">columns.visible<span>DT</span></code></a> option and <a href=
|
||||
"//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>
|
||||
"DataTables API method">column().visible()<span>DT</span></code></a> method to take into account
|
||||
rowspan / colspan cells, drawing the header correctly.</p>
|
||||
|
||||
<p>Note that each column must have at least one unique cell (i.e. a cell without colspan) so DataTables
|
||||
can use that cell to detect the column and use it to apply ordering.</p>
|
||||
|
@ -42,10 +42,10 @@ $(document).ready(function() {
|
||||
<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/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>
|
||||
"DataTables initialisation option">dom<span>DT</span></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>
|
||||
|
@ -45,12 +45,13 @@ $(document).ready(function() {
|
||||
<div class="info">
|
||||
<p>As is described by the basic DOM positioning example you can use the <a href=
|
||||
"//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>
|
||||
"DataTables initialisation option">dom<span>DT</span></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=
|
||||
"DataTables initialisation option">dom<span>DT</span></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>
|
||||
|
||||
<p>This is shown in the demo below where for four key build-in features are duplicated above and below
|
||||
the table.</p>
|
||||
|
@ -44,18 +44,18 @@ $(document).ready(function() {
|
||||
|
||||
<div class="info">
|
||||
<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/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>
|
||||
use of this mechanism as well to insert your own custom elements. In this example a <code>div</code>
|
||||
with a class of 'toolbar' is created using <a href="//datatables.net/reference/option/dom"><code class=
|
||||
"option" title="DataTables initialisation option">dom<span>DT</span></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/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>
|
||||
"DataTables initialisation option">dom<span>DT</span></code></a> option (like the built in option of
|
||||
<code>f</code> refers to 'filtering input', you could have an <code>F</code> option which creates your
|
||||
own filtering input control, custom to your app).</p>
|
||||
|
||||
<p><a href="https://datatables.net/extras/tabletools">TableTools</a> is a feature plug-in for
|
||||
DataTables which adds buttons into a toolbar for a table, which controls such as copy to clipboard,
|
||||
|
@ -49,16 +49,17 @@ $(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/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>
|
||||
"//datatables.net/reference/api/on()"><code class="api" title=
|
||||
"DataTables API method">on()<span>DT</span></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/reference/event/order"><code class=
|
||||
"event" title="Event">order</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>
|
||||
"event" title="DataTables event">order<span>DT</span></code></a>, <a href=
|
||||
"//datatables.net/reference/event/search"><code class="event" title=
|
||||
"DataTables event">search<span>DT</span></code></a> and <a href=
|
||||
"//datatables.net/reference/event/page"><code class="event" title=
|
||||
"DataTables event">page<span>DT</span></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>
|
||||
|
@ -69,17 +69,18 @@ $(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/reference/option/headerCallback"><code class="option" title=
|
||||
"Initialisation option">headerCallback</code></a> and <a href=
|
||||
"DataTables initialisation option">headerCallback<span>DT</span></code></a> and <a href=
|
||||
"//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>
|
||||
"DataTables initialisation option">footerCallback<span>DT</span></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/reference/api/column().data()"><code class="api" title=
|
||||
"API method">column().data()</code></a> API method and <a href=
|
||||
"DataTables API method">column().data()<span>DT</span></code></a> API method and <a href=
|
||||
"//datatables.net/reference/api/column().footer()"><code class="api" title=
|
||||
"API method">column().footer()</code></a> for writing the value into the footer.</p>
|
||||
"DataTables API method">column().footer()<span>DT</span></code></a> for writing the value into the
|
||||
footer.</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
|
@ -39,10 +39,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/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 initialisation option">language<span>DT</span></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>
|
||||
"DataTables initialisation option">language.url<span>DT</span></code></a> option.</p>
|
||||
|
||||
<p>The following example shows DataTables reading a German language file.</p>
|
||||
</div>
|
||||
|
@ -37,7 +37,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/reference/option/lengthMenu"><code class="option"
|
||||
title="Initialisation option">lengthMenu</code></a> initialisation option.</p>
|
||||
title="DataTables initialisation option">lengthMenu<span>DT</span></code></a> initialisation
|
||||
option.</p>
|
||||
|
||||
<p>This parameter can take one of two forms:</p>
|
||||
|
||||
|
@ -47,14 +47,14 @@ $(document).ready(function() {
|
||||
<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/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>
|
||||
"DataTables initialisation option">createdRow<span>DT</span></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/reference/option/columns.createdCell"><code class="option" title=
|
||||
"Initialisation option">columns.createdCell</code></a> could also be used to create exactly the same
|
||||
effect.</p>
|
||||
"DataTables initialisation option">columns.createdCell<span>DT</span></code></a> could also be used to
|
||||
create exactly the same effect.</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
|
@ -77,10 +77,10 @@ $(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/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
|
||||
by any other column.</p>
|
||||
"DataTables initialisation option">drawCallback<span>DT</span></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 by any other column.</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
|
@ -45,9 +45,9 @@ $(document).ready(function() {
|
||||
<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/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>
|
||||
"DataTables initialisation option">columns.orderSequence<span>DT</span></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>
|
||||
|
||||
<p>The example below shows:</p>
|
||||
|
||||
|
@ -48,10 +48,11 @@ $(document).ready(function() {
|
||||
<code>data</code> parameter of a returned object (e.g. <code>{ "data": [...] }</code>). This can easily
|
||||
be change by using the <code>dataSrc</code> option of the <a href=
|
||||
"//datatables.net/reference/option/ajax"><code class="option" title=
|
||||
"Initialisation option">ajax</code></a> initiation option.</p>
|
||||
"DataTables initialisation option">ajax<span>DT</span></code></a> initiation option.</p>
|
||||
|
||||
<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>
|
||||
"DataTables initialisation option">ajax.dataSrc<span>DT</span></code></a> has a number of ways in which
|
||||
it can be used:</p>
|
||||
|
||||
<ul>
|
||||
<li>As a string (e.g. <code>dataSrc: 'myData'</code>) - obtain data from a different property in
|
||||
@ -64,9 +65,9 @@ $(document).ready(function() {
|
||||
</ul>
|
||||
|
||||
<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>
|
||||
"option" title="DataTables initialisation option">ajax.dataSrc<span>DT</span></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%">
|
||||
|
@ -40,10 +40,11 @@ $(document).ready(function() {
|
||||
<code>data</code> parameter of a returned object (e.g. <code>{ "data": [...] }</code>). This can easily
|
||||
be change by using the <code>dataSrc</code> option of the <a href=
|
||||
"//datatables.net/reference/option/ajax"><code class="option" title=
|
||||
"Initialisation option">ajax</code></a> initiation option.</p>
|
||||
"DataTables initialisation option">ajax<span>DT</span></code></a> initiation option.</p>
|
||||
|
||||
<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>
|
||||
"DataTables initialisation option">ajax.dataSrc<span>DT</span></code></a> has a number of ways in which
|
||||
it can be used:</p>
|
||||
|
||||
<ul>
|
||||
<li>As a string (e.g. <code>dataSrc: 'myData'</code>) - obtain data from a different property in
|
||||
@ -56,9 +57,9 @@ $(document).ready(function() {
|
||||
</ul>
|
||||
|
||||
<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>
|
||||
"option" title="DataTables initialisation option">ajax.dataSrc<span>DT</span></code></a> being used as
|
||||
a string to get the data from a different source property, in this case <code>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%">
|
||||
|
@ -44,11 +44,12 @@ $(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/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/reference/option/columns.data"><code class="option" title=
|
||||
"Initialisation option">columns.data</code></a> option represents another object level.</p>
|
||||
"DataTables initialisation option">columns.data<span>DT</span></code></a> option. In its simplest case,
|
||||
it can be used to read arbitrary object properties, but can also be extended to <em>n</em> levels of
|
||||
nested objects / arrays through the use of standard Javascript dotted object notation. Each dot
|
||||
(<code>.</code>) in the <a href="//datatables.net/reference/option/columns.data"><code class="option"
|
||||
title="DataTables initialisation option">columns.data<span>DT</span></code></a> option represents
|
||||
another object level.</p>
|
||||
|
||||
<p>In this example <code>hr.position</code> refers to the <code>position</code> property of the
|
||||
<code>hr</code> object in the row's data source object, while <code>contact.0</code> refers to the
|
||||
|
@ -37,14 +37,13 @@ $(document).ready(function() {
|
||||
<p>When working with large data sources, you might seek to improve the speed at which DataTables runs.
|
||||
One method to do this is to make use of the built-in deferred rendering option in DataTables with the
|
||||
<a href="//datatables.net/reference/option/deferRender"><code class="option" title=
|
||||
"Initialisation option">deferRender</code></a> option.</p>
|
||||
"DataTables initialisation option">deferRender<span>DT</span></code></a> option.</p>
|
||||
|
||||
<p>When deferred rendering is enabled, rather than having DataTables create all <code class="tag"
|
||||
title="HTML tag">TR</code> and <code class="tag" title="HTML tag">TD</code> nodes required for the
|
||||
table when the data is loaded, DataTables will only create the nodes required for each individual row
|
||||
at the time of that row being drawn on the page (these nodes are then retained in case they are needed
|
||||
again so they aren't created multiple times). This can give a significant performance increase, since a
|
||||
lot less work is done at initialisation time.</p>
|
||||
<p>When deferred rendering is enabled, rather than having DataTables create all <code>TR</code> and
|
||||
<code>TD</code> nodes required for the table when the data is loaded, DataTables will only create the
|
||||
nodes required for each individual row at the time of that row being drawn on the page (these nodes are
|
||||
then retained in case they are needed again so they aren't created multiple times). This can give a
|
||||
significant performance increase, since a lot less work is done at initialisation time.</p>
|
||||
|
||||
<p>The example below shows DataTables with deferred rendering enabled. For this small example you'll
|
||||
likely notice no difference, but larger tables can benefit significantly from simply enabling this
|
||||
|
@ -22,8 +22,8 @@
|
||||
<p>DataTables can read data from a server via Ajax, while still performing searching, ordering, paging
|
||||
etc on the client-side. This is done through use of the <a href=
|
||||
"//datatables.net/reference/option/ajax"><code class="option" title=
|
||||
"Initialisation option">ajax</code></a> option, which has a number of options to customise how the data
|
||||
is retrieved from the server.</p>
|
||||
"DataTables initialisation option">ajax<span>DT</span></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>
|
||||
|
@ -48,27 +48,27 @@ $(document).ready(function() {
|
||||
|
||||
<ul>
|
||||
<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>
|
||||
"DataTables initialisation option">columns.render<span>DT</span></code></a> for content that is
|
||||
dynamic (i.e. based upon the row's data)</li>
|
||||
<li><a href="//datatables.net/reference/option/columns.defaultContent"><code class="option" title=
|
||||
"Initialisation option">columns.defaultContent</code></a> for static content (i.e. simple
|
||||
strings)</li>
|
||||
"DataTables initialisation option">columns.defaultContent<span>DT</span></code></a> for static
|
||||
content (i.e. simple strings)</li>
|
||||
</ul>
|
||||
|
||||
<p>This examples shows the use of <a href=
|
||||
"//datatables.net/reference/option/columns.defaultContent"><code class="option" title=
|
||||
"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 initialisation option">columns.defaultContent<span>DT</span></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>
|
||||
"DataTables API method">row().data()<span>DT</span></code></a> method to get the data for the row and
|
||||
show a bit of information about it in an <code>alert</code> box. This is a simple use case, but it can
|
||||
be built up to be arbitrarily complex.</p>
|
||||
|
||||
<p>Note also that the <a href="//datatables.net/reference/option/columns.data"><code class="option"
|
||||
title="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>
|
||||
title="DataTables initialisation option">columns.data<span>DT</span></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%">
|
||||
|
@ -49,8 +49,8 @@ $(document).ready(function() {
|
||||
|
||||
<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>
|
||||
"DataTables initialisation option">columns.data<span>DT</span></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>
|
||||
|
@ -43,22 +43,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/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>
|
||||
title="DataTables initialisation option">columns.data<span>DT</span></code></a> option, which is
|
||||
particularly useful for working with JSON feeds in an already defined format.</p>
|
||||
|
||||
<p>The <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
|
||||
"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 initialisation option">columns.data<span>DT</span></code></a> option has the ability to
|
||||
read information not only from objects, but also from arrays using the same dotted object syntax as for
|
||||
objects. In addition to this, when working with an array data source <a href=
|
||||
"//datatables.net/reference/option/columns.data"><code class="option" title=
|
||||
"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 initialisation option">columns.data<span>DT</span></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>
|
||||
"DataTables initialisation option">columns.data<span>DT</span></code></a> as a function).</p>
|
||||
|
||||
<p>This example shows two different aspects of using <a href=
|
||||
"//datatables.net/reference/option/columns.data"><code class="option" title=
|
||||
"Initialisation option">columns.data</code></a> to read arrays:</p>
|
||||
"DataTables initialisation option">columns.data<span>DT</span></code></a> to read arrays:</p>
|
||||
|
||||
<ul>
|
||||
<li>The <em>Name</em> column is sourced from an array of two elements (first and last name), which
|
||||
|
@ -52,8 +52,8 @@ $(document).ready(function() {
|
||||
|
||||
<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>
|
||||
"DataTables initialisation option">columns.data<span>DT</span></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>
|
||||
|
@ -36,20 +36,22 @@ $(document).ready(function() {
|
||||
<p>DataTables has the ability to read data from virtually any JSON data source that can be obtained by
|
||||
Ajax. This can be done, in its most simple form, by setting the <a href=
|
||||
"//datatables.net/reference/option/ajax"><code class="option" title=
|
||||
"Initialisation option">ajax</code></a> option to the address of the JSON data source.</p>
|
||||
"DataTables initialisation option">ajax<span>DT</span></code></a> option to the address of the JSON
|
||||
data source.</p>
|
||||
|
||||
<p>The <a href="//datatables.net/reference/option/ajax"><code class="option" title=
|
||||
"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 initialisation option">ajax<span>DT</span></code></a> option also allows for more advanced
|
||||
configuration such as altering how the Ajax request is made. See the <a href=
|
||||
"//datatables.net/reference/option/ajax"><code class="option" title=
|
||||
"Initialisation option">ajax</code></a> documentation or the other Ajax examples for DataTables for
|
||||
further information.</p>
|
||||
"DataTables initialisation option">ajax<span>DT</span></code></a> documentation or the other Ajax
|
||||
examples for DataTables for further information.</p>
|
||||
|
||||
<p>By default DataTables will assume that an array data source is to be used and will read the
|
||||
information to be displayed in each column from the row's array using the column index, making working
|
||||
with arrays very simple (note that this can be changed, or objects used may using the <a href=
|
||||
"//datatables.net/reference/option/columns.data"><code class="option" title=
|
||||
"Initialisation option">columns.data</code></a> option, shown in other examples).</p>
|
||||
"DataTables initialisation option">columns.data<span>DT</span></code></a> option, shown in other
|
||||
examples).</p>
|
||||
|
||||
<p>The example below shows DataTables loading data for a table from arrays as the data source, where
|
||||
the structure of the row's data source in this example is:</p>
|
||||
|
@ -50,15 +50,16 @@ $(document).ready(function() {
|
||||
|
||||
<div class="info">
|
||||
<p>New rows can be added to a DataTable very easily using the <a href=
|
||||
"//datatables.net/reference/api/row.add()"><code class="api" title="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>
|
||||
"//datatables.net/reference/api/row.add()"><code class="api" title=
|
||||
"DataTables API method">row.add()<span>DT</span></code></a> API method. Simply call the API function
|
||||
with the data that is to be used for the new row (be it an array or object). Multiple rows can be added
|
||||
using the <a href="//datatables.net/reference/api/rows.add()"><code class="api" title=
|
||||
"DataTables API method">rows.add()<span>DT</span></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/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>
|
||||
"//datatables.net/reference/api/draw()"><code class="api" title=
|
||||
"DataTables API method">draw()<span>DT</span></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>
|
||||
|
@ -42,19 +42,20 @@ $(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/reference/option/initComplete"><code class="option" title=
|
||||
"Initialisation option">initComplete</code></a>, <a href=
|
||||
"DataTables initialisation option">initComplete<span>DT</span></code></a>, <a href=
|
||||
"//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
|
||||
the DataTable instance, so you can use the Javascript special variable <code>this</code> to access the
|
||||
API (<code>this.api()</code> will give an API instance) as <code>this</code> is the <code class="tag"
|
||||
title="HTML tag">table</code> node.</p>
|
||||
"DataTables initialisation option">rowCallback<span>DT</span></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 the DataTable instance, so you can use the Javascript special variable <code>this</code>
|
||||
to access the API (<code>this.api()</code> will give an API instance) as <code>this</code> is the
|
||||
<code>table</code> node.</p>
|
||||
|
||||
<p>In this example you will be able to see that the <a href=
|
||||
"//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>
|
||||
"//datatables.net/reference/api/%24()"><code class="api" title=
|
||||
"DataTables API method">$()<span>DT</span></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
|
||||
|
@ -52,16 +52,17 @@ $(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/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/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>
|
||||
"//datatables.net/reference/event/order"><code class="event" title=
|
||||
"DataTables event">order<span>DT</span></code></a> and <a href=
|
||||
"//datatables.net/reference/event/search"><code class="event" title=
|
||||
"DataTables event">search<span>DT</span></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=
|
||||
"DataTables API method">column().nodes()<span>DT</span></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/reference/api/column()"><code class="api" title=
|
||||
"DataTables API method">column()<span>DT</span></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%">
|
||||
|
@ -49,10 +49,11 @@ $(document).ready(function() {
|
||||
longer.</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>
|
||||
"DataTables API method">$()<span>DT</span></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=
|
||||
"DataTables API method">$()<span>DT</span></code></a> being used to get all <code>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>
|
||||
|
@ -59,12 +59,13 @@ $(document).ready(function() {
|
||||
|
||||
<p>This example shows that in action on DataTable by making use of the <a href=
|
||||
"//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/reference/api/cells().nodes()"><code class="api" title=
|
||||
"API method">cells().nodes()</code></a> and <a href=
|
||||
"DataTables API method">cell().index()<span>DT</span></code></a> method to get the index of the column
|
||||
that is to be operated on, and then the <a href=
|
||||
"//datatables.net/reference/api/cells().nodes()"><code class="api" title=
|
||||
"DataTables API method">cells().nodes()<span>DT</span></code></a> and <a href=
|
||||
"//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>
|
||||
"DataTables API method">column().nodes()<span>DT</span></code></a> methods to remove old classes and
|
||||
apply the new highlighted class, respectively.</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="row-border hover order-column" cellspacing="0" width="100%">
|
||||
|
@ -54,21 +54,22 @@ $(document).ready(function() {
|
||||
|
||||
<p>DataTables has the ability to apply filtering to a specific column through the <a href=
|
||||
"//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/reference/api/filter()"><code class="api" title="API method">filter()</code></a> is
|
||||
used to apply a filter to a data set).</p>
|
||||
"DataTables API method">column().search()<span>DT</span></code></a> method (note that the name of the
|
||||
method is <code>search</code> not <code>filter</code> since <a href=
|
||||
"//datatables.net/reference/api/filter()"><code class="api" title=
|
||||
"DataTables API method">filter()<span>DT</span></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/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/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>
|
||||
"DataTables API method">column().search()<span>DT</span></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/reference/api/column()"><code class="api"
|
||||
title="DataTables API method">column()<span>DT</span></code></a> method takes into account any hidden
|
||||
columns when selecting the column to act upon.</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
|
@ -48,20 +48,19 @@ $(document).ready(function() {
|
||||
|
||||
<div class="info">
|
||||
<p>This example is almost identical to text based individual column example and provides the same
|
||||
functionality, but in this case using <code class="tag" title="HTML tag">select</code> input
|
||||
controls.</p>
|
||||
functionality, but in this case using <code>select</code> input controls.</p>
|
||||
|
||||
<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/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/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=
|
||||
<p>After the table is initialised, the API is used to build the <code>select</code> inputs through the
|
||||
use of the <a href="//datatables.net/reference/api/column().data()"><code class="api" title=
|
||||
"DataTables API method">column().data()<span>DT</span></code></a> method to get the data for each
|
||||
column in turn. The helper methods <a href="//datatables.net/reference/api/unique()"><code class="api"
|
||||
title="DataTables API method">unique()<span>DT</span></code></a> and <a href=
|
||||
"//datatables.net/reference/api/sort()"><code class="api" title=
|
||||
"DataTables API method">sort()<span>DT</span></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>select</code>
|
||||
input is used to trigger a column search using the <a href=
|
||||
"//datatables.net/reference/api/column().search()"><code class="api" title=
|
||||
"API method">column().search()</code></a> method.</p>
|
||||
"DataTables API method">column().search()<span>DT</span></code></a> method.</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
|
@ -60,13 +60,13 @@ $(document).ready(function() {
|
||||
<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/reference/api/search()"><code class="api" title=
|
||||
"API method">search()</code></a>) and for each individual column (<a href=
|
||||
"DataTables API method">search()<span>DT</span></code></a>) and for each individual column (<a href=
|
||||
"//datatables.net/reference/api/column().search()"><code class="api" title=
|
||||
"API method">column().search()</code></a>).</p>
|
||||
"DataTables API method">column().search()<span>DT</span></code></a>).</p>
|
||||
|
||||
<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>
|
||||
title="DataTables API method">draw()<span>DT</span></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
|
||||
complex interactions) and as a smart filter or not. When smart filtering is enabled on a particular
|
||||
|
@ -97,14 +97,15 @@ $(document).ready(function() {
|
||||
where you wish to convey more information about a row than there is space for in the host table.</p>
|
||||
|
||||
<p>The example below makes use of the <a href="//datatables.net/reference/api/row().child"><code class=
|
||||
"api" title="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=
|
||||
"api" title="DataTables API method">row().child<span>DT</span></code></a> methods to firstly check if a
|
||||
row is already displayed, and if so hide it (<a href=
|
||||
"//datatables.net/reference/api/row().child.hide()"><code class="api" title=
|
||||
"DataTables API method">row().child.hide()<span>DT</span></code></a>), otherwise show it (<a href=
|
||||
"//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
|
||||
extra information to show.</p>
|
||||
"DataTables API method">row().child.show()<span>DT</span></code></a>). The content of the child row is,
|
||||
in this example, defined by the <code>formatDetails()</code> function, but you would replace that with
|
||||
whatever you wanted to show the content required, possibly including, for example, an Ajax call to the
|
||||
server to obtain the extra information to show.</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
|
@ -44,9 +44,9 @@ $(document).ready(function() {
|
||||
<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/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>
|
||||
"DataTables API method">rows().data()<span>DT</span></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>
|
||||
|
||||
<p>If you are looking for a more complete row selection option <a href=
|
||||
"http://datatables.net/extras/tabletools">TableTools for DataTables</a> provides a complete API for
|
||||
|
@ -53,10 +53,11 @@ $(document).ready(function() {
|
||||
and applied to the row to be selected.</p>
|
||||
|
||||
<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/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>
|
||||
"DataTables API method">row().remove()<span>DT</span></code></a> method which will delete a row from a
|
||||
table, and the <a href="//datatables.net/reference/api/draw()"><code class="api" title=
|
||||
"DataTables API method">draw()<span>DT</span></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=
|
||||
"http://datatables.net/extras/tabletools">TableTools for DataTables</a> provides a complete API for
|
||||
|
@ -48,15 +48,15 @@ $(document).ready(function() {
|
||||
<div class="info">
|
||||
<p>This example shows how you can make use of the <a href=
|
||||
"//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>
|
||||
"DataTables API method">column().visible()<span>DT</span></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/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>
|
||||
"//datatables.net/reference/api/columns()"><code class="api" title=
|
||||
"DataTables API method">columns()<span>DT</span></code></a> method to select multiple columns and then
|
||||
using the <a href="//datatables.net/reference/api/columns().visible()"><code class="api" title=
|
||||
"DataTables API method">columns().visible()<span>DT</span></code></a> method to set their state.</p>
|
||||
|
||||
<p>If you are looking for a more complete column visibility interaction controls <a href=
|
||||
"http://datatables.net/extras/colvis">ColVis for DataTables</a> provides a complete interface for
|
||||
|
@ -55,13 +55,13 @@ $(document).ready(function() {
|
||||
|
||||
<p>This misalignment can be corrected by the <a href=
|
||||
"//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>
|
||||
"DataTables API method">columns.adjust()<span>DT</span></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/reference/api/columns.adjust()"><code class=
|
||||
"api" title="API method">columns.adjust()</code></a>.</p>
|
||||
"api" title="DataTables API method">columns.adjust()<span>DT</span></code></a>.</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
|
@ -37,32 +37,29 @@ $(document).ready(function() {
|
||||
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/reference/option/pagingType"><code class="option" title=
|
||||
"Initialisation option">pagingType</code></a> option.</p>
|
||||
"DataTables initialisation option">pagingType<span>DT</span></code></a> option.</p>
|
||||
|
||||
<p>There are four built-in options for which pagination controls DataTables should show:</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="string" title="String">simple</code> - 'Previous' and 'Next' buttons only</li>
|
||||
<li><code class="string" title="String">simple_numbers</code> - 'Previous' and 'Next' buttons, plus
|
||||
page numbers</li>
|
||||
<li><code class="string" title="String">full</code> - 'First', 'Previous', 'Next' and 'Last'
|
||||
buttons</li>
|
||||
<li><code class="string" title="String">full_numbers</code> - 'First', 'Previous', 'Next' and
|
||||
'Last' buttons, plus page numbers</li>
|
||||
<li><code>simple</code> - 'Previous' and 'Next' buttons only</li>
|
||||
<li><code>simple_numbers</code> - 'Previous' and 'Next' buttons, plus page numbers</li>
|
||||
<li><code>full</code> - 'First', 'Previous', 'Next' and 'Last' buttons</li>
|
||||
<li><code>full_numbers</code> - 'First', 'Previous', 'Next' and 'Last' buttons, plus page
|
||||
numbers</li>
|
||||
</ul>
|
||||
|
||||
<p>The language strings of 'First', 'Previous' etc can be optionally through the internationalisation
|
||||
options of DataTables; <a href="//datatables.net/reference/option/language.paginate.first"><code class=
|
||||
"option" title="Initialisation option">language.paginate.first</code></a>, <a href=
|
||||
"//datatables.net/reference/option/language.paginate.previous"><code class="option" title=
|
||||
"Initialisation option">language.paginate.previous</code></a> etc.</p>
|
||||
"option" title="DataTables initialisation option">language.paginate.first<span>DT</span></code></a>,
|
||||
<a href="//datatables.net/reference/option/language.paginate.previous"><code class="option" title=
|
||||
"DataTables initialisation option">language.paginate.previous<span>DT</span></code></a> etc.</p>
|
||||
|
||||
<p>Additional options for the buttons that are shown can be added through the use of pagination type
|
||||
plug-ins. Furthermore, how the buttons are actually shown can be altered through the use of plug-in
|
||||
pagination renderers.</p>
|
||||
|
||||
<p>The example below shows the <code class="string" title="String">full_numbers</code> type of
|
||||
pagination.</p>
|
||||
<p>The example below shows the <code>full_numbers</code> type of pagination.</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
|
@ -44,16 +44,16 @@ $(document).ready(function() {
|
||||
<p>When reading such numbers, Javascript won't automatically recognise them as numbers, however,
|
||||
DataTables' type detection and sorting methods can be instructed through the <a href=
|
||||
"//datatables.net/reference/option/language.decimal"><code class="option" title=
|
||||
"Initialisation option">language.decimal</code></a> option which character is used as the decimal place
|
||||
in your numbers. This will be used to correctly adjust DataTables' type detection and sorting
|
||||
algorithms to sort numbers in your table.</p>
|
||||
"DataTables initialisation option">language.decimal<span>DT</span></code></a> option which character is
|
||||
used as the decimal place in your numbers. This will be used to correctly adjust DataTables' type
|
||||
detection and sorting algorithms to sort numbers in your table.</p>
|
||||
|
||||
<p>Any character can be passed in using the <a href=
|
||||
"//datatables.net/reference/option/language.decimal"><code class="option" title=
|
||||
"Initialisation option">language.decimal</code></a> option, although the decimal place character used
|
||||
in a single table must be consistent (i.e. numbers with a dot decimal place and comma decimal place
|
||||
cannot both appear in the same table). Different tables on the same page can use different decimal
|
||||
characters if required.</p>
|
||||
"DataTables initialisation option">language.decimal<span>DT</span></code></a> option, although the
|
||||
decimal place character used in a single table must be consistent (i.e. numbers with a dot decimal
|
||||
place and comma decimal place cannot both appear in the same table). Different tables on the same page
|
||||
can use different decimal characters if required.</p>
|
||||
|
||||
<p>The example below shows a comma being used as the decimal place in the currency numbers shown in the
|
||||
final column.</p>
|
||||
|
@ -39,8 +39,8 @@ $(document).ready(function() {
|
||||
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/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>
|
||||
"DataTables initialisation option">orderCellsTop<span>DT</span></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>
|
||||
|
@ -37,14 +37,15 @@ $(document).ready(function() {
|
||||
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/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>
|
||||
"DataTables initialisation option">dom<span>DT</span></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/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>
|
||||
"DataTables initialisation option">dom<span>DT</span></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>
|
||||
|
||||
@ -104,8 +105,8 @@ $(document).ready(function() {
|
||||
table for example).</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>
|
||||
"option" title="DataTables initialisation option">dom<span>DT</span></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>
|
||||
|
@ -47,7 +47,7 @@ $(document).ready(function() {
|
||||
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/reference/option/columns.visible"><code class="option" title=
|
||||
"Initialisation option">columns.visible</code></a> column option.</p>
|
||||
"DataTables initialisation option">columns.visible<span>DT</span></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
|
||||
|
@ -41,7 +41,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/reference/option/language"><code class="option" title=
|
||||
"Initialisation option">language</code></a> object to the DataTable constructor.</p>
|
||||
"DataTables initialisation option">language<span>DT</span></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>
|
||||
|
@ -52,17 +52,18 @@ $(document).ready(function() {
|
||||
<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/reference/option/columns.orderData"><code class="option" title=
|
||||
"Initialisation option">columns.orderData</code></a> option.</li>
|
||||
"DataTables initialisation option">columns.orderData<span>DT</span></code></a> option.</li>
|
||||
<li>Using the <a href="//datatables.net/reference/option/columns.orderData"><code class="option"
|
||||
title="Initialisation option">columns.orderData</code></a> option to specify a multiple column
|
||||
order by default (for example <code>[ [0,'asc'], [1,'asc'] ]</code>).</li>
|
||||
title="DataTables initialisation option">columns.orderData<span>DT</span></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/reference/api/order()"><code class="api" title=
|
||||
"API method">order()</code></a> API method.</li>
|
||||
"DataTables API method">order()<span>DT</span></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/reference/option/orderMulti"><code class="option" title=
|
||||
"Initialisation option">orderMulti</code></a> option.</p>
|
||||
"DataTables initialisation option">orderMulti<span>DT</span></code></a> option.</p>
|
||||
|
||||
<p>The example below shows the first column having a secondary order applied to the second column in
|
||||
the table, vice-versa for the second column being tied directly to the first and the salary column to
|
||||
|
@ -42,9 +42,9 @@ $(document).ready(function() {
|
||||
<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/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>
|
||||
title="DataTables initialisation option">scrollX<span>DT</span></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
|
||||
|
@ -42,14 +42,16 @@ $(document).ready(function() {
|
||||
|
||||
<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>
|
||||
"DataTables initialisation option">scrollY<span>DT</span></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/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>
|
||||
title="DataTables initialisation option">scrollCollapse<span>DT</span></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=
|
||||
"DataTables initialisation option">scrollY<span>DT</span></code></a>.</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
|
@ -35,25 +35,26 @@ $('#example').dataTable( {
|
||||
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/reference/option/stateSave"><code class="option" title=
|
||||
"Initialisation option">stateSave</code></a> option.</p>
|
||||
"DataTables initialisation option">stateSave<span>DT</span></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/reference/option/stateSaveCallback"><code class="option" title=
|
||||
"Initialisation option">stateSaveCallback</code></a> and <a href=
|
||||
"DataTables initialisation option">stateSaveCallback<span>DT</span></code></a> and <a href=
|
||||
"//datatables.net/reference/option/stateLoadCallback"><code class="option" title=
|
||||
"Initialisation option">stateLoadCallback</code></a> options.</p>
|
||||
"DataTables initialisation option">stateLoadCallback<span>DT</span></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/reference/option/stateDuration"><code class="option" title=
|
||||
"Initialisation option">stateDuration</code></a> initialisation parameter (2 hours by default).</p>
|
||||
"DataTables initialisation option">stateDuration<span>DT</span></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/reference/option/stateSave"><code class="option" title=
|
||||
"Initialisation option">stateSave</code></a> option.</p>
|
||||
"DataTables initialisation option">stateSave<span>DT</span></code></a> option.</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
|
@ -35,16 +35,16 @@ $(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/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>
|
||||
"DataTables initialisation option">order<span>DT</span></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/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/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>
|
||||
"DataTables initialisation option">order<span>DT</span></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>'asc'</code> (ascending ordering) or <code>'desc'</code> (descending ordering) as required.
|
||||
<a href="//datatables.net/reference/option/order"><code class="option" title=
|
||||
"DataTables initialisation option">order<span>DT</span></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>
|
||||
|
@ -38,19 +38,20 @@ $(document).ready(function() {
|
||||
<p>DataTables has the ability to read data from virtually any JSON data source that can be obtained by
|
||||
Ajax. This can be done, in its most simple form, by setting the <a href=
|
||||
"//datatables.net/reference/option/ajax"><code class="option" title=
|
||||
"Initialisation option">ajax</code></a> option to the address of the JSON data source.</p>
|
||||
"DataTables initialisation option">ajax<span>DT</span></code></a> option to the address of the JSON
|
||||
data source.</p>
|
||||
|
||||
<p>The <a href="//datatables.net/reference/option/ajax"><code class="option" title=
|
||||
"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 initialisation option">ajax<span>DT</span></code></a> option also allows for more advanced
|
||||
configuration such as altering how the Ajax request is made. See the <a href=
|
||||
"//datatables.net/reference/option/ajax"><code class="option" title=
|
||||
"Initialisation option">ajax</code></a> documentation and the <a href="../ajax">other Ajax examples</a>
|
||||
for further information.</p>
|
||||
"DataTables initialisation option">ajax<span>DT</span></code></a> documentation and the <a href=
|
||||
"../ajax">other Ajax examples</a> for further information.</p>
|
||||
|
||||
<p>The example below shows DataTables loading data for a table from arrays as the data source (object
|
||||
parameters can also be used through the <a href=
|
||||
"//datatables.net/reference/option/columns.data"><code class="option" title=
|
||||
"Initialisation option">columns.data</code></a> option ).</p>
|
||||
"DataTables initialisation option">columns.data<span>DT</span></code></a> option ).</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
|
@ -107,10 +107,10 @@ $(document).ready(function() {
|
||||
<p>At times you will wish to be able to create a table from dynamic information passed directly to
|
||||
DataTables, rather than having it read from the document. This is achieved using the <a href=
|
||||
"//datatables.net/reference/option/data"><code class="option" title=
|
||||
"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>
|
||||
"DataTables initialisation option">data<span>DT</span></code></a> option in the initialisation object,
|
||||
passing in an array of data to be used (like all other DataTables handled data, this can be arrays or
|
||||
objects using the <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
|
||||
"DataTables initialisation option">columns.data<span>DT</span></code></a> option).</p>
|
||||
|
||||
<p>A <code><table></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
|
||||
|
@ -44,9 +44,9 @@ $(document).ready(function() {
|
||||
|
||||
<p>Server-side processing is enabled by setting the <a href=
|
||||
"//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/reference/option/ajax"><code class="option" title=
|
||||
"Initialisation option">ajax</code></a> option.</p>
|
||||
"DataTables initialisation option">serverSide<span>DT</span></code></a> option to <code>true</code> and
|
||||
providing an Ajax data source through the <a href="//datatables.net/reference/option/ajax"><code class=
|
||||
"option" title="DataTables initialisation option">ajax<span>DT</span></code></a> option.</p>
|
||||
|
||||
<p>This example shows a very simple table, matching the other examples, but in this instance using
|
||||
server-side processing. For further and more complex examples of using server-side processing, please
|
||||
|
@ -64,7 +64,8 @@ $(document).ready(function() {
|
||||
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/reference/api/column()"><code class="api" title=
|
||||
"API method">column()</code></a> method and the options for its selectors.</p>
|
||||
"DataTables API method">column()<span>DT</span></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
|
||||
plug-in development documentation.</p>
|
||||
|
@ -79,9 +79,10 @@ $(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/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>
|
||||
"//datatables.net/reference/api/order()"><code class="api" title=
|
||||
"DataTables API method">order()<span>DT</span></code></a> or <a href=
|
||||
"//datatables.net/reference/api/draw()"><code class="api" title=
|
||||
"DataTables API method">draw()<span>DT</span></code></a> methods.</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
|
@ -47,10 +47,10 @@ $(document).ready(function() {
|
||||
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/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;
|
||||
"option" title="DataTables initialisation option">columns.type<span>DT</span></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>
|
||||
|
||||
<p>This example shows ordering with a comma for a decimal place, as is often used in parts of
|
||||
|
@ -45,8 +45,8 @@ $(document).ready(function() {
|
||||
<p>It can often be useful to send extra information to the server when utilising DataTables'
|
||||
server-side processing option. This is done by using the <a href=
|
||||
"//datatables.net/reference/option/ajax"><code class="option" title=
|
||||
"Initialisation option">ajax</code></a> option's <code>data</code> parameter which can be used in one
|
||||
of two different ways:</p>
|
||||
"DataTables initialisation option">ajax<span>DT</span></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
|
||||
|
@ -44,15 +44,16 @@ $(document).ready(function() {
|
||||
|
||||
<p>This automatic Ajax call to get the first page of data can be overridden by using the <a href=
|
||||
"//datatables.net/reference/option/deferLoading"><code class="option" title=
|
||||
"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>
|
||||
"DataTables initialisation option">deferLoading<span>DT</span></code></a> initialisation property. It
|
||||
serves two purposes, firstly to indicate that deferred loading is required, but also to tell DataTables
|
||||
how many records there are in the full table, in this case 57 (this allows the information element and
|
||||
pagination to be displayed correctly).</p>
|
||||
|
||||
<p>In the example below, the HTML page already has the first 10 rows of data available it in, so we use
|
||||
<a href="//datatables.net/reference/option/deferLoading"><code class="option" title=
|
||||
"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>
|
||||
"DataTables initialisation option">deferLoading<span>DT</span></code></a> to tell DataTables that this
|
||||
data is available and that it should wait for under interaction (ordering, paging etc) before making an
|
||||
Ajax call.</p>
|
||||
</div>"
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
|
@ -28,9 +28,9 @@
|
||||
|
||||
<p>Server-side processing is enabled by setting the <a href=
|
||||
"//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/reference/option/ajax"><code class="option" title=
|
||||
"Initialisation option">ajax</code></a> option.</p>
|
||||
"DataTables initialisation option">serverSide<span>DT</span></code></a> option to <code>true</code> and
|
||||
providing an Ajax data source through the <a href="//datatables.net/reference/option/ajax"><code class=
|
||||
"option" title="DataTables initialisation option">ajax<span>DT</span></code></a> option.</p>
|
||||
|
||||
<p>The examples in this section shows server-side processing in use and how it can be customised to
|
||||
suit your needs.</p>
|
||||
|
@ -43,18 +43,19 @@ $(document).ready(function() {
|
||||
will block standard Ajax requests to remote source for security reasons). Using JSONP allows DataTables
|
||||
to load server-side sourced data from any domain and is quite simply done with the
|
||||
<code>dataType</code> option of the <a href="//datatables.net/reference/option/ajax"><code class=
|
||||
"option" title="Initialisation option">ajax</code></a> initialisation option.</p>
|
||||
"option" title="DataTables initialisation option">ajax<span>DT</span></code></a> initialisation
|
||||
option.</p>
|
||||
|
||||
<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=
|
||||
title="DataTables initialisation option">ajax<span>DT</span></code></a> option maps directly onto the
|
||||
<a href="http://api.jquery.com/jQuery.ajax/">jQuery ajax</a> options (i.e. any option that can be used
|
||||
in jQuery's Ajax function can also be used in DataTable's <a href=
|
||||
"//datatables.net/reference/option/ajax"><code class="option" title=
|
||||
"Initialisation option">ajax</code></a> option).</p>
|
||||
"DataTables initialisation option">ajax<span>DT</span></code></a> option).</p>
|
||||
|
||||
<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>
|
||||
"DataTables initialisation option">ajax<span>DT</span></code></a> being used with the
|
||||
<code>dataType</code> option set to retrieve JSONP data for server-side processing in DataTables.</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
|
@ -52,7 +52,8 @@ $(document).ready(function() {
|
||||
<p>In this example the server responds with an array of objects, where DataTables will look up and use
|
||||
each property that is specified by the <a href=
|
||||
"//datatables.net/reference/option/columns.data"><code class="option" title=
|
||||
"Initialisation option">columns.data</code></a> property given for each column.</p>
|
||||
"DataTables initialisation option">columns.data<span>DT</span></code></a> property given for each
|
||||
column.</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
|
@ -166,8 +166,9 @@ $(document).ready(function() {
|
||||
it through a data cache control; using the data from the cache if available, and making the Ajax
|
||||
request if not. This intercept of the Ajax request is performed by giving the <a href=
|
||||
"//datatables.net/reference/option/ajax"><code class="option" title=
|
||||
"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 initialisation option">ajax<span>DT</span></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,
|
||||
|
@ -50,18 +50,19 @@ $(document).ready(function() {
|
||||
<p>By default, the Ajax request that DataTables makes to obtain server-side processing data is an HTTP
|
||||
GET request. However, there are times when you might wish to use POST. This is very easily done by
|
||||
using the <code>type</code> option of the <a href="//datatables.net/reference/option/ajax"><code class=
|
||||
"option" title="Initialisation option">ajax</code></a> initialisation option.</p>
|
||||
"option" title="DataTables initialisation option">ajax<span>DT</span></code></a> initialisation
|
||||
option.</p>
|
||||
|
||||
<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=
|
||||
title="DataTables initialisation option">ajax<span>DT</span></code></a> option maps directly onto the
|
||||
<a href="http://api.jquery.com/jQuery.ajax/">jQuery ajax</a> options (i.e. any option that can be used
|
||||
in jQuery's Ajax function can also be used in DataTable's <a href=
|
||||
"//datatables.net/reference/option/ajax"><code class="option" title=
|
||||
"Initialisation option">ajax</code></a> option).</p>
|
||||
"DataTables initialisation option">ajax<span>DT</span></code></a> option).</p>
|
||||
|
||||
<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>
|
||||
"DataTables initialisation option">ajax<span>DT</span></code></a> being used with the <code>type</code>
|
||||
option set to <code>POST</code> to make a POST request.</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
|
@ -104,19 +104,19 @@ $(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/reference/option/columns.data"><code class="option" title=
|
||||
"Initialisation option">columns.data</code></a> and <a href=
|
||||
"DataTables initialisation option">columns.data<span>DT</span></code></a> and <a href=
|
||||
"//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>
|
||||
"DataTables initialisation option">columns.defaultContent<span>DT</span></code></a>, in combination
|
||||
with CSS to show an empty cell with a background image which can be clicked upon.</p>
|
||||
|
||||
<p>The event handler makes use of the <a href="//datatables.net/reference/api/row().child"><code class=
|
||||
"api" title="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
|
||||
for the row, including information that is not actually shown in the table (the salary parameter for
|
||||
example).</p>
|
||||
"api" title="DataTables API method">row().child<span>DT</span></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 for the row, including information that is not actually shown in the table (the salary
|
||||
parameter for example).</p>
|
||||
|
||||
<p>Furthermore, this example shows a small difference from the <a href=
|
||||
"../api/row_details.html">client-side row details example</a> in that to have rows automatically reopen
|
||||
|
@ -44,9 +44,9 @@ $(document).ready(function() {
|
||||
|
||||
<p>Server-side processing is enabled by setting the <a href=
|
||||
"//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/reference/option/ajax"><code class="option" title=
|
||||
"Initialisation option">ajax</code></a> option.</p>
|
||||
"DataTables initialisation option">serverSide<span>DT</span></code></a> option to <code>true</code> and
|
||||
providing an Ajax data source through the <a href="//datatables.net/reference/option/ajax"><code class=
|
||||
"option" title="DataTables initialisation option">ajax<span>DT</span></code></a> option.</p>
|
||||
|
||||
<p>This example shows a very simple table, matching the other client-side processing examples, but in
|
||||
this instance using server-side processing.</p>
|
||||
|
@ -46,10 +46,10 @@ $(document).ready(function() {
|
||||
|
||||
<p>Please note that DataTables 1.10- actually has built-in support for jQuery UI styling integration
|
||||
through the <a href="//datatables.net/reference/option/jQueryUI"><code class="option" title=
|
||||
"Initialisation option">jQueryUI</code></a> option. However, this option is deprecated in DataTables
|
||||
1.10 and will be removed DataTables 1.11, matching how styling integration is provided for other
|
||||
libraries - a more modular, maintainable and extensible method. The method presented on this page is
|
||||
the method that will be use in future.</p>
|
||||
"DataTables initialisation option">jQueryUI<span>DT</span></code></a> option. However, this option is
|
||||
deprecated in DataTables 1.10 and will be removed DataTables 1.11, matching how styling integration is
|
||||
provided for other libraries - a more modular, maintainable and extensible method. The method presented
|
||||
on this page is the method that will be use in future.</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
|
Loading…
x
Reference in New Issue
Block a user