Problem when I render a column.

marruek

Hello all.

I use datable some time ago and have been a great plugin in the work. Well, I have a little issue.
I have an array ready to set it to the datable, also I have defined some features for each column, but when I'm rendering the data some column doesn't show the data, instead it shows another column, even when I return the data according to the index that I want to show.

As you can see in the code below, it should show:
the 0 column the ID,
the 1st the name,
the 2nd the another id,
the 3th the login,
the 4th the mail,
the 5th the number phone
the 6th the state.

But by some reason that i can't understand the code show me:
the 0 column the ID,
the 1st the name,
the 2nd the another id,
the 3th the name, <------
the 4th the mail,
the 5th the number phone
the 6th the state.

It repeats the column name (return oObj.aData[2]), even though when I set the column target and the oObj.aData[index].

This is my code, please some help, any advice? It would be great to fix this issue please.
[code]



id
Nombre
Rut
Login
Mail
Anexo
Estado







var aListaTodos = [
['183', 'aarayap', 'Alejandra Araya Palacios', '5786313-5', 'aarayap@mail.cl', '259', '1'],
['198', 'amiranda', 'Alejandra Miranda Mondaca', '', 'amiranda@mail.cl', '364', '1'],
['66', 'APizarro', 'Alejandra Pizarro Diaz', '', 'APizarro@mail.cl', '356', '1'],
['140', 'AVega', 'Alejandra Vega Echeverria', '16581412-9', 'AVega@mail.cl', '264', '1'],
['166', 'aortega', 'Alejandro Ortega Macias', '', 'aortega@mail.cl', '265', '1']
];

var oTable;
var aListaTodos = <?= $aUsuarios; ?>;
oTable = $('#tablaListarTodos').dataTable({
"aaData": aListaTodos,
"sPaginationType": "full_numbers",
"aoColumnDefs": [
{
"fnRender": function ( oObj ) { return oObj.aData[0];},
"sClass": "right",
"aTargets": [ 0 ],
"bSortable": true,
"bUseRendered": true
},{
"fnRender": function ( oObj ) { return oObj.aData[2];},
"sClass": "left",
"aTargets": [ 1 ],
"bSortable": true,
"bUseRendered": true
},{
"fnRender": function ( oObj ) { return oObj.aData[3];},
"sClass": "right",
"aTargets": [ 2 ],
"bSortable": true,
"bUseRendered": true
},{
"fnRender": function ( oObj ) { return oObj.aData[1];},
"sClass": "left",
"aTargets": [ 3 ],
"bSortable": true,
"bUseRendered": true
},{
"fnRender": function ( oObj ) { return oObj.aData[4];},
"sClass": "left",
"aTargets": [ 4 ],
"bSortable": true,
"bUseRendered": true
},{
"fnRender": function ( oObj ) { return oObj.aData[5];},
"sClass": "right",
"aTargets": [ 5 ],
"bSortable": true,
"bUseRendered": true
},{
"fnRender": function ( oObj ) {
if(oObj.aData[6] == 1)
return 'Activo';
else
return 'Desactivo';
},
"sClass": "center",
"aTargets": [ 6 ],
"bSortable": true,
"bUseRendered": true
}]
});


[/code]

Sorry my mistakes, I'm from Chile.

Best regards.
Cesar

fbas

By calling fnRender, you over-write the data held in DataTables. The values in DT's copy of aListaTodos are changed by the render process.

A better approach would be to output your array in the same order you expect to show them on the table

OR

refactor your aListaTodos as an array of objects and use mDataProp in the datatable intializer

[code]
var aListaTodos = [
{ id: '183',
login: 'aarayap',
nombre :'Alejandra Araya Palacios',
rut: '5786313-5',
mail: 'aarayap@mail.cl',
anexo: '259',
estado: '1'},

];


//////////////////


"aoColumnDefs": [
{
"mDataProp": "id",
"sClass": "right",
"aTargets": [ 0 ],
"bSortable": true,
"bUseRendered": true
},{
"mDataProp": "nombre",
"sClass": "left",
"aTargets": [ 1 ],
"bSortable": true,
"bUseRendered": true
},{
"mDataProp": "rut",
"sClass": "right",
"aTargets": [ 2 ],
"bSortable": true,
"bUseRendered": true
},
// etc

[/code]

marruek

Thank you very for your answer. I didn't know that render function changed the values in DT. It is a very important information.

I like the option using mDataProp, but what about when you want to make some refactor with the answer, I mean, for example, when a column data is the result of the sum of other 2 columns?
I think that we could do that in the back-end and not in the front-end (javascript) of the app.

Thank you, I'll try your advice.

Regards,
Cesar

fbas

I'm not sure what you mean about combining more than one column:

[quote]marruek said: but what about when you want to make some refactor with the answer, I mean, for example, when a column data is the result of the sum of other 2 columns?[/quote]

As you indicated, you would probably be better off performing that on the back-end. You probably could perform that on the front-end with fnRender - I don't think fnRender will affect the data values if you've used mDataProp .

A good way to approach fnRender is to use it only to dress up the rendering of your content (i.e. wrap a link around a value, or format a number with commas, reform at a date), but not fundamentally change the values in your data - and certainly not change anything destructively that would affect other columns. Also be careful of changing anything that would affect the sorting/filtering routines for that data; you could set bUseRendered: false to use the original un-rendered value with the sorting/filtering routines.

I may be wrong, but I think that the data is handled differently for mDataProp/object situations than it is for the array form of your data (AND because you were using bUseRendered: true). If my guess is correct, you could use front-end processing with fnRender without affecting the data held in DataTables when using mDataProp. (I don't have time to test this or look through the code - you could test a little to find out pretty quickly.)

Allan?

allan

If I understand correctly, you could set bUseRendered to false - this would keep the original data in DataTables internally, but show the rendered string in the table.

> I may be wrong, but I think that the data is handled differently for mDataProp/object situations than it is for the array form of your data

Actually - it should be handled the same way. The object property should be written to the same as an array index if it is being rendered.

What might be really useful here (and more what you want) is to use mDataProp as a function, rather than using fnRender. This will leave the original data as it is, but the function will be called whenever DataTables needs the value of the cell. So for example:

[code]
oTable = $('#tablaListarTodos').dataTable({
    "aaData": aListaTodos,
    "sPaginationType": "full_numbers",
    "aoColumnDefs": [
                    {
                        "mDataProp": function ( o ) { return o.prop1; },
                        "sClass": "right",
                        "aTargets": [ 0 ],
                        "bSortable": true
                    },{
                    ...
[/code]

Having said that - looking at the original question again - I would just use mDataProp as a string (use a JSON source with an array of objects rather than an array of arrays) to access the data, rather than mucking around with fnRender etc.

For example:

[code]
oTable = $('#tablaListarTodos').dataTable({
    "aaData": aListaTodos,
    "sPaginationType": "full_numbers",
    "aoColumnDefs": [
                    {
                        "mDataProp": 'id',
                        "sClass": "right",
                        "aTargets": [ 0 ],
                        "bSortable": true
                    },{
                    ...
[/code]

Allan