Having problem with sorting after fnUpdate()

Having problem with sorting after fnUpdate()

dexitydexity Posts: 3Questions: 0Answers: 0
edited August 2012 in DataTables 1.9
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

Replies

  • allanallan Posts: 63,397Questions: 1Answers: 10,451 Site admin
    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
  • dexitydexity Posts: 3Questions: 0Answers: 0
    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?
  • dexitydexity Posts: 3Questions: 0Answers: 0
    edited August 2012
    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]
This discussion has been closed.