如何更新通过AJAX调用一个HTML表？ [英] How to update an HTML table through AJAX call?

问题描述

家伙，我有一个HTML表在我的ASP.net MVC 首页视图。现在，该表是通过在模型中的数据present最初填补。现在请点击主页上的某些按钮，我想更新表即数据present清除数据present表中，并与Ajax调用一个更新。

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, I want to update the data present in the table i.e. clear the data present in the table and update it with the one from ajax call.

这是我的表从视图中：

<article class="scrlable">
<table>
    <tr>
        <td>#</td>
        <td>Name</td>
        <td>Status</td>
        <td>Since</td>
    </tr>

    @{   
    int srno = 1;
    foreach (var pendingResponseModel in Model.hrPendingResponseList)
    {
    <tr>
        <td>@srno</td>
        <td>@pendingResponseModel.CandidateName</td>
         <td>@pendingResponseModel.CandidateLifeCycleStatusName</td>
          @if (pendingResponseModel.DayDifference == "1")
                {
          <td>@(pendingResponseModel.DayDifference) day</td>
                    }
                    else
                    {
                        <td>@(pendingResponseModel.DayDifference) days</td>
                    }
                </tr>
                    srno++;
                }
            }
        </table>
    </article>

这是我的ajax调用：

And this is my ajax call :

function GetStatusWise(control, departCode) {
    $.ajax(
        {
            type: "GET",
            url: "...URL..." + departCode,
            dataType: "json",
            crossDomain: true,
            async: true,
            cache: false,
            success: function (data) {
                $.each(data.data, function (index, value) {
                 // UPDATE TABLE HERE...
                });
            },
            error: function (x, e) {
                alert('There seems to be some problem while fetching records!');
            }

        }
    );
}

从Ajax调用返回的数据是JSON。它有名称，状态和自元素。他们可以通过查看 value.CandidateName ， value.Status 等

现在我想我通过AJAX调用获取的值更新上表中的值。我会如何做呢？是否有可能更换整个文章？

Now I want to update the values of above table with the values I am getting through AJAX call. How would I go about doing that? Is it possible to replace the whole article ?

请注意：我通过Ajax调用获得多个值，所以这就是为什么我把环上的功能

Note : I am getting multiple values through ajax call so that is why I put a loop on the function.

推荐答案

我已经通过以下code解决我的问题。

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);

    }

这篇关于如何更新通过AJAX调用一个HTML表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！