mirror of
https://github.com/DataTables/DataTables.git
synced 2025-03-15 16:29:16 +01:00
Dev: Markdown update for Editor and typo
This commit is contained in:
parent
1a5e32295a
commit
1a0551fd2c
@ -1 +1 @@
|
||||
45da091f3432b78e135e090c22b4ef03fdb760a0
|
||||
7af80a12efe4be1d7426868b736c93afc8dc0ded
|
||||
|
@ -44,18 +44,19 @@ $(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>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>
|
||||
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=
|
||||
"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=
|
||||
"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>
|
||||
<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>
|
||||
|
||||
<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,
|
||||
|
@ -58,8 +58,9 @@ $(document).ready(function() {
|
||||
|
||||
<p>The example below shows <a href="//datatables.net/reference/option/ajax.dataSrc"><code class=
|
||||
"option" title="DataTables initialisation option">ajax.dataSrc<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>
|
||||
a string to get the data from a different source property, in this case <code class="string" title=
|
||||
"String">demo</code> but it could be any value, included a nested property by using standard dotted
|
||||
Javascript object notation.</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
|
@ -39,11 +39,12 @@ $(document).ready(function() {
|
||||
<a href="//datatables.net/reference/option/deferRender"><code class="option" title=
|
||||
"DataTables initialisation option">deferRender<span>DT</span></code></a> option.</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>When deferred rendering is enabled, rather than having DataTables create all <code class="tag"
|
||||
title="HTML tag">TR</code> and <code class="tag" title="HTML tag">TD</code> nodes required for the
|
||||
table when the data is loaded, DataTables will only create the nodes required for each individual row
|
||||
at the time of that row being drawn on the page (these nodes are then retained in case they are needed
|
||||
again so they aren't created multiple times). This can give a significant performance increase, since a
|
||||
lot less work is done at initialisation time.</p>
|
||||
|
||||
<p>The example below shows DataTables with deferred rendering enabled. For this small example you'll
|
||||
likely notice no difference, but larger tables can benefit significantly from simply enabling this
|
||||
|
@ -49,7 +49,7 @@ $(document).ready(function() {
|
||||
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>
|
||||
<code class="tag" title="HTML tag">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=
|
||||
|
@ -52,8 +52,8 @@ $(document).ready(function() {
|
||||
"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>
|
||||
"DataTables API method">$()<span>DT</span></code></a> being used to get all <code class="tag" title=
|
||||
"HTML tag">input</code> elements from the table.</p>
|
||||
|
||||
<p>In the example a simple <code>alert()</code> is used to show the information from the form, but an
|
||||
Ajax call to the server with the form data could easily be performed.</p>
|
||||
|
@ -48,17 +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>select</code> input controls.</p>
|
||||
functionality, but in this case using <code class="tag" title="HTML tag">select</code> input
|
||||
controls.</p>
|
||||
|
||||
<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=
|
||||
<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=
|
||||
"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=
|
||||
to unique and ordered elements. Finally the <code>change</code> event from the <code class="tag" title=
|
||||
"HTML tag">select</code> input is used to trigger a column search using the <a href=
|
||||
"//datatables.net/reference/api/column().search()"><code class="api" title=
|
||||
"DataTables API method">column().search()<span>DT</span></code></a> method.</p>
|
||||
</div>
|
||||
|
@ -42,11 +42,13 @@ $(document).ready(function() {
|
||||
<p>There are four built-in options for which pagination controls DataTables should show:</p>
|
||||
|
||||
<ul>
|
||||
<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>
|
||||
<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>
|
||||
</ul>
|
||||
|
||||
<p>The language strings of 'First', 'Previous' etc can be optionally through the internationalisation
|
||||
@ -59,7 +61,8 @@ $(document).ready(function() {
|
||||
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>full_numbers</code> type of pagination.</p>
|
||||
<p>The example below shows the <code class="string" title="String">full_numbers</code> type of
|
||||
pagination.</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
|
@ -40,9 +40,10 @@ $(document).ready(function() {
|
||||
|
||||
<p>The <a href="//datatables.net/reference/option/order"><code class="option" title=
|
||||
"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=
|
||||
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=
|
||||
"DataTables initialisation option">order<span>DT</span></code></a> is a 2D array to allow multi-column
|
||||
ordering to be defined.</p>
|
||||
|
||||
|
@ -62,7 +62,7 @@ $(document).ready(function() {
|
||||
|
||||
<p>The example below shows <a href="//datatables.net/reference/option/ajax"><code class="option" title=
|
||||
"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>
|
||||
option set to <code class="string" title="String">POST</code> to make a POST request.</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
|
Loading…
x
Reference in New Issue
Block a user