0

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/

PHPDev
  • 139
  • 1
  • 3
  • 12

1 Answers1

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.

Matt Parker
  • 284
  • 1
  • 3
  • Its good.But the actual issue is, Once the button is clicked the whole button should get removed and simply a "Deleted" text should be replaced (only text).or otherwise the button can be disabled would be better. – PHPDev Dec 19 '14 at 06:04
  • Thanks, Excellent solution.I got it... Here's the updated fiddle http://jsfiddle.net/ejx3zex3/3/. Good work @Matt Parker. – PHPDev Dec 19 '14 at 07:36