Can't set table row button text on click

dotnetdevelopr

Probably it is a simple issue but i am missing something. I have a data table which contains a button for each row. When the user clicks button it should change the . I am calling this inside ajax success callback.

Here is the code for column declaration
{
"mData": "IsChecked",
"title": " ",
"className": "dt-body-center",
"mRender": function (data, type, row) {
if (data == true) {
return "<input type='button' class='btn btn-sm btn-success btn' value='UnCheck'>"
}
else
{
return "<input type='button' class='btn btn-sm btn-info btn' value='Check'>"
}
}
}

Here is the button click function

$('#tbltest').on('click', '.btn', function () {

            var tTable = $('#tbltest').DataTable();
            var rowdata = tTable.row($(this).parents('tr')).data();   
           var id = rowdata.id;                             

           $.ajax({
                type: "POST",
                url: "WebServices/myService.asmx/UpdateCheck",
                cache: false,
                contentType: "application/json; charset=utf-8",                    
                data: '{"ID":"' + id+ '","IsCheck":"' + true + '"}',
                dataType: "json",
                success: function (data) {                       ~~~~                     
                    this.innerHTML = "<input type='button' class='btn btn-sm btn-success btn' value='Uncheck'>";                    
                }
            });~~~~

I see the value of the button html is changing but it is not updating in the page.