Column just won't sort

Column just won't sort

mesterakmesterak Posts: 6Questions: 0Answers: 0
edited June 2011 in General
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]

Replies

  • allanallan Posts: 63,400Questions: 1Answers: 10,452 Site admin
    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
  • mesterakmesterak Posts: 6Questions: 0Answers: 0
    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.
  • mesterakmesterak Posts: 6Questions: 0Answers: 0
    edited June 2011
    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!!!
  • allanallan Posts: 63,400Questions: 1Answers: 10,452 Site admin
    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! :-)
  • mesterakmesterak Posts: 6Questions: 0Answers: 0
    Thanks again Allan. :)
This discussion has been closed.