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

Fix: Alter how the selector for the $ API method works so that it works on the TR elements and their decendants

Browse Source 
Update: modify the api_in_init.html example to use the $ API method
This commit is contained in:
Allan Jardine 2011-12-14 17:42:25 +00:00
parent 22bffbb014
commit 5a506746bb
3 changed files with 24 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
examples/api/api_in_init.html
View File

@ -15,10 +15,8 @@
$(document).ready(function() {
$('#example').dataTable( {
"fnInitComplete": function () {
var
that = this,
nTrs = this.fnGetNodes();
$('td', nTrs).click( function () {
var that = this;
this.$('td').click( function () {
that.fnFilter( this.innerHTML );
} );
}
@ -33,8 +31,8 @@
</div>
<h1>Preamble</h1>
<p>There are times when you may wish to call API functions inside the DataTables callback functions (for example fnInitComplete, fnRowCallback etc). The complicating issue with this is that the object hasn't fully initialised, so you can't assign the result to something like oTable and then use oTable in the callback. However, this is catered for by the execution scope of the callback function. Here 'this' is the DataTables object that is created for the table.</p>
<p>In this example you will be able to see that this.fnGetNodes() is used, and also the value of this stored in the variable 'that' so it can be used inside the jQuery click function, where the execution scope has been changed to the td element!). The action here is to apply the filter with the value of what is in each cell.</p>
<p>There are times when you may wish to call API functions inside the DataTables callback functions (for example fnInitComplete, fnRowCallback etc). The complicating issue with this is that the object hasn't fully initialised, so you can't assign the result to something like oTable and then use oTable in the callback. However, this is catered for by the execution scope of the callback function. Here <i>this</i> is the DataTables object that is created for the table.</p>
<p>In this example you will be able to see that <i>this.$()</i> is used to get all nodes in the table's body and then act on them (in this case added a click event). Note also the value of <i>this</i> stored in the variable <i>that</i> so it can be used inside the jQuery click function, where the execution scope has been changed to the td element!). The action here is to apply the filter with the value of what is in each cell.</p>
<h1>Live example</h1>
<div id="demo">
@ -471,10 +469,8 @@
<pre class="brush: js;">$(document).ready(function() {
$('#example').dataTable( {
"fnInitComplete": function () {
var
that = this,
nTrs = this.fnGetNodes();
$('td', nTrs).click( function () {
var that = this;
this.$('td').click( function () {
that.fnFilter( this.innerHTML );
} );
}

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

@ -4791,7 +4791,15 @@
_fnLog( oSettings, 1, "Unknown selection options" );
}
return $(a).filter(sSelector);
/* We need to filter on the TR elements and also 'find' in their descendants
* to make the selector act like it would in a full table - so we need
* to build both results and then combine them together
*/
var jqA = $(a);
var jqTRs = jqA.filter( sSelector );
var jqDescendants = jqA.find( sSelector );
return $( [].concat($.makeArray(jqTRs), $.makeArray(jqDescendants)) );
};

10
media/src/api/api.methods.js
View File

@ -95,7 +95,15 @@ this.$ = function ( sSelector, oOpts )
_fnLog( oSettings, 1, "Unknown selection options" );
}
return $(a).filter(sSelector);
/* We need to filter on the TR elements and also 'find' in their descendants
* to make the selector act like it would in a full table - so we need
* to build both results and then combine them together
*/
var jqA = $(a);
var jqTRs = jqA.filter( sSelector );
var jqDescendants = jqA.find( sSelector );
return $( [].concat($.makeArray(jqTRs), $.makeArray(jqDescendants)) );
};