rooty/DataTables
1
0
Fork 0
mirror of https://github.com/DataTables/DataTables.git synced 2025-02-20 18:54:15 +01:00
Code Issues Releases Activity

Merge branch 'master' of github.com:DataTables/DataTablesSrc

Browse Source
This commit is contained in:
Allan Jardine 2018-06-14 11:16:48 +01:00
parent c64a7a03cb
commit ce5e859cbd
18 changed files with 37 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.datatables-commit-sync
View File

@ -1 +1 @@
a317c24bdd82238908138945bae7e168e6a7483f
24c940786cc635fe43648992496c212e8ece1fee

4
examples/api/add_row.html
View File

@ -55,8 +55,8 @@ $(document).ready(function() {
<p>Note that in order to see the new row in the table you must call the <a href="//datatables.net/reference/api/draw()"><code class="api" title=
"DataTables API method">draw()</code></a> method, which is easily done through the chaining that the DataTables API employs.</p>
<p>This example shows a single row being added each time the button below is clicked upon.</p>
<p>The <a href="https://editor.datatables.net/">Editor extension</a> adds full table editing controls, including creating, editing and deleting rows, to a
DataTable.</p>
<p>The <a href="https://editor.datatables.net/">Editor extension</a> adds full table editing controls to a DataTable, including creating, editing and deleting
rows.</p>
</div>
<div class="demo-html">
<button id="addRow">Add new row</button>

2
examples/api/counter_columns.html
View File

@ -43,7 +43,7 @@ $(document).ready(function() {
<section>
<h1>DataTables example <span>Index column</span></h1>
<div class="info">
<p>Highly-interactive tables often require a 'counter' column that contains the position in the table for each row. This column should not be sortable, and will
<p>Highly-interactive tables often require a 'counter' column that contains the position for each row in the table. This column should not be sortable, and will
change dynamically as the ordering and searching applied to the table is altered by the end user.</p>
<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="DataTables event">order</code></a> and <a href=

10
examples/api/multi_filter_select.html
View File

@ -60,15 +60,15 @@ $(document).ready(function() {
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()</code></a> method.</p>
<p>Note that the <a href="//datatables.net/reference/api/column().search()"><code class="api" title="DataTables API method">column().search()</code></a> method in
this particular case performs an exact match through the use of a custom regular expression and disabling DataTables built in smart searching. For more information
on the search options in DataTables API please refer to the documentation for <a href="//datatables.net/reference/api/search()"><code class="api" title=
this particular case performs an exact match through the use of a custom regular expression and disabling DataTables built-in smart searching. For more information
on the search options in DataTables API, please refer to the documentation for <a href="//datatables.net/reference/api/search()"><code class="api" title=
"DataTables API method">search()</code></a>, <a href="//datatables.net/reference/api/column().search()"><code class="api" title=
"DataTables API method">column().search()</code></a> and <a href="//datatables.net/reference/api/%24.fn.dataTable.util.escapeRegex()"><code class="api" title=
"DataTables API method">$.fn.dataTable.util.escapeRegex()</code></a> which are used for searching globally, by column and escaping regular expressions
respectively.</p>
<p>Note also that this example shows the use of <a href="//datatables.net/reference/option/initComplete"><code class="option" title=
"DataTables initialisation option">initComplete</code></a> a callback function that is triggered when the table has fully loaded. Use of this callback isn't
actually required in this example since the data is available in the table on load, but in the case of Ajax loaded data, <a href=
<p>Also note this example demonstrates the use of <a href="//datatables.net/reference/option/initComplete"><code class="option" title=
"DataTables initialisation option">initComplete</code></a>, a callback function triggered when the table has fully loaded. Use of this callback isn't required in
this example since the data is available in the table on load, but in the case of Ajax loaded data, <a href=
"//datatables.net/reference/option/initComplete"><code class="option" title="DataTables initialisation option">initComplete</code></a> is useful to execute code
after the data has been loaded.</p>
</div>

7
examples/api/row_details.html
View File

@ -92,11 +92,10 @@ $(document).ready(function() {
<p>The DataTables API has a number of methods for attaching child rows to a <em>parent</em> row in the DataTable. This can be used to show additional information
about a row, useful for cases where you wish to convey more information about a row than there is space for in the host table.</p>
<p>The example below makes use of the <a href="//datatables.net/reference/api/row().child"><code class="api" title="DataTables API method">row().child</code></a>
methods to firstly check if a row is already displayed, and if so hide it (<a href="//datatables.net/reference/api/row().child.hide()"><code class="api" title=
methods to first check if a row is already displayed, and if so hide it (<a href="//datatables.net/reference/api/row().child.hide()"><code class="api" title=
"DataTables API method">row().child.hide()</code></a>), otherwise show it (<a href="//datatables.net/reference/api/row().child.show()"><code class="api" title=
"DataTables API method">row().child.show()</code></a>). The content of the child row is, in this example, defined by the <code>formatDetails()</code> function, but
you would replace that with whatever you wanted to show the content required, possibly including, for example, an Ajax call to the server to obtain the extra
information to show.</p>
"DataTables API method">row().child.show()</code></a>). The content of the child row in this example is defined by the <code>format()</code> function, but you
would replace that with whatever content you wanted to show, possibly including, for example, an Ajax call to the server to obtain any extra information.</p>
</div>
<div class="demo-html"></div>
<table id="example" class="display" cellspacing="0" width="100%">

2
examples/basic_init/alt_pagination.html
View File

@ -42,7 +42,7 @@ $(document).ready(function() {
<li><code class="string" title="String">full_numbers</code> - 'First', 'Previous', 'Next' and 'Last' buttons, plus page numbers</li>
<li><code class="string" title="String">first_last_numbers</code> - 'First' 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=
<p>The language strings of 'First', 'Previous' etc can be optionally changed through the internationalisation options of DataTables; <a href=
"//datatables.net/reference/option/language.paginate.first"><code class="option" title="DataTables initialisation option">language.paginate.first</code></a>,
<a href="//datatables.net/reference/option/language.paginate.previous"><code class="option" title=
"DataTables initialisation option">language.paginate.previous</code></a> etc.</p>

4
examples/basic_init/filter_only.html
View File

@ -32,8 +32,8 @@ $(document).ready(function() {
<section>
<h1>DataTables example <span>Feature enable / disable</span></h1>
<div class="info">
<p>Disabling features that you don't wish to use for a particular table is easily done by setting a variable in the initialisation object. A full list of the
options that can be used is <a href="https://datatables.net/reference/option">available in the DataTables reference</a>.</p>
<p>Disabling features that you don't wish to use for a particular table is easily done by setting a variable in the initialisation object. The full list of
available options is <a href="https://datatables.net/reference/option">available in the DataTables reference</a>.</p>
<p>In the following example only the search feature is left enabled (which it is by default).</p>
</div>
<div class="demo-html"></div>

2
examples/basic_init/flexible_width.html
View File

@ -36,7 +36,7 @@ $(document).ready(function() {
presents a problem for Javascript since it can be very hard to get that relative size rather than the absolute pixels. As such, if you apply the <code>width</code>
attribute to the HTML table tag or inline width style (<code>style="width:100%"</code>), it will be used as the width for the table (overruling any CSS
styles).</p>
<p>This example shows a table with <code>width="100%"</code> and the container is also flexible width, so as the window is resized, the table will also resize
<p>This example shows a table with <code>width="80%"</code> and the container is also flexible width, so as the window is resized, the table will also resize
dynamically.</p>
</div>
<div class="demo-html"></div>

2
examples/basic_init/index.html
View File

@ -16,7 +16,7 @@
<section>
<h1>DataTables example <span>Basic initialisation</span></h1>
<div class="info">
<p>DataTables is very simple to use as a jQuery plug-in with a huge range of customisable option. The examples in this section demonstrate basic initialisation of
<p>DataTables is a simple-to-use jQuery plug-in with a huge range of customisable options. The examples in this section demonstrate basic initialisation of
DataTables and how it can be easily customised by passing an object with the options you want.</p>
</div>
</section>

2
examples/basic_init/language.html
View File

@ -38,7 +38,7 @@ $(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="DataTables initialisation option">language</code></a> object to the DataTable constructor.</p>
<p>The example above shows a different set of English string being used, rather than the defaults.</p>
<p>This example shows a different set of English string being used, rather than the defaults.</p>
</div>
<div class="demo-html"></div>
<table id="example" class="display" cellspacing="0" width="100%">

2
examples/data_sources/dom.html
View File

@ -33,7 +33,7 @@ $(document).ready(function() {
<p>The foundation for DataTables is progressive enhancement, so it is very adept at reading table information directly from the DOM. This example shows how easy it
is to add searching, ordering and paging to your HTML table by simply running DataTables on it.</p>
<p>For further and more complex examples of using DataTables with DOM sourced data, please refer to the <a href="../basic_init">basic initialisation</a> and
<a href="../advanced_init">advanced</a> examples.</p>
<a href="../advanced_init">advanced initialisation</a> examples.</p>
</div>
<div class="demo-html"></div>
<table id="example" class="display" cellspacing="0" width="100%">

4
examples/data_sources/index.html
View File

@ -23,8 +23,8 @@
<li>Ajax sourced data with client-side processing</li>
<li>Ajax sourced data with server-side processing</li>
</ul>
<p>Which of these options is used to populate the table with data depends upon how the table is initialised. The examples in this section show these four different
data source types.</p>
<p>Which of these options is used to populate the table data depends upon how the table is initialised. The examples in this section show these four different data
source types.</p>
</div>
</section>
</div>

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

@ -53,7 +53,7 @@ $(document).ready(function() {
<div class="info">
<p>The DataTables API is designed to be fully extensible, with custom functions being very easy to add using the <code>$.fn.dataTable.Api.register</code> function.
This function takes two arguments; the first being the name of the method to be added and its chaining hierarchy, and the second the function itself.</p>
<p>This example shows how a <code>sum()</code> method can easily be added to the Api so you can get the sum of a column in a single line:
<p>This example shows how a <code>sum()</code> method can easily be added to the API so you can get the sum of a column in a single line:
<code>table.column().data().sum()</code>. Due to the chaining of the methods, this allows <code>sum()</code> to very easily give the sum for any selected column,
and to limit the sum to just the current page, filtered data or all pages. This is done using the options for the <a href=
"//datatables.net/reference/api/column()"><code class="api" title="DataTables API method">column()</code></a> method and the options for its selectors.</p>

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

@ -70,14 +70,14 @@ $(document).ready(function() {
<section>
<h1>DataTables example <span>Live DOM ordering</span></h1>
<div class="info">
<p>This example shows how you can use information available in the DOM to order columns. Typically DataTables will read information to be ordered during it's
<p>This example shows how you can use information available in the DOM to order columns. Typically DataTables will read information to be ordered during its
initialisation phase, and this will not be updated based on user interaction, so ordering on columns which have, for example, form elements in them, may not
reflect the current value of the input. To overcome this problem, you must update the data that DataTables will order on, just prior to the order. This method is
much more efficient than actually ordering using the DOM, since only one DOM query is needed for each cell to be ordered.</p>
<p>The example below shows the first two columns as normal text with ordering as you would expect. The following columns all have a form input element of different
<p>The example below shows the first column as normal text with ordering as you would expect. The following columns all have a form input element of different
kinds, and the information contained within is what DataTables will perform the order on, based on the value at the time of the order.</p>
<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=
<p>This is a fairly simple example, but 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 enters data into a form by using an event handler calling <a href=
"//datatables.net/reference/api/order()"><code class="api" title="DataTables API method">order()</code></a> or <a href=
"//datatables.net/reference/api/draw()"><code class="api" title="DataTables API method">draw()</code></a> methods.</p>
</div>

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

@ -53,8 +53,8 @@ $(document).ready(function() {
<section>
<h1>DataTables example <span>Custom filtering - range search</span></h1>
<div class="info">
<p>There may be occasions when you wish to search data presented to the end user in your own manner, common examples are number range search (in between two
numbers) and date range search. DataTables provide an API method to add your own search functions, <code>$.fn.dataTable.ext.search</code>. This is an array of
<p>There may be occasions when you wish to search data presented to the end user in your own manner, common examples are number range searches (in between two
numbers) and date range searches. DataTables provides an API method to add your own search functions, <code>$.fn.dataTable.ext.search</code>. This is an array of
functions (push your own onto it) which will will be run at table draw time to see if a particular row should be included or not.</p>
<p>This example shows a search being performed on the age column in the data, based upon two inputs.</p>
</div>

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

@ -48,11 +48,10 @@ $(document).ready(function() {
<section>
<h1>DataTables example <span>Ordering plug-ins (with type detection)</span></h1>
<div class="info">
<p>Although DataTables will automatically order data from a number of different data types using the built in methods, When dealing with more complex formatted
data, it can be desirable to define the ordering order yourself. Using plug-in ordering functions, you have have DataTables sort data in any manner you wish.</p>
<p>Although DataTables will automatically order data from a number of different data types using the built in methods, when dealing with more complex formatted
data, it can be desirable to define the ordering order yourself. Using plug-in ordering functions, you can have DataTables sort data in any manner you wish.</p>
<p>Formatted data of a particular kind can be automatically detected and a suitable ordering plug-in assigned to it by making use of DataTables' plug-in type
detection abilities. For complete information about type detection and ordering plug-ins; creating them and their requirements, please refer to the plug-in
development documentation.</p>
detection abilities. 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 using an enumerated type.</p>
<p>A wide variety of ready made ordering plug-ins can be found on <a href="//datatables.net/plug-ins/sorting">the DataTables plug-ins page</a>.</p>
</div>

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

@ -44,12 +44,12 @@ $(document).ready(function() {
<section>
<h1>DataTables example <span>Ordering plug-ins (no type detection)</span></h1>
<div class="info">
<p>Although DataTables will order a number of data types using the built in methods, When dealing with more complex formatted data, it can be desirable to define
the ordering order yourself. Using plug-in ordering functions, you have have DataTables order data in any manner you wish.</p>
<p>Although DataTables will order a number of data types using the built in methods, when dealing with more complex formatted data, it can be desirable to define
the ordering order yourself. Using plug-in ordering functions, you can 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=
"DataTables 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
"DataTables initialisation option">columns.type</code></a> parameter, in combination with a ordering plug-in. The ordering plug-in can 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
<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 using an enumerated type.</p>
<p>A wide variety of ready made ordering plug-ins can be found on <a href="//datatables.net/plug-ins/sorting">the DataTables plug-ins page</a>.</p>

4
media/js/jquery.dataTables.js vendored
View File

@ -12364,8 +12364,8 @@
* { "data": "engine" },
* { "data": "browser" },
* { "data": "platform.inner" },
* { "data": "platform.details.0" },
* { "data": "platform.details.1" }
* { "data": "details.0" },
* { "data": "details.1" }
* ]
* } );
* } );