rooty/DataTables
1
0
Fork 0
mirror of https://github.com/DataTables/DataTables.git synced 2025-01-19 12:52:11 +01:00
Code Issues Releases Activity

Merge branch '1_10_wip' of github.com:DataTables/DataTables into 1_10_wip

Browse Source
This commit is contained in:
Allan Jardine 2013-06-25 10:09:33 +01:00
commit b7bbe0e1ff
21 changed files with 334 additions and 212 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
examples_src/basic_init/alt_pagination.xml
View File

@ -14,10 +14,23 @@ $(document).ready(function() {
} );
]]></js>
<info>
<p>The page controls which are used by default in DataTables (forward and backward buttons only) are great for most situations, but there are cases where you may wish to customise the controls presented to the end user. This is made simple by DataTables through its extensible pagination mechanism. There are two types of pagination controls built into DataTables: <value>two_button</value> (default) and <value>full_numbers</value>. To switch between these two types, use the <init>paginationType</init> initialisation parameter. You can add additional types of pagination control by extending the <code>$.fn.dataTableExt.oPagination</code> object.</p>
<info><![CDATA[
<p>The example below shows the <value>full_numbers</value> type of pagination, where 'first', 'previous', 'next' and 'last' buttons are presented, as well as the five pages around the current page.</p>
</info>
The default page control presented by DataTables (forward and backward buttons with up to 7 page numbers in-between) is fine for most situations, but there are cases where you may wish to customise the options presented to the end user. This is done through DataTables' extensible pagination mechanism, the `dt-init paginationType` option.
There are four built-in options for which pagination controls DataTables should show:
* `simple` - 'Previous' and 'Next' buttons only
* 'simple_numbers` - 'Previous' and 'Next' buttons, plus page numbers
* `full` - 'First', 'Previous', 'Next' and 'Last' buttons
* `full_numbers` - 'First', 'Previous', 'Next' and 'Last' buttons, plus page numbers
The language strings of 'First', 'Previous' etc can be optionally through the internationalisation options of DataTables; `dt-init first`, `dt-init previous` etc.
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.
The example below shows the `full_numbers` type of pagination.
]]></info>
</dt-example>

14
examples_src/basic_init/complex_header.xml
View File

@ -5,15 +5,21 @@
<js lib="jquery" />
<js lib="datatables" />
<title>Complex headers (row and colspans)</title>
<title>Complex headers (rowspan and colspan)</title>
<js><![CDATA[
$(document).ready(function() {
$('#example').dataTable();
} );
]]></js>
<info>
When using tables to display data, you will often wish to display column information in groups. DataTables fully supports <code>colspan</code> and <code>rowspans</code> in the header, assigning the required sorting listeners to the TH element suitable for that column. Each column must have one TH cell (and only one) which is unique to it for the listeners to be added. The example shown below has the core browser information grouped together.
</info>
<info><![CDATA[
When using tables to display data, you will often wish to display column information in groups. DataTables fully supports `colspan` and `rowspan` in the table's header, assigning the required sort listeners to the TH element suitable for that column.
Each column must have one TH cell which is unique to it for the listeners to be added. By default DataTables will use the bottom unique cell for the column to attach the sort listener, if more than one cell for a column if found. The `dt-init sortCellsTop` option can be used to tell DataTables to use the top cell if you prefer.
The example shown below has the core browser information grouped together.
]]></info>
</dt-example>

81
examples_src/basic_init/dom.xml
View File

@ -14,20 +14,71 @@ $(document).ready(function() {
} );
]]></js>
<info>
<p>When customising DataTables for your own usage, you might find that the default position of the feature elements (filter input etc) is not quite to your liking. To address this issue DataTables takes inspiration from the CSS 3 Advanced Layout Module and provides the <init>dom</init> 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 classes) to provide complete layout flexibility. The syntax available is:</p>
<ul>
<li><b>l</b> - Length changing</li>
<li><b>f</b> - Filtering input</li>
<li><b>t</b> - The table!</li>
<li><b>i</b> - Information</li>
<li><b>p</b> - Pagination</li>
<li><b>r</b> - pRocessing</li>
<li><b>&lt;</b> and <b>&gt;</b> - div elements</li>
<li><b>&lt;"class"</b> and <b>&gt;</b> - div with a class</li>
<li>Examples: <b>&lt;"wrapper"flipt&gt;</b>, <b>&lt;lf&lt;t&gt;ip&gt;</b></li>
</ul>
<p>In the example below I've moved the table information to the top of the table, and all the interaction elements to the bottom, each wrapper in a container <code>div</code>.</p>
</info>
<info><![CDATA[
When customising DataTables for your own usage, you might find that the default position of the feature elements (filter input etc) is not quite to your liking. To address this issue DataTables takes inspiration from the CSS 3 Advanced Layout Module and provides the `dt-init dom` initialisation parameter which can be set to indicate where you which particular features to appear in the DOM. You can also specify `div` wrapping containers (with an id and / or class) to provide complete layout flexibility.
Each HTML control element presented by DataTables is denoted by a single character in the `dt-init dom` option. For example the `l` option is used for the `L`ength changing input option.
The built-in options available are:
* `l` - `L`ength changing
* `f` - `F`iltering input
* `t` - The `T`able!
* `i` - `I`nformation
* `p` - `P`agination
* `r` - p`R`ocessing
* `<` and `>` - div elements
* `<"#id"` and `>` - div with an id
* `<"class"` and `>` - div with a class
* `<"#id.class"` and `>` - div with an id and class
Example 1:
```
<"wrapper"flipt>
```
This results in the following DOM structure:
```
<div class="wrapper">
{filter}
{length}
{info}
{paging}
{table}
</div>
```
Example 2:
```
<lf<t>ip>
```
This results in the following DOM structure:
```
<div>
{length}
{filter}
<div>
{table}
</div>
{info}
{paging}
</div>
```
All options (with the exception of the `t` (table) option can be specified multiple times, for if you want to show the same control multiple times (pagination at the top and bottom of the table for example).
Furthermore, note that additional `dt-init dom` options can be added to DataTables through the use of plug-ins.
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 `div`.</p>
]]></info>
</dt-example>

17
examples_src/basic_init/filter_only.xml
View File

@ -9,18 +9,17 @@
<js><![CDATA[
$(document).ready(function() {
$('#example').dataTable( {
"filter": true,
"paginate": false,
"lengthChange": false,
"sort": false,
"info": false,
"autoWidth": false
"paginate": false,
"sort": false,
"info": false
} );
} );
]]></js>
<info>
Disabling features that you don't wish to use for a particular table is easily done by setting a variable in the initialisation object. In the following example only the filter feature is left enabled (although I've explicitly declared it as enabled).
</info>
<info><![CDATA[
Disabling features that you don't wish to use for a particular table is easily done by setting a variable in the initialisation object. In the following example only the filter feature is left enabled (which is enabled by default).
]]></info>
</dt-example>

10
examples_src/basic_init/flexible_width.xml
View File

@ -12,10 +12,12 @@ $(document).ready(function() {
} );
]]></js>
<info>
<p>Often you may want to have your table resize dynamically with the page. Typically this is done by assigning <code>width:100%</code> in your CSS, but this 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, this will be used as the width for the table (overruling any CSS styles).</p>
<info><![CDATA[
<p>This example shows a table width <code>width="100%"</code> and the container is also flexible width, so as the window is resized, the table will also resize dynamically.</p>
</info>
Often you may want to have your table resize dynamically with the page. Typically this is done by assigning `width:100%` in your CSS, but this 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 `width` attribute to the HTML table tag, it will be used as the width for the table (overruling any CSS styles).
This example shows a table with `width="100%"` and the container is also flexible width, so as the window is resized, the table will also resize dynamically.
]]></info>
</dt-example>

25
examples_src/basic_init/hidden_columns.xml
View File

@ -10,15 +10,30 @@
$(document).ready(function() {
$('#example').dataTable( {
"columnDefs": [
{ "targets": [ 2 ], "visible": false, "searchable": false },
{ "targets": [ 3 ], "visible": false }
{
"targets": [ 2 ],
"visible": false,
"searchable": false
},
{
"targets": [ 3 ],
"visible": false
}
]
} );
} );
]]></js>
<info>
There are times when you might find it useful to display only a sub-set of the information that was available in the original table. For example you might want to reduce the amount of data shown on screen to make it clearer for the user. This hidden data can still be filtered upon allowing the user access to that data (for example 'tag' information for a row entry), or this can be disabled. In the table below both the platform and engine version columns have been hidden, the former is searchable, the latter is not.
</info>
<info><![CDATA[
There are times when you might find it useful to display only a sub-set of the information that was available in the original table. For example you might want to reduce the amount of data shown on screen to make it clearer for the user. This is done through the `dt-init visible` column option.
The column that is hidden is still part of the table and can be made visible through the `api column().visible()` API method at a future time if you wish to have columns which can be shown and hidden.
Furthermore, as the hidden data is still part of the table, it can still, optionally, be filtered upon allowing the user access to that data (for example 'tag' information for a row entry might used).
In the table below both the platform and engine version columns have been hidden, the former is searchable, the latter is not.
]]></info>
</dt-example>

8
examples_src/basic_init/index.xml
View File

@ -12,8 +12,10 @@ $(document).ready(function() {
} );
]]></js>
<info>
DataTables has most features enabled by default, so all you need to do to use it with one of your own tables is to call the construction function (as shown below).
</info>
<info><![CDATA[
DataTables has most features enabled by default, so all you need to do to use it with one of your own tables is to call the construction function. Filtering, sorting, paging etc goodness will be immediately added to the table!
]]></info>
</dt-example>

10
examples_src/basic_init/language.xml
View File

@ -20,8 +20,12 @@ $(document).ready(function() {
} );
]]></js>
<info>
Changing the language information displayed by DataTables is as simple as passing in a language object to the dataTable constructor. The example above shows a different set of English language definitions to be used, rather than the defaults.
</info>
<info><![CDATA[
Changing the language information displayed by DataTables is as simple as passing in a `dt-init language` object to the DataTable constructor.
The example above shows a different set of English string being used, rather than the defaults.
]]></info>
</dt-example>

41
examples_src/basic_init/multi_col_sort.xml
View File

@ -5,39 +5,32 @@
<js lib="jquery" />
<js lib="datatables" />
<title>Multi-column and custom sort</title>
<title>Multi-column sorting</title>
<js><![CDATA[
/* Define custom sorting plug-in */
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"string-case-pre": function ( a ) {
return a;
},
"string-case-asc": function( a, b ) {
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},
"string-case-desc": function(a,b) {
return ((a < b) ? 1 : ((a > b) ? -1 : 0));
}
} );
$(document).ready(function() {
/* Build the DataTable with third column using our custom sort function */
$('#example').dataTable( {
"sorting": [ [0,'asc'], [1,'asc'] ],
"columnDefs": [ {
"targets": [ 2 ],
"type": 'string-case'
columnDefs: [ {
targets: [ 0 ],
dataSort: [ 0, 1 ]
} ]
} );
} );
]]></js>
<info>
<p>As you would expect with a desktop application, DataTables allows you to sort by multiple columns at the same time. This multiple sorting mechanism is always active if the <init>sort</init> initialiser is <code>true</code> (it is by default) and the end user can activate it by 'shift' clicking on the column they want to add to the sort. You can also pass in an array of information using the <init>sorting</init> initialiser, as I have done in the example below there the first column is sorted as the primary column and the second one then used if the elements in the first column match. As many columns as you wish can be added to the sort.</p>
<info><![CDATA[
<p>DataTables also provides a method to add your own sorting functions, to extend those built into DataTables. This can be very useful if you wish to sort on data formats such as currency and non-Javascript standard date formats (<a href="http://www.overset.com/2008/09/01/javascript-natural-sort-algorithm/">this natural sort</a> algorithm is a popular option). This is achieved by extending the <code>jQuery.fn.dataTableExt</code> object with ascending and descending sort functions. In the example below I've added case sensitive sorting functions.</p>
</info>
DataTables allows sorting by multiple columns at the same time, which can be activated in a number of different ways:
* User shift click on a column (added the clicked column as a secondary, tertiary etc sorting column).
* On a per-column basis (i.e. sort by a specific column and then a secondary column if the data in the first column is identical), through the `dt-init dataSort` option.
* Using the `dt-init sorting` option to specify a multiple column sort by default (for example `[ [0,'asc'], [1,'asc'] ]`).
* Through the `dt-api order()` API method.
The ability for the user to shift click to sort multiple columns can be disabled through the `dt-init sortMulti` option.
The example below shows the first column having a secondary sort applied to the second column in the table.
]]></info>
</dt-example>

12
examples_src/basic_init/multiple_tables.xml
View File

@ -12,8 +12,14 @@ $(document).ready(function() {
} );
]]></js>
<info>
Using standard jQuery selector syntax with DataTables it is trivial to initialise multiple tables with a single line of Javascript, as shown below. All tables are completely independent, but share the parameters passed thought the initialiser object (for example if you specific the Spanish language file, all tables will be shown in Spanish).
</info>
<info><![CDATA[
Often you might wish to initialise multiple tables with a single statement. This is trivially done by using a jQuery selector which will pick up multiple tables.
All tables are completely independent (i.e. user controlled paging on one table does not effect the others), but they do share the initialisation parameters given (for example if you specific the Spanish language file, all tables will be shown in Spanish).
The example below shows multiple tables initialised with a single line of code, through the use of the `.dataTable` selector (i.e. select all elements which have the class of `dataTable`.
]]></info>
</dt-example>

22
examples_src/basic_init/scroll_x.xml
View File

@ -2,23 +2,29 @@
<dt-example table-type="html">
<css lib="datatables" />
<css>
th, td { white-space: nowrap; }
#demo { width: 600px; }
</css>
<js lib="jquery" />
<js lib="datatables" />
<title></title>
<title>Scroll - horizontal</title>
<js><![CDATA[
$(document).ready(function() {
$('#example').dataTable( {
"scrollX": "100%",
"scrollXInner": "110%",
"scrollCollapse": true
"scrollX": "100%"
} );
} );
]]></js>
<info>
<p>This DataTables horizontal scrolling example shows horizontal scrolling on a DataTable, which is very useful for when you have a wide table, with a large number of columns to display, but want to constrain it to a limited horizontal display area. To enable x-scrolling simply set the <init>scrollX</init> parameter to be whatever you want the container wrapper's width to be (any CSS measurement is acceptable, or just a number which is treated as pixels). Note also that sScrollXInner is used here to force the table to be wider than is strictly needed. You may or may not want to include this parameter depending on your application.</p>
<p>Also shown in this example is the use of a 'collapsing scroll table' by using <init>scrollCollapse</init>. When this parameter is set to true, the table size will 'collapse' down to match the number of rows, if the table height is smaller than the scrollable area.</p>
</info>
<info><![CDATA[
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 `dt-init scrollX` 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).
The example below shows a table too wide for the containing element with x-scrolling enabled. The CSS option of `th, td { white-space: nowrap; }` is also set to have the text content of each row on a single line (otherwise the browser will line break the text to have it fit into the available area).
]]></info>
</dt-example>

17
examples_src/basic_init/scroll_xy.xml
View File

@ -2,22 +2,27 @@
<dt-example table-type="html">
<css lib="datatables" />
<css>
th, td { white-space: nowrap; }
#demo { width: 600px; }
</css>
<js lib="jquery" />
<js lib="datatables" />
<title>Horizontal and vertical scrolling</title>
<title>Scroll - horizontal and vertical</title>
<js><![CDATA[
$(document).ready(function() {
$('#example').dataTable( {
"scrollY": 200,
"scrollX": "100%",
"scrollXInner": "110%"
"scrollX": "100%"
} );
} );
]]></js>
<info>
In this example you can see DataTables doing horizontal and vertical scrolling at the same time. Note also that pagination is enabled, and the scrolling accounts for this.
</info>
<info><![CDATA[
In this example you can see DataTables doing both horizontal and vertical scrolling at the same time. Note also that pagination is enabled in this example, and the scrolling accounts for this.
]]></info>
</dt-example>

20
examples_src/basic_init/scroll_y.xml
View File

@ -5,19 +5,25 @@
<js lib="jquery" />
<js lib="datatables" />
<title></title>
<title>Scroll - vertical</title>
<js><![CDATA[
$(document).ready(function() {
$('#example').dataTable( {
"scrollY": "200px",
"paginate": false,
"scrollCollapse": true
"scrollY": "200px",
"scrollCollapse": true,
"paginate": false
} );
} );
]]></js>
<info>
This example shows the DataTables table body scrolling in the vertical direction. This can generally be seen as an alternative method to pagination for displaying a large table in a fairly small vertical area, and as such pagination has been disabled here (note that this is not mandatory, it will work just fine with pagination enabled as well!). The example is set up to show grid lines using CSS, which is useful for alignment, both for testing and end user usability. To enable y scrolling simply set the <init>scrollY</init> 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).
</info>
<info><![CDATA[
This example shows the DataTables table body scrolling in the vertical direction. This can generally be seen as an alternative method to pagination for displaying a large table in a fairly small vertical area, and as such pagination has been disabled here (note that this is not mandatory, it will work just fine with pagination enabled as well!).
To enable y-scrolling simply set the `dt-init scrollY` 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).
Note also that the `dt-init scrollCollapse` 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 the given height by the `dt-init scrollY`.
]]></info>
</dt-example>

25
examples_src/basic_init/scroll_y_infinite.xml
View File

@ -1,25 +0,0 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html">
<css lib="datatables" />
<js lib="jquery" />
<js lib="datatables" />
<title>Infinite vertical scrolling</title>
<js><![CDATA[
$(document).ready(function() {
$('#example').dataTable( {
"scrollInfinite": true,
"scrollCollapse": true,
"scrollY": "200px"
} );
} );
]]></js>
<info>
<p>This example shows the DataTables table body scrolling in the vertical direction with infinite scrolling. The idea of infinite scrolling means that data will be added to the table dynamically, as and when needed by the user scrolling the table. A sub-set of the data is loaded initially, and more added as needed (technically of course, it is not "infinite" since it will stop loading data at the end of the data set!). Note that pagination much be enabled for infinite scrolling to work, but the pagination controls will not be shown (they could be, but can cause very confusing user interaction).</p>
<p>DataTables' infinite scroll can be used with any of the <a href="http://datatables.net/usage/#data_sources">four data sources</a> supported, and they do not require any modification to work (including server-side scripts).</p>
</info>
</dt-example>

14
examples_src/basic_init/scroll_y_theme.xml
View File

@ -6,19 +6,21 @@
<js lib="jquery" />
<js lib="datatables" />
<title>Vertical scrolling with jQuery UI ThemeRoller</title>
<title>Scroll - vertical with jQuery UI ThemeRoller</title>
<js><![CDATA[
$(document).ready(function() {
$('#example').dataTable( {
"scrollY": 200,
"jQueryUI": true,
"paginationType": "full_numbers"
"scrollY": 200,
"scrollCollapse": true,
"jQueryUI": true
} );
} );
]]></js>
<info>
<info><![CDATA[
This example is an extension of the vertical scrolling example, showing DataTables ability to be themed by jQuery UI's ThemeRoller.
</info>
]]></info>
</dt-example>

15
examples_src/basic_init/state_save.xml
View File

@ -12,8 +12,17 @@ $('#example').dataTable( {
} );
]]></js>
<info>
DataTables can use cookies in the end user's web-browser in order to store it's state after each change in drawing. What this means is that if the user were to reload the page, the table should remain exactly as it was (length, filtering, pagination and sorting). This feature is disabled by default, but can be easily enabled using the <init>stateSave</init> initialisation parameter as shown in this example. Note also that the duration of the cookie can be set using the <init>stateDuration</init> initialisation parameter (which is in seconds).
</info>
<info><![CDATA[
DataTables has the option of being able to save the state of a table (its paging position, sorting state etc) so that is can be restored when the user reloads a page, or comes back to it after visiting a sub-page. This state saving ability is enabled by the `dt-init stateSave` option.
The built in state saving method uses the HTML5 `localStorage` API for efficient storage of the data. PLease note that this means that the built in state saving option will not work with IE6/7 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 `dt-init stateSaveCallback` and `dt-init stateLoadCallback` options.
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 `dt-init stateDuration` initialisation parameter (2 hours by default).
The example below simply shows state saving enabled in DataTables with the `dt-init saveSave` option.
]]></info>
</dt-example>

12
examples_src/basic_init/table_sorting.xml
View File

@ -14,8 +14,14 @@ $(document).ready(function() {
} );
]]></js>
<info>
With DataTables you can alter the sorting characteristics of the table at initialisation time. Using the <init>sorting</init> initialisation parameter, you can get the table exactly how you want to present the information. The <init>sorting</init> parameter is an array of arrays where the first value is the column to sort on, and the second is 'asc' or 'desc' as required (it is a double array for <a href="../basic_init/multi_col_sort.html">multi-column sorting</a>). The table below is sorted (descending) by the CSS grade. Note also that the 'Engine version' column is automatically detected as a numeric column and sorted accordingly.
</info>
<info><![CDATA[
With DataTables you can alter the sorting characteristics of the table at initialisation time. Using the `dt-init sorting` initialisation parameter, you can set the table to display the data exactly how you want.
The `dt-init sorting` parameter is an array of arrays where the first value of the inner array is the column to sort on, and the second is 'asc' or 'desc' as required (it is a 2D array to allow multi-column sorting to be defined).
The table below is sorted (descending) by the CSS grade. Note also that the 'Engine version' column is automatically detected as a numeric column and sorted accordingly.
]]></info>
</dt-example>

12
examples_src/basic_init/themes.xml
View File

@ -16,8 +16,14 @@ $(document).ready(function() {
} );
]]></js>
<info>
Styling widgets such as DataTables can often take a considerable amount of time to fully integrate it into your site / application, with the demo styles as a base. This holds true for all widgets, and the jQuery UI team have addressed this issue by introducing themes through their excellent <a href="http://jqueryui.com/themeroller/">ThemeRoller</a>. DataTables has full support for ThemeRoller created themes, all you need to do is enable the <init>jQueryUI</init> flag in the initialisation object, and the required mark-up and classes will be added by DataTables.
</info>
<info><![CDATA[
Styling widgets such as DataTables can often take a considerable amount of time to fully integrate it into your site / application, with the demo styles as a base. This holds true for all widgets, and the jQuery UI team have addressed this issue by introducing themes through their (ThemeRoller)[http://jqueryui.com/themeroller/].
DataTables has built-in support for ThemeRoller created themes, all you need to do is enable the `dt-init jQueryUI` flag in the initialisation object, and the required mark-up and classes will be added by DataTables.
Please note that the `dt-init jQueryUI` option is deprecated in DataTables 1.10 and will be removed in 1.11. jQuery UI theme integration will still be fully supported, but in future as a plug-in, matching that of the Bootstrap and Foundation integration options for DataTables.
]]></info>
</dt-example>

8
examples_src/basic_init/zero_config.xml
View File

@ -12,8 +12,10 @@ $(document).ready(function() {
} );
]]></js>
<info>
DataTables has most features enabled by default, so all you need to do to use it with one of your own tables is to call the construction function (as shown below).
</info>
<info><![CDATA[
DataTables has most features enabled by default, so all you need to do to use it with one of your own tables is to call the construction function (as shown below).
]]></info>
</dt-example>

128
media/src/core/core.constructor.js
View File

@ -2,7 +2,7 @@
var i=0, iLen, j, jLen, k, kLen;
var sId = this.getAttribute( 'id' );
var bInitHandedOff = false;
var bUsePassedData = false;
var defaults = DataTable.defaults
var oInitEmpty = oInit === undefined ? true : false;
@ -14,37 +14,38 @@ if ( this.nodeName.toLowerCase() != 'table' )
}
/* Convert the camel-case defaults to Hungarian */
_fnCamelToHungarian( DataTable.defaults, DataTable.defaults, true );
_fnCamelToHungarian( DataTable.defaults.column, DataTable.defaults.column, true );
_fnCamelToHungarian( defaults, defaults, true );
_fnCamelToHungarian( defaults.column, defaults.column, true );
/* Setting up the initialisation object */
if ( !oInit )
{
oInit = {};
}
_fnCamelToHungarian( DataTable.defaults, oInit );
_fnCamelToHungarian( defaults, oInit );
/* Check to see if we are re-initialising a table */
for ( i=0, iLen=DataTable.settings.length ; i<iLen ; i++ )
var allSettings = DataTable.settings;
for ( i=0, iLen=allSettings.length ; i<iLen ; i++ )
{
/* Base check on table node */
if ( DataTable.settings[i].nTable == this )
if ( allSettings[i].nTable == this )
{
var bRetrieve = oInit.bRetrieve !== undefined ? oInit.bRetrieve : DataTable.defaults.bRetrieve;
var bDestroy = oInit.bDestroy !== undefined ? oInit.bDestroy : DataTable.defaults.bDestroy;
var bRetrieve = oInit.bRetrieve !== undefined ? oInit.bRetrieve : defaults.bRetrieve;
var bDestroy = oInit.bDestroy !== undefined ? oInit.bDestroy : defaults.bDestroy;
if ( oInitEmpty || bRetrieve )
{
return DataTable.settings[i].oInstance;
return allSettings[i].oInstance;
}
else if ( bDestroy )
{
DataTable.settings[i].oInstance.fnDestroy();
allSettings[i].oInstance.fnDestroy();
break;
}
else
{
_fnLog( DataTable.settings[i], 0, 'Cannot reinitialise DataTable', 3 );
_fnLog( allSettings[i], 0, 'Cannot reinitialise DataTable', 3 );
return;
}
}
@ -54,9 +55,9 @@ for ( i=0, iLen=DataTable.settings.length ; i<iLen ; i++ )
* instance by simply deleting it. This is under the assumption that the table has been
* destroyed by other methods. Anyone using non-id selectors will need to do this manually
*/
if ( DataTable.settings[i].sTableId == this.id )
if ( allSettings[i].sTableId == this.id )
{
DataTable.settings.splice( i, 1 );
allSettings.splice( i, 1 );
break;
}
}
@ -77,7 +78,7 @@ var oSettings = $.extend( true, {}, DataTable.models.oSettings, {
"sInstance": sId,
"sTableId": sId
} );
DataTable.settings.push( oSettings );
allSettings.push( oSettings );
// Need to add the instance after the instance after the settings object has been added
// to the settings array, so we can self reference the table instance if more than one
@ -96,49 +97,55 @@ if ( oInit.aLengthMenu && ! oInit.iDisplayLength )
oInit.aLengthMenu[0][0] : oInit.aLengthMenu[0];
}
oInit = _fnExtend( $.extend(true, {}, DataTable.defaults), oInit );
oInit = _fnExtend( $.extend(true, {}, defaults), oInit );
// Map the initialisation options onto the settings object
_fnMap( oSettings.oFeatures, oInit, "bPaginate" );
_fnMap( oSettings.oFeatures, oInit, "bLengthChange" );
_fnMap( oSettings.oFeatures, oInit, "bFilter" );
_fnMap( oSettings.oFeatures, oInit, "bSort" );
_fnMap( oSettings.oFeatures, oInit, "bSortMulti" );
_fnMap( oSettings.oFeatures, oInit, "bInfo" );
_fnMap( oSettings.oFeatures, oInit, "bProcessing" );
_fnMap( oSettings.oFeatures, oInit, "bAutoWidth" );
_fnMap( oSettings.oFeatures, oInit, "bSortClasses" );
_fnMap( oSettings.oFeatures, oInit, "bServerSide" );
_fnMap( oSettings.oFeatures, oInit, "bDeferRender" );
_fnMap( oSettings.oScroll, oInit, "sScrollX", "sX" );
_fnMap( oSettings.oScroll, oInit, "sScrollXInner", "sXInner" );
_fnMap( oSettings.oScroll, oInit, "sScrollY", "sY" );
_fnMap( oSettings.oScroll, oInit, "bScrollCollapse", "bCollapse" );
_fnMap( oSettings.oScroll, oInit, "bScrollInfinite", "bInfinite" );
_fnMap( oSettings.oScroll, oInit, "iScrollLoadGap", "iLoadGap" );
_fnMap( oSettings.oScroll, oInit, "bScrollAutoCss", "bAutoCss" );
_fnMap( oSettings, oInit, "asStripeClasses" );
_fnMap( oSettings, oInit, "ajax" );
_fnMap( oSettings, oInit, "fnServerData" );
_fnMap( oSettings, oInit, "fnFormatNumber" );
_fnMap( oSettings, oInit, "sServerMethod" );
_fnMap( oSettings, oInit, "aaSorting" );
_fnMap( oSettings, oInit, "aaSortingFixed" );
_fnMap( oSettings, oInit, "aLengthMenu" );
_fnMap( oSettings, oInit, "sPaginationType" );
_fnMap( oSettings, oInit, "sAjaxSource" );
_fnMap( oSettings, oInit, "sAjaxDataProp" );
_fnMap( oSettings, oInit, "iCookieDuration", "iStateDuration" ); // backwards compat
_fnMap( oSettings, oInit, "iStateDuration" );
_fnMap( oSettings, oInit, "sDom" );
_fnMap( oSettings, oInit, "bSortCellsTop" );
_fnMap( oSettings, oInit, "iTabIndex" );
_fnMap( oSettings, oInit, "oSearch", "oPreviousSearch" );
_fnMap( oSettings, oInit, "aoSearchCols", "aoPreSearchCols" );
_fnMap( oSettings, oInit, "iDisplayLength", "_iDisplayLength" );
_fnMap( oSettings, oInit, "bJQueryUI", "bJUI" );
_fnMap( oSettings, oInit, "fnStateLoadCallback" );
_fnMap( oSettings, oInit, "fnStateSaveCallback" );
_fnMap( oSettings.oFeatures, oInit, [
"bPaginate",
"bLengthChange",
"bFilter",
"bSort",
"bSortMulti",
"bInfo",
"bProcessing",
"bAutoWidth",
"bSortClasses",
"bServerSide",
"bDeferRender"
] );
_fnMap( oSettings, oInit, [
"asStripeClasses",
"ajax",
"fnServerData",
"fnFormatNumber",
"sServerMethod",
"aaSorting",
"aaSortingFixed",
"aLengthMenu",
"sPaginationType",
"sAjaxSource",
"sAjaxDataProp",
"iStateDuration",
"sDom",
"bSortCellsTop",
"iTabIndex",
"fnStateLoadCallback",
"fnStateSaveCallback",
[ "iCookieDuration", "iStateDuration" ], // backwards compat
[ "oSearch", "oPreviousSearch" ],
[ "aoSearchCols", "aoPreSearchCols" ],
[ "iDisplayLength", "_iDisplayLength" ],
[ "bJQueryUI", "bJUI" ]
] );
_fnMap( oSettings.oScroll, oInit, [
[ "sScrollX", "sX" ],
[ "sScrollXInner", "sXInner" ],
[ "sScrollY", "sY" ],
[ "bScrollCollapse", "bCollapse" ],
[ "bScrollInfinite", "bInfinite" ],
[ "iScrollLoadGap", "iLoadGap" ],
[ "bScrollAutoCss", "bAutoCss" ]
] );
_fnMap( oSettings.oLanguage, oInit, "fnInfoCallback" );
/* Callback functions which are array driven */
@ -162,7 +169,7 @@ if ( oInit.bJQueryUI )
*/
$.extend( oSettings.oClasses, DataTable.ext.oJUIClasses, oInit.oClasses );
if ( oInit.sDom === DataTable.defaults.sDom && DataTable.defaults.sDom === "lfrtip" )
if ( oInit.sDom === defaults.sDom && defaults.sDom === "lfrtip" )
{
/* Set the DOM to use a layout suitable for jQuery UI's theming */
oSettings.sDom = '<"H"lfr>t<"F"ip>';
@ -202,11 +209,6 @@ if ( oInit.iDeferLoading !== null )
oSettings._iRecordsTotal = tmp ? oInit.iDeferLoading[1] : oInit.iDeferLoading;
}
if ( oInit.aaData !== null )
{
bUsePassedData = true;
}
/* Language definitions */
if ( oInit.oLanguage.sUrl !== "" )
{
@ -217,7 +219,7 @@ if ( oInit.oLanguage.sUrl !== "" )
oSettings.oLanguage.sUrl = oInit.oLanguage.sUrl;
$.getJSON( oSettings.oLanguage.sUrl, null, function( json ) {
_fnLanguageCompat( json );
_fnCamelToHungarian( DataTable.defaults.oLanguage, json );
_fnCamelToHungarian( defaults.oLanguage, json );
$.extend( true, oSettings.oLanguage, oInit.oLanguage, json );
_fnInitialise( oSettings );
} );
@ -433,7 +435,7 @@ if ( tfoot.length > 0 )
}
/* Check if there is data passing into the constructor */
if ( bUsePassedData )
if ( oInit.aaData )
{
for ( i=0 ; i<oInit.aaData.length ; i++ )
{

34
media/src/core/core.support.js
View File

@ -50,21 +50,33 @@ function _fnLog( settings, level, msg, tn )
/**
* See if a property is defined on one object, if so assign it to the other object
* @param {object} oRet target object
* @param {object} oSrc source object
* @param {string} sName property
* @param {string} [sMappedName] name to map too - optional, sName used if not given
* @param {object} ret target object
* @param {object} src source object
* @param {string} name property
* @param {string} [mappedName] name to map too - optional, name used if not given
* @memberof DataTable#oApi
*/
function _fnMap( oRet, oSrc, sName, sMappedName )
function _fnMap( ret, src, name, mappedName )
{
if ( sMappedName === undefined )
{
sMappedName = sName;
if ( $.isArray( name ) ) {
$.each( name, function (i, val) {
if ( $.isArray( val ) ) {
_fnMap( ret, src, val[0], val[1] );
}
else {
_fnMap( ret, src, val[0] );
}
} );
return;
}
if ( oSrc[sName] !== undefined )
{
oRet[sMappedName] = oSrc[sName];
if ( mappedName === undefined ) {
mappedName = name;
}
if ( src[name] !== undefined ) {
ret[mappedName] = src[name];
}
}