YUI 2.8.2 datatable sorts old value after a client side button click action is done

Question

I am using YUI datatable 2.8.2. I need to click the delete button and an ajax request goes, after success response, the clicked delete button should be replaced into "Deleted" text.But when I sort any column the "Deleted" text disappears, as the old data gets sorted. By default all the button text should be "Delete?". Any help??

Ref :

// Create a new YUI instance and populate it with the required modules.

YUI().use('node', function (Y) { Y.one('body').addClass('yui-skin-sam'); });

http://jsfiddle.net/ejx3zex3/1/

Answer 1

The reason why is that when you sort the table, it re-renders itself. When someone clicks the button, it doesn't change any state (ie anything about the underlying data), you are just changing the innerHTML of the cell. When the re-render happens, the existing content is overwritten by the underlying data.

So to do what you want, you need to create a field for the 'is this deleted' data, and update it's value when someone clicks the button. The render function for that column would then look at the 'is this deleted' value and show either 'Delete' or 'Deleted' depending on the value.

Something like this: http://jsfiddle.net/ejx3zex3/2/

The main thing is to add a deleted key/field:

var myColumnDefs = [{
        key: "deleted",
        formatter: function (el, oRecord, oColumn, oData) {
            el.innerHTML = "<button type=\"button\" class=\"yui-dt-button\">Delete" + (oData ? "d" : "") + "</button>";
        },
        "label": "Delete?"
    }, 

It's still not ideal but hopefully enough to get you on the way.

Incidentally, I assume you know that YUI2 has been deprecated for a few years, and YUI3 was EOLed this year.