How To Update An HTML Table Through AJAX Call?

Guys I have a html table in my ASP.net MVC home view. Now the table is being filled initially through the data present in model. Now upon clicking certain buttons on the homepage,

Solution 1:

I have solved my problem by the following code

function GetStatusWise(control, departCode) {
    $.ajax(
        {
            type: "GET",
            url: WebApiURL + ".....URL...." + departCode,
            dataType: "json",
            crossDomain: true,
            async: true,
            cache: false,
            success: function (data) {
                var srno = 1;
                $('#tblPendingHrResponse').find($('.trTblPendingHrResponse')).remove();

                $.each(data.data, function (index, value) {
                    random(value, srno);
                    srno++;
                });
            },
            error: function (x, e) {
                alert('There seems to be some problem while fetching records!');
            }

        }
    );
}

.

function random(values, srno) {
        var daydifference = values.DayDifference == 1 ? '<td>' + values.DayDifference + ' day </td>' : '<td>' + values.DayDifference + ' days </td>';

        var tr = '<tr class="trTblPendingHrResponse">' +
        '<td>' + srno + '</td>' +
        '<td>' + values.CandidateName + '</td>' +
        '<td>' + values.CandidateLifeCycleStatusName + '</td>' +
         daydifference + '</tr>' + srno++;

        $('#tblPendingHrResponse').append(tr);

    }

Solution 2:

You can use jQuery append.

success: function (data) {
    $.each(data.data, function (index, value) {
        $("table").html("Your HTML to updated");
    });
},

Solution 3:

Have your controller method return a partial which contains your table or article.

[HttpPost]
public virtual ActionResult GetTable(ArticleViewModel viewModel)
{
    // do stuff
    return PartialView("_ArticleTable", viewModel);
}

Then update the table or article in jQuery:

ou can use jQuery append.

success: function (data) {
    $("table").html(data);
},