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

Update: Examples - remove all reference of fnRender, instead granting preference to mRender.

Browse Source
This commit is contained in:
Allan Jardine 2012-09-09 12:05:37 +01:00
parent 880de42c6e
commit f6401f062a
3 changed files with 15 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
examples/advanced_init/column_render.html
View File

@ -16,8 +16,11 @@
$('#example').dataTable( {
"aoColumnDefs": [
{
"fnRender": function ( oObj, sVal ) {
return sVal +' '+ oObj.aData[3];
// `data` refers to the data for the cell (defined by `mData`, which
// defaults to the column being worked with, in this case is the first
// Using `row[0]` is equivalent.
"mRender": function ( data, type, row ) {
return data +' '+ row[3];
},
"aTargets": [ 0 ]
},
@ -35,7 +38,8 @@
</div>
<h1>Preamble</h1>
<p>You may specify a function for each column to render the available data in a specific manner which will be called when the table is drawn. In this example I've appended the rendering engine version to the rendering engine name in the first column, and hidden the version column.</p>
<p>Each column has an optional rendering control called <a href="http://datatables.net/ref#mRender">mRender</a> which can be used to process the content of each cell before the data is used. <code>mRender</code> has a wide array of options available to it for rendering different types of data (sorting, filtering, display etc), but it can be used very simply to manipulate the content of a cell, as shown here.</p>
<p>This example shows the rendering engine version combined with the rendering engine name in the first column, hiding the version column. This technique can be useful for adding links, assigning colours based on content rules and any other form of text manipulation you require.</p>
<h1>Live example</h1>
<div id="demo">
@ -469,8 +473,11 @@
$('#example').dataTable( {
"aoColumnDefs": [
{
"fnRender": function ( oObj, sVal ) {
return sVal +' '+ oObj.aData[3];
// `data` refers to the data for the cell (defined by `mData`, which
// defaults to the column being worked with, in this case is the first
// Using `row[0]` is equivalent.
"mRender": function ( data, type, row ) {
return data +' '+ row[3];
},
"aTargets": [ 0 ]
},

2
examples/advanced_init/row_callback.html
View File

@ -36,7 +36,7 @@
</div>
<h1>Preamble</h1>
<p>The following example shows how a callback function can be used to format a particular row at draw time. For each row that is generated for display, the <b>fnRowCallback()</b> function is called. It is passed the row node which can then be modified. In this case a trivial example of making the 'grade' column bold if the grade is 'A' is shown (note that this could also be performed using the <b>fnRender()</b> function, but this is just for example).</p>
<p>The following example shows how a callback function can be used to format a particular row at draw time. For each row that is generated for display, the <b>fnRowCallback()</b> function is called. It is passed the row node which can then be modified. In this case a trivial example of making the 'grade' column bold if the grade is 'A' is shown (note that this could also be performed using <a href="http://datatables.net/ref#mData">mData</a> as a function, but this is just for example of fnRowCallback!).</p>
<h1>Live example</h1>
<div id="demo">

24
examples/data_sources/js_array.html
View File

@ -82,17 +82,7 @@
{ "sTitle": "Browser" },
{ "sTitle": "Platform" },
{ "sTitle": "Version", "sClass": "center" },
{
"sTitle": "Grade",
"sClass": "center",
"fnRender": function(obj) {
var sReturn = obj.aData[ obj.iDataColumn ];
if ( sReturn == "A" ) {
sReturn = "<b>A</b>";
}
return sReturn;
}
}
{ "sTitle": "Grade", "sClass": "center" }
]
} );
} );
@ -136,17 +126,7 @@
{ "sTitle": "Browser" },
{ "sTitle": "Platform" },
{ "sTitle": "Version", "sClass": "center" },
{
"sTitle": "Grade",
"sClass": "center",
"fnRender": function(obj) {
var sReturn = obj.aData[ obj.iDataColumn ];
if ( sReturn == "A" ) {
sReturn = "&lt;b&gt;A&lt;/b&gt;";
}
return sReturn;
}
}
{ "sTitle": "Grade", "sClass": "center" }
]
} );
} );</pre>