1
0
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:
Allan Jardine 2014-04-01 11:08:10 +01:00
parent 1a5e32295a
commit 1a0551fd2c
10 changed files with 42 additions and 33 deletions

View File

@ -1 +1 @@
45da091f3432b78e135e090c22b4ef03fdb760a0
7af80a12efe4be1d7426868b736c93afc8dc0ded

View File

@ -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,

View File

@ -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%">

View File

@ -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

View File

@ -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=

View File

@ -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>

View File

@ -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>

View File

@ -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%">

View File

@ -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>

View File

@ -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%">