Having problem with sorting after fnUpdate()

dexity

As a transition from jqGrid I wanted to use the same format from ajax request but replace it by DataTables on the front end.
The standard jqGrid json response looks like:
[code]
{
rows: [
{
cell: [
some_id,
"Some URL",
"Some title",
"user1",
"user2",
"",
"Some data",
some_number,
"Comment"
]
}
// Other cells
]
}
[/code]

The datatable code looks like:

[code]
oTable = $('#my_table').dataTable( {
"sAjaxSource": ajax_url,
"bDestroy": true,
"sDom": "rt<'row'<'span3 padding_top_5'l><'span3'i><'span6'p>>",
"sAjaxDataProp": "rows",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page"
},
"iDisplayLength": 25,
"fnCreatedRow": function( nRow, aData, iDataIndex ) {
// Row specific settings
},
"fnInitComplete": function(oSettings, json) {
// Callback when table loading is complete
},
"aoColumns": [
{"mDataProp": "cell.2"},
{"mDataProp": "cell.3"},
{"mDataProp": "cell.4"},
{"mDataProp": "cell.5"},
{"mDataProp": "cell.6"},
{"mDataProp": "cell.7", "bSortable": false},
{"mDataProp": "cell.8"},
{"mDataProp": null, "sDefaultContent": "", "bSortable": false}
],
// Format cells
"aoColumnDefs": [ {
"aTargets": [0],
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
// Format cell 0
}
},
{
"aTargets": [1, 2],
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
// Format cells 1 and 2
}
},
{
"aTargets": [4],
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
// Format cell 4
}
},
{
"aTargets": [5],
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
// Format cell 5
}
},
{
"aTargets": [7],
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
// Format cell 7
}
}
]
} );
[/code]

When I edit the row I am trying to update the cells in the row:

[code]
function update_row(some_id)
{
$.get(ajax_url,
function(data){
if ("rows" in data && data["rows"].length > 0) {
cell = data["rows"][0]["cell"];
row = $("#"+some_id);
rowPos = oTable.fnGetPosition(row[0]);

oTable.fnUpdate(format_column_0(), rowPos, 0);
oTable.fnUpdate(format_column_1(), rowPos, 1);
oTable.fnUpdate(format_column_2(), rowPos, 2);
oTable.fnUpdate(format_column_3(), rowPos, 3);
oTable.fnUpdate(format_column_4(), rowPos, 4);
oTable.fnUpdate(format_column_6(), rowPos, 6);
}
});
}
[/code]

When I update the cells in the row, it pops up the edited row to the top. I tried to redraw the table with oTable.fnDraw() but the sorting by the first column is broken. I tried oTable.fnSort([[0, "asc"]]) but no luck. Why does it pop the edited row to the top? Some kind of problem with internal sorting or indexing?

Thanks for help,
Alex

allan

Hi Alex,

I don't see anything obvious that is going to trip that up - it looks like it should work okay. Are you able to give us a link to the page so we can see what is happening please? Are you getting any script errors on the console?

Allan

dexity

Hi, Allan.

There is no error in the console. My guess will be be that the problem is because the source has kind of weird format: {"rows": "cell": [...]}. I tried to update the whole row with fnUpdate() using something like:

[code]
columns = [
some_id,
"Some URL",
"Some title",
"user1",
"user2",
"",
"Some data",
some_number,
"Comment"
];
oTable.fnUpdate(columns);
[/code]
But it will throw an error:

[code]
DataTables warning (table id = 'my_table'): Requested unknown parameter 'cell.2' from the data source for row 2
[/code]

I was able to get rid of this error by changing the columns structure:

[code]
columns = {"cell": [
some_id,
"Some URL",
"Some title",
"user1",
"user2",
"",
"Some data",
some_number,
"Comment"
]};
[/code]
So may be the problem with sorting is because of the weird format?

dexity

I solved this problem. In case someone will have similar issue I will describe the solution.

To format cell I used "fnCreatedCell" callback. Instead I should have used "fnRender" callback. When I updated cell using fnUpdate() I passed link "Some Text" and it updated _aSortData array and set the full link instead of "Some Text". Clearly, "<" character is heigher in sorting order than "a" character and popped it up.

So here is the updated working code:

[code]
oTable = $('#my_table').dataTable( {
"sAjaxSource": ajax_url,
"bDestroy": true,
"sDom": "rt<'row'<'span3 padding_top_5'l><'span3'i><'span6'p>>",
"sAjaxDataProp": "rows",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page"
},
"iDisplayLength": 25,
"fnCreatedRow": function( nRow, aData, iDataIndex ) {
// Row specific settings
},
"fnInitComplete": function(oSettings, json) {
// Callback when table loading is complete
},
"aoColumns": [
{"mDataProp": "cell.2"},
{"mDataProp": "cell.3"},
{"mDataProp": "cell.4"},
{"mDataProp": "cell.5"},
{"mDataProp": "cell.6"},
{"mDataProp": "cell.7", "bSortable": false},
{"mDataProp": "cell.8"},
{"mDataProp": null, "sDefaultContent": "", "bSortable": false}
],
// Format cells
"aoColumnDefs": [ {
"aTargets": [0],
"fnRender": function (o, val) {
return format_column_0();
},
"bUseRendered": false
},
{
"aTargets": [1, 2],
"fnRender": function (o, val) {
return format_column_2();
},
"bUseRendered": false
},
{
"aTargets": [4],
"fnRender": function (o, val) {
return format_column_4();
},
"bUseRendered": false
},
{
"aTargets": [5],
"fnRender": function (o, val) {
return format_column_5();
},
"bUseRendered": false
},
{
"aTargets": [7],
"fnRender": function (o, val) {
return format_column_7();
},
"bUseRendered": false
}
]
} );

[/code]

[code]
function update_row(some_id)
{
$.get(ajax_url,
function(data){
if ("rows" in data && data["rows"].length > 0) {
cell = data["rows"][0]["cell"];
row = $("#"+some_id);
rowPos = oTable.fnGetPosition(row[0]);

oTable.fnUpdate(cell[2], rowPos, 0);
oTable.fnUpdate(cell[3], rowPos, 1);
oTable.fnUpdate(cell[4], rowPos, 2);
oTable.fnUpdate(cell[5], rowPos, 3);
oTable.fnUpdate(cell[6], rowPos, 4);
oTable.fnUpdate(cell[8], rowPos, 6);
}
});
}
[/code]