Editor and fnRowCallback problem
Editor and fnRowCallback problem
Hi
Editor installed and running fine - excellent plugin and definitely recommended.
I am trying to use fnRowCallback to highlight rows depending on the returned values of 1, 2 or 3. I have this working fine in the JSONP.html example (code below which highlights just for a return value of 1 but have had working for all three values) but as soon as try this code when using Editor, fnRowCallback doesnt seem to have an effect.
[code]
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
"ajaxUrl": "php/browsers1.php",
"domTable": "#example",
"fields": [ {
"label": "Species",
"name": "species"
}, {
"label": "Latin",
"name": "Latin"
}, {
"label": "Rare",
"name": "rare"
}, {
"label": "Quantity",
"name": "quantity"
}, {
"label": "Location",
"name": "location"
}, {
"label": "Date",
"name": "date"
}
]
} );
$('#example').dataTable( {
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
/* Append the grade to the default row class name */
if ( aData[2] == "1" ) // so this is looking at row 3 'rare" which returns a value of 1,2, or 3
{
$('td:eq(2)', nRow).html( '' );
}
return nRow;
},
"sDom": "Tfrtip",
"sAjaxSource": "php/browsers1.php",
"iDisplayLength": 50,
"oLanguage": {
"sLengthMenu": 'Display '+
'10'+
'100'+
'All'+
' records'
},
"aoColumns": [
{ "mDataProp": "species" },
{ "mDataProp": "Latin" },
{ "mDataProp": "rare" },
{ "mDataProp": "quantity" },
{ "mDataProp": "location" },
{ "mDataProp": "date" }
],
"oTableTools": {
"sRowSelect": "multi",
"aButtons": [
{ "sExtends": "editor_create", "editor": editor },
{ "sExtends": "editor_edit", "editor": editor },
{ "sExtends": "editor_remove", "editor": editor }
]
}
} );
[/code]
Any ideas would be really appreciated -
Many thanks
Mark
} );
Editor installed and running fine - excellent plugin and definitely recommended.
I am trying to use fnRowCallback to highlight rows depending on the returned values of 1, 2 or 3. I have this working fine in the JSONP.html example (code below which highlights just for a return value of 1 but have had working for all three values) but as soon as try this code when using Editor, fnRowCallback doesnt seem to have an effect.
[code]
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
"ajaxUrl": "php/browsers1.php",
"domTable": "#example",
"fields": [ {
"label": "Species",
"name": "species"
}, {
"label": "Latin",
"name": "Latin"
}, {
"label": "Rare",
"name": "rare"
}, {
"label": "Quantity",
"name": "quantity"
}, {
"label": "Location",
"name": "location"
}, {
"label": "Date",
"name": "date"
}
]
} );
$('#example').dataTable( {
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
/* Append the grade to the default row class name */
if ( aData[2] == "1" ) // so this is looking at row 3 'rare" which returns a value of 1,2, or 3
{
$('td:eq(2)', nRow).html( '' );
}
return nRow;
},
"sDom": "Tfrtip",
"sAjaxSource": "php/browsers1.php",
"iDisplayLength": 50,
"oLanguage": {
"sLengthMenu": 'Display '+
'10'+
'100'+
'All'+
' records'
},
"aoColumns": [
{ "mDataProp": "species" },
{ "mDataProp": "Latin" },
{ "mDataProp": "rare" },
{ "mDataProp": "quantity" },
{ "mDataProp": "location" },
{ "mDataProp": "date" }
],
"oTableTools": {
"sRowSelect": "multi",
"aButtons": [
{ "sExtends": "editor_create", "editor": editor },
{ "sExtends": "editor_edit", "editor": editor },
{ "sExtends": "editor_remove", "editor": editor }
]
}
} );
[/code]
Any ideas would be really appreciated -
Many thanks
Mark
} );
This discussion has been closed.
Replies
Good to hear you are liking using Editor.
That looks generally okay to me - the only thing that stands out is that in fnRowCallback you are using array syntax, but the use of mDataProp suggests that your data source contains objects. So I'm wondering if you want aData.rare in the fnRowCallback if condition?
Allan
Many thanks for the advice - this works a treat. (However, there is another function not working but I will post this in a new thread.)
For anyone interested who may search the forums for the same query, the below code is what I use and works.
var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
"ajaxUrl": "php/browsers1.php",
"domTable": "#example",
"fields": [ {
"label": "Species",
"name": "species"
}, {
"label": "Latin",
"name": "Latin"
}, {
"label": "Rare",
"name": "rare"
}, {
"label": "Quantity",
"name": "quantity"
}, {
"label": "Location",
"name": "location"
}, {
"label": "Date",
"name": "date"
}
]
} );
$('#example').dataTable( {
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
/* Append the grade to the default row class name */
if ( aData.rare == "1" ) // so this is looking at row 3 'rare" which returns a value of 1,2, or 3
{
$('td:eq(2)', nRow).html( '' );
}
if ( aData.rare == "2" ) // so this is looking at row 3 'rare" which returns a value of 1,2, or 3
{
$('td:eq(2)', nRow).html( '' );
}
if ( aData.rare == "3" ) // so this is looking at row 3 'rare" which returns a value of 1,2, or 3
{
$('td:eq(2)', nRow).html( '' );
}
return nRow;
},
"sDom": "Tfrtip",
"sAjaxSource": "php/browsers1.php",
"iDisplayLength": 50,
"oLanguage": {
"sLengthMenu": 'Display '+
'10'+
'100'+
'All'+
' records'
},
"aoColumns": [
{ "mDataProp": "species" },
{ "mDataProp": "Latin" },
{ "mDataProp": "rare" },
{ "mDataProp": "quantity" },
{ "mDataProp": "location" },
{ "mDataProp": "date" }
],
"oTableTools": {
"sRowSelect": "multi",
"aButtons": [
{ "sExtends": "editor_create", "editor": editor },
{ "sExtends": "editor_edit", "editor": editor },
{ "sExtends": "editor_remove", "editor": editor }
]
}
} );
} );
$(document).ready(function(){
$(".tabs").accessibleTabs({
tabhead:'h2',
fx:"show",
fxspeed:null
});
});
Allan