PATCH: column fnRendering, support for arbitrary jQuery object insertion.

arturoea

The following patch allows DataTables to use a fnRender function that returns jQuery objects so that these will be displayed on each row. This allows the use of closures for event handling and the jQueryUI API, instead of having to code your own HTML with onclick and similar attributes, calling on globally accessible functions, which is kind of nasty.

Example:

[code]
function myRender (opts) {
var rowNum = opts.iDataRow;
return $('')
.text ('Remove')
.button ({ icons: { primary: 'ui-icon-trash' }, text: false })
.click (function () { alert ("Let's remove row " + rowNum); }); /* do some ajax call, etc. */
}
[/code]

When defining aoColumnDefs, use myRender as the fnRender option for one of your columns and you'll get a nice button for removal on each row. You probably want to set bUseRendered, bSearchable and bSortable to false on these ones, depending on your needs.

arturoea

[code]
Index: jquery.dataTables.js
===================================================================
--- jquery.dataTables.js-old
+++ jquery.dataTables.js-new
@@ -1870,8 +1870,13 @@
iVisibleColumn = _fnColumnIndexToVisible( oSettings, iColumn );
if ( iVisibleColumn !== null )
{
- oSettings.aoData[iRow].nTr.getElementsByTagName('td')[iVisibleColumn].innerHTML =
- sDisplay;
+ if (typeof sDisplay == 'object' && sDisplay.jquery)
+ jQuery (oSettings.aoData[iRow].nTr.getElementsByTagName('td')[iVisibleColumn])
+ .empty ()
+ .append (sDisplay);
+ else
+ oSettings.aoData[iRow].nTr.getElementsByTagName('td')[iVisibleColumn].innerHTML =
+ sDisplay;
}
}
else
@@ -1906,8 +1911,13 @@
iVisibleColumn = _fnColumnIndexToVisible( oSettings, i );
if ( iVisibleColumn !== null )
{
- oSettings.aoData[iRow].nTr.getElementsByTagName('td')[iVisibleColumn].innerHTML =
- sDisplay;
+ if (typeof sDisplay == 'object' && sDisplay.jquery)
+ jQuery (oSettings.aoData[iRow].nTr.getElementsByTagName('td')[iVisibleColumn])
+ .empty ()
+ .append (sDisplay);
+ else
+ oSettings.aoData[iRow].nTr.getElementsByTagName('td')[iVisibleColumn].innerHTML =
+ sDisplay;
}
}
}
@@ -2624,7 +2634,12 @@
"aData": aData,
"oSettings": oSettings
} );
- nTd.innerHTML = sRendered;
+ if (typeof sRendered == 'object' && sRendered.jquery)
+ jQuery (nTd)
+ .empty ()
+ .append (sRendered);
+ else
+ nTd.innerHTML = sRendered;
if ( oSettings.aoColumns[i].bUseRendered )
{
/* Use the rendered data for filtering/sorting */
@@ -2811,7 +2826,12 @@
"aData": oSettings.aoData[iRow]._aData,
"oSettings": oSettings
} );
- nCell.innerHTML = sRendered;
+ if (typeof sRendered == 'object' && sRendered.jquery)
+ jQuery (nCell)
+ .empty ()
+ .append (sRendered);
+ else
+ nCell.innerHTML = sRendered;
if ( oSettings.aoColumns[iColumn].bUseRendered )
{
/* Use the rendered data for filtering/sorting */
[/code]

rgavrilov

just what I need. Thank you.

allan

Hi arturoea,

Thanks very much for the patch!

One question though - what is the advatnage of doing it the way above, rather than like this, which won't need the patch?

[code]
function myRender (opts) {
var rowNum = opts.iDataRow;
return $('')
.text ('Remove')
.button ({ icons: { primary: 'ui-icon-trash' }, text: false })
.click (function () { alert ("Let's remove row " + rowNum); })[0]; /* do some ajax call, etc. */
}
[/code]
Regards,
Allan