Unable to re-order columns with aoColumns

samy_r

Hi
I'm actually trying to display columns of an AJAX source in a different order from the "AJAX returned order" (and hiding some columns).

So I use the following options :
[code]
var DT_settings = {
"aoColumns" : [

{"sName" :"diff_id"},
{"sName" :"be_identite"},
{"sName" :"diff_is_listed"},
{"sName" :"xprtc_id"},
{"sName" :"xprtc_est_refere"},
{"sName" :"xprtc_nbcaninsvivants"},
{"sName" :"xprtc_nbmess_1an"},
{"sName" :"coordprincipalmail"},
{"sName" :"coordprincipalsms"},
{"sName" :"xprtc_last_visite"},
{"sName" :"be_villeadv"},
{"sName" :"be_cpadv"},
{"sName" :"xprtc_remark"},
{"sName" :"xprtc_comment"}
],
"aoColumnDefs": [
{
"fnRender": function ( oObj ) {
if (!diff_selections[oObj.aData[5]]) {
// var obj = {};
// obj[oObj.aData[5]] = oObj.aData[0];
// $.extend(diff_selections,obj);
diff_selections[oObj.aData[5]] = oObj.aData[0];
}
if (parseInt(oObj.aData[0])==1) {
return "";
} else {
return "";
}
},
"bUseRendered": false,
"aTargets": [ 0 ]
}
],
"aaSorting": [[ 1, "asc" ]],
};
[/code]
(the fnRender custom function is use to display a checkbox on the first column)

I also initialize the DataTables component with these options :

[code]
base_settings = {
"bProcessing": true,
"bJQueryUI": true,
"sAjaxSource": webServices[ws_name].url,
"fnServerData": function ( sSource, aoData, fnCallback ) {
/* Add some extra data to the sender */
aoData.push( sendedData );
$.ajax({
type:'POST',
url: sSource+'&test',
dataType: 'jsonp',
//data:aoData,
async:false,
jsonp:'function',

success: function (json) {
/* Do whatever additional processing you want on the callback, then tell DataTables */
fnCallback(json);
returnedData = json;
}
});
}
};
[/code]

But the DataTables displays all my columns, not reordered or hidden. Can you help me ? (I can provide you via PM a test URL)

numberone

you can add sColumns defination to your json

[code]
{
"sEcho":1,
"iTotalRecords":"blablabla",
"iTotalDisplayRecords":"blablabla",
"aaData":[blablabla],
// add it here..
"sColumns":"diff_id, be_identite, diff_is_listed, xprtc_id, ... and so on ..."
}
[/code]

Regards,
Yusuf

samy_r

Sorry but I already have sColumns definition on my JSON but it doesn't work :(

allan

From your initialisation code, you aren't using server-side process - but rather just Ajax sourced data. That's fine, but at the moment DataTables doesn't support column reordering with sName for Ajax sourced data. I will have a look at adding this - added to the to-do list :-)

Allan

samy_r

I will retry using bServerSide at "true" (thanks!)

allan

This might actually be an ideal situation for one of the new features in 1.8 beta 1. Have a look at this post: http://datatables.net/blog/Extended_data_source_options_with_DataTables . With 1.8 you can give any order, or you can pass it an array of objects, which might be even easier.

Regards,
Allan

samy_r

So, if I understand, if I use mDataProp with the 1.8b1, I should be able to client-side reorder my columns? I will try it ASAP !

allan

Yup :-)

For example, if you have an array of arrays for your data source (which you do), of three columns (which you don't) and you wanted to reverse the three columns in the array (you will want a bit more complex implementation I think!) - then you could do this:

[code]
$('#example').dataTable( {
"aoColumns": [
{ "mDataProp": 2 },
{ "mDataProp": 1 },
{ "mDataProp": 0 }
]
} );

[/code]
mDataProp can be an integer (for reading array indexes) or a string for reading object properties).

Regards,
Allan

samy_r

In fact, I want to display less columns than in the aaData, and not on the same order :)

samy_r

So, using 1.8b1, can I use the bVisible property, in combination with mDataProp ?

allan

Certainly can - although remember that mDataProp will always refer to the original data array (i.e. the indexes don't change because of the visibility in the source array).

Allan

samy_r

No problem, I know the original array order and the target array order (and they will not change).

I test it ASAP !

Thanks !

samy_r

I just tried your solution and it works perfectly !

And, as the cherry on the cake, I don't need to specify which columns I want to hide : if I declare 5 columns in aoColumns, using mDataProp, only 5 columns will be shown !

Thanks for all, you made my day !