reorder server side data using aoColumnDefs

madmike

Hi,

I'm searching how to re order colum on the display from a server-side source. I see on the doc it look like a just need to reorder the list in the aoColumnDefs array. Is it only that ? Do I need to change target value too ?

See on the following example :
[code]
"aoColumnDefs": [
{ "sName": "id", "aTargets": [ 0 ], "sType": "numeric","sWidth": "40px", "sClass": "ClickClass id-col", "bSearchable": true,"bVisible": true },
{ "sName": "supplier", "aTargets": [ 1 ], "sType": "numeric","sSortDataType": "dom-select", "sWidth": "80px", "sClass": "ClickClass supplier-col", "bSearchable": false,"bVisible": false },
{ "sName": "products_sku", "aTargets": [ 2 ], "sType": "string","sClass": "ClickClass products_sku-col", "bSearchable": true,"bVisible": true },
{ "sName": "product_mkt", "aTargets": [ 3 ], "sType": "html","sClass": "ClickClass product_mkt-col", "bSearchable": false,"bVisible": false },
{ "sName": "products_description", "aTargets": [ 4 ], "sType": "html","sClass": "ClickClass products_description-col", "bSearchable": false,"bVisible": false },
{ "sName": "quantity", "aTargets": [ 5 ], "sType": "numeric","sWidth": "40px", "sClass": "NoClickClass quantity-col editable", "bSearchable": true,"bVisible": true },
{ "sName": "model", "aTargets": [ 6 ], "sType": "string","sClass": "NoClickClass model-col editable", "bSearchable": true,"bVisible": true },
{ "sName": "products_image", "aTargets": [ 7 ], "sType": "html","sClass": "ClickClass products_image-col", "bSearchable": false,"bVisible": false }
]
[/code]

If I want to display supplier before id, I can reverse order only like that ?
[code]
"aoColumnDefs": [
{ "sName": "supplier", "aTargets": [ 1 ], "sType": "numeric","sSortDataType": "dom-select", "sWidth": "80px", "sClass": "ClickClass supplier-col", "bSearchable": false,"bVisible": false },
{ "sName": "id", "aTargets": [ 0 ], "sType": "numeric","sWidth": "40px", "sClass": "ClickClass id-col", "bSearchable": true,"bVisible": true },
{ "sName": "products_sku", "aTargets": [ 2 ], "sType": "string","sClass": "ClickClass products_sku-col", "bSearchable": true,"bVisible": true },
{ "sName": "product_mkt", "aTargets": [ 3 ], "sType": "html","sClass": "ClickClass product_mkt-col", "bSearchable": false,"bVisible": false },
{ "sName": "products_description", "aTargets": [ 4 ], "sType": "html","sClass": "ClickClass products_description-col", "bSearchable": false,"bVisible": false },
{ "sName": "quantity", "aTargets": [ 5 ], "sType": "numeric","sWidth": "40px", "sClass": "NoClickClass quantity-col editable", "bSearchable": true,"bVisible": true },
{ "sName": "model", "aTargets": [ 6 ], "sType": "string","sClass": "NoClickClass model-col editable", "bSearchable": true,"bVisible": true },
{ "sName": "products_image", "aTargets": [ 7 ], "sType": "html","sClass": "ClickClass products_image-col", "bSearchable": false,"bVisible": false }
]
[/code]

Thanks for your help.

allan

You can use aoColumns or aoColumnDefs - it makes little difference as long as you specify what is needed.

As to that, you use mData to tell DataTables what data to use for each column. But default it uses the column index, but you can change it to anything you want (multiple columns could share the same data for example - although a little pointless). Its a bit easier if you use objects, but exactly the same for arrays - just with integers rather than strings!

There is a blog post here which describes in more details how mData works: http://datatables.net/blog/Extended_data_source_options_with_DataTables

Regards,
Allam

madmike

Thanks Allan,

In my case the syntax must be :

[code]
"aoColumnDefs": [
{ "sName": "supplier", "mData": [ 0 ], "aTargets": [ 1 ], "sType": "numeric","sSortDataType": "dom-select", "sWidth": "80px", "sClass": "ClickClass supplier-col", "bSearchable": false,"bVisible": false },
{ "sName": "id", "mData": [ 1 ], "aTargets": [ 0 ], "sType": "numeric","sWidth": "40px", "sClass": "ClickClass id-col", "bSearchable": true,"bVisible": true },
etc.
[/code]

if I want supplier, id, etc... ?

allan

sName isn't actually used for very much at the moment - it will be in 1.10 when you can use it to identify columns in the API, but not currently.

Also mData cannot be an array, so I suspect that might be throwing an error somewhere.

What does your returned JSON look like?

Regards,
Allan