How to sort by rendered data?

datoism

I want to display details of registered users. The result i get in js for a row is given below.

http://i.imgur.com/sOTCb9d.png

What i need is to display 'companyName' in a column which is in object 'company'.


Code i tried

first case:

[code] {"mDataProp":"company.companyName", "sWidth" :"100px",
"fnRender": function( oObj ) {
if(oObj.aData.company != null)
return oObj.aData.company.companyName;
else
return "";
}
} [/code]

But in the above case if company is null for a user that user's details is not shown in datatable.

second case:


[code] {"mDataProp":"company", "sWidth" :"100px",
"fnRender": function( oObj ) {
if(oObj.aData.company != null)
return oObj.aData.company.companyName;
else
return "";
}
} [/code]

In this all data is shown and companyName column is empty for emty company but the companyName column sort is not working, it sorts as the company object.

Any solutions?

allan

Don't use fnRender (it is deprecated and will be removed in 1.10). Use mRender which allows the use of orthogonal data like you are looking for - http://datatables.net/blog/Orthogonal_data

Allan

datoism

@allan, i've tried mRender too.

case 1: rows with companyName null is not showing

[code]
{"mDataProp":"company.companyName","sWidth" : "100px",
"mRender": function( data, type, val ) {
if(data!= null)
return data;
else
return "";
} }[/code]


case 2: rows are showing correctly, but sorting happens with object(company) and not companyName.

[code]
{"mDataProp":"company","sWidth" : "100px",
"mRender": function( data, type, val ) {
if(data!= null)
return data.companyName;
else
return "";
} }[/code]

can u explain the parameters type and val? what are they used for?

tangerine

The details are in the docs.
http://www.datatables.net/ref#mRender

allan

That does actually look like it should work to me. Can you link to a test case please?

Allan

datoism

test case? how can i make one?

my whole code for the table.
[code]
oUserTable = $('#user-table').dataTable(
{

"sAjaxSource" : "loadUserTable.html",
"bServerSide" : true,
"bProcessing": true,
"aoColumns":[
{"mDataProp":"login","sWidth" : "100px"},
{"mDataProp":"company","sWidth" : "100px",
"mRender": function( data, type, val ) {
if(data!= null)
return data.companyName;
else
return "";
} },
{"mDataProp":"firstName","sWidth" : "100px"},
{"mDataProp":"lastName","sWidth" : "100px"},
{"mDataProp":"country.countryName","sWidth" : "100px"},
{"mDataProp":"city","sWidth" : "100px"},
{"mDataProp":"state","sWidth" : "100px"},
{"mDataProp":"referredBy","sWidth" : "100px"},
{"mDataProp":"phone","sWidth" : "130px"},
{"mDataProp":"mobile","sWidth" : "130px"},
{"mDataProp":"email","sWidth" : "270px"},
{"mDataProp":"taxId","sWidth" : "100px"},
{"mDataProp":"locked","sWidth" : "50px","fnRender" : function(oObj) {
var locked="Unlocked";
if(oObj.aData.locked=='T') {
locked="Locked";
}
return locked;
}},
{"mDataProp":"userType","sWidth" : "50px","fnRender" : function(oObj) {
var locked=""
if(oObj.aData.userType=='asp') {
locked="Issuer";
}else if(oObj.aData.userType=='iinv') {
locked="Institutional Investor";
}else if(oObj.aData.userType=='ainv') {
locked="Accredited Investor";
}else if(oObj.aData.userType=='ic') {
locked="IC Member";
}else if(oObj.aData.userType=='banker') {
locked="Banker";
}else if(oObj.aData.userType=='admin') {
locked="Admin";
}
return locked;
}},
{"mDataProp":"affiliateName","sWidth" : "120px"},
{"mDataProp":"phoneCountryCode","bVisible" : false},
{"mDataProp":"mobileCountryCode","bVisible" : false},
{"mDataProp":"receivedNDA","bVisible" : false},
{"mDataProp":"userAgreement","bVisible" : false}
],
"fnRowCallback" : function(nRow, aData, iDisplayIndex) {
if (aData.country.Country_Code == 'US' || aData.country.Country_Code == 'CA') {
var formattedPhone = aData.phone.replace(
/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');
$('td:eq(8)', nRow).html(
aData.phoneCountryCode + " " + formattedPhone);
} else {
$('td:eq(8)', nRow).html(aData.phoneCountryCode + " " + aData.phone);
}
if (aData.mobileCountryCode != null) {
$('td:eq(9)', nRow).html(aData.mobileCountryCode + " " + aData.mobile);
}
return nRow;
},

"aaSorting" : [ [ 18, "asc" ] ],
"sScrollY": "280px",
"sScrollX": "100%",
"sPaginationType" : "full_numbers",
"sDom" : '<"top"l>rt<"bottom"ip>'
});

[/code]

the whole code. everything else except the companyName column is working. what i need is a blank field in companyName column if the object company is null.

allan

Just linking to the page you are working on would be ideal, or using JSFiddle or http://live.datatables.net .

Allan