jqueryasp.net-mvcpagination

Jquery not populating the html table


I have implemented paging in MVC and using JQUERY to populate the table. But i don't know why jquery is not populating the result.

My Controller Method:

 public ActionResult Clear()
        {
            IPagedList<Provider> providerList = null;
        providerList=db.Provider.OrderBy(x=>x.ProviderName).ToPagedList(1,100);
            return Json(providerList, JsonRequestBehavior.AllowGet);
       }

My Jquery:

 $('#clearSearchButton').click(function () {
        $.ajax({
            url: '@Url.Content("~/Provider/Clear")',
            type: "GET",
            //  contentType: "application/json; charset=utf-8",
            data: "{}",
            dataType: "json",
            sucess: function (data) {
                alert("You are in success function");
                // $("tbody").empty();
                $.each(function (index, value) {
                    $('#tblData').append("<tr><td style='text-align: center;'><input type='checkbox' class='checkbox' name='deleteIds' value=" + value.Id
                        + "></td><td>" + value.ProviderName
                        + "</td><td>" + value.LegalProviderName
                        + "</td><td>" + value.Email
                        + "</td><td>" + value.HotLineNumber
                        + "</td><td><a href=" + value.WebSiteLink + " target='_blank'>" + value.WebSiteLink + "</a>"
                        + "</td><td><a href=" + value.AdminPortalLink + " target='_blank'>" + value.AdminPortalLink + "</a>"
                        + "</td><td> <a href=Provider/Details/" + value.Id
                        + ">Details</a> | <a href=Provider/Edit/" + value.Id
                        + ">Edit</a> | <a href=Provider/Delete/" + value.Id
                        + ">Delete</a> |  <a href=ProviderDocument/" + value.Id + " target='_blank'>Doc</a>"
                        + "</td></tr>");
                })
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert('error');
            }



        });
    });

Please help me how can I populate my data.


Solution

  • Verify that your response is success, console log to your data output structure. if it is as expected, use the $.each method as below,

    $.each(function (index, value) { ... }
    

    To:

     $.each(data, function (index, value) { ... }