Column just won't sort

mesterak

My table initially has a column that has the same value in every row, which is the string "TBD" without the quotes. Via a jQuery ajax call, I update the value in that column with a valid workweek string; i.e. WW24.2, for every row after the page loads. For the life of me, the column will not sort when I click on the column header. Even if i call fnDraw, the column still is not sorted when I click on the column header.

Any suggestions would be greatly aprpeciated.

Thanks,

Matt

Here is an example table where the column with the class colECD will not sort after I change the value (in each row) via an ajax call to a page web method that returns the updated value:

[code]




Priority


Domain


Product / Item


Type


   Project Details


ECD


Product Owner

Product Manager






1 - High


Apps


Dunbar


Project









Project: Dunbar Proliferation






Status Summary: Work with partners and developer to have
the app proliferated.


Project Status: On-Track


TBD


PO: John Doe

PM: Phil Up








2 - Medium


Apps


MyApp


Project









Project: MyApp Proliferation






Status Summary: Work with partners and developer to have
the app proliferated.


Project Status: On-Track


TBD


PO: Joe Smoe

PM: Jane Doe








[/code]

allan

How are you updating the value in the cell? You need to do it using fnUpdate ( http://datatables.net/api#fnUpdate ) to "tell" DataTables about the new value.

Allan

mesterak

I was getting the value via the ajax call to the page web method, locating the element via it's ID; i.e. ecd557, and then using jQuery to change the value.

mesterak

Using fnGetPosition and fnUpdate, I was successful in getting the column to update and sort correctly. The lazy loading I do is performed in a function called via a setTimeout call at the end of page load.

I hope others using ASP.NET & jQuery will benefit from this solution.

Here is the JavaScript code that details the use of the fnGetPosition and fnUpdate method calls that are working grand now:

[code]
var isLazyLoading = false;

function LazyLoadMilestones() {

if (!isLazyLoading) {
isLazyLoading = true;
var oTable = $('.InfoTable:first').dataTable();

$('.InfoTable > tbody > tr:visible').each(function () {
var item = $(this).find('.itemMilestones:first');
var id = item.attr('id');

if (item.hasClass('load')) {
item.removeClass('load');

$.ajax({
type: "POST",
url: "ProjectTrackerServices.asmx/FetchMilestones",
data: "{ itemId: ' " + id + " ' }",
async: true,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
var ecd;
var html;

if (msg.hasOwnProperty('d'))
html = $.base64Decode(msg.d);
else
html = $.base64Decode(msg);

var ind = html.indexOf('#');
ecd = html.substring(0, ind);
html = html.substring(ind + 1);

$('#' + id).html(html);

var aPos = oTable.fnGetPosition($('#ecd' + id).parent()[0]);
oTable.fnUpdate(ecd, aPos[0], aPos[1]);
$('#ecd' + id).text(ecd);
}
});

}

});

isLazyLoading = false;
}

}

setTimeout(LazyLoadMilestones, 1000);
[/code]

Thanks a million Allan!!!

allan

Nice one - good to hear you got it sorted (boom boom!) and thanks for sharing your code!

Allan

p.s. I edited your post to add syntax highlighting - hope you don't mind. I'll get around to adding formatting instructions for how to code that to the new forum shortly! :-)

mesterak

Thanks again Allan. :)