jquery.click之后更新HTML頁面

Question

我有一個onclick函數，基本上只返回排序后的數據，如下所示：

$(document).ready(function () {
    $(".feedbackClick").click(function () {
       $.post("/Analyze/GetSortedByFeedback")
              .done(function (data) {
                  var sellers = $('<table />').append(data).find('#tableSellers').html();
                  $('#tableSellers').html(sellers);
              });
       });
    });
});

這就是我在jquery帖子之后嘗試更新的表的樣子：

<table id="tableSellers" class="table table-striped jambo_table bulk_action">
    <thead>
       <tr class="headings">
            <th class="column-title"><h4><i class="fa fa-user" style="text-align:center"></i> <span>Username</span></h4> </th>
            <th class="column-title"> <h4><span class="glyphicon glyphicon-tasks salesClick" aria-hidden="true"></span></h4></th>
            <th class="column-title"><h4><i class="fa fa-star feedbackClick"></i></h4></th>

       </tr>
    </thead>
    <tbody>
       @foreach (var item in ViewBag.rezultati)
       {
             <tr>
                 <td><a href="http://ebay.com/usr/@item.StoreName" target="_blank">@item.StoreName</a></td>
                 <td>
                    <b>
                    @item.SaleNumber
                    </b>
                 </td>
                 <td><b>@item.Feedback</b></td>                                                   
             </tr>
       }

    </tbody>
</table>

點擊基本上只會獲取結果並更新HTMl中的表格...

有人可以幫我嗎？

編輯：

當前方法不起作用...我觸發了事件但什么也沒發生...動作中的代碼被正確調用，但是結果不顯示...

編輯2：

這是.done之后的數據對象的內容：

System.Collections.Generic.List`1[WebApplication2.Controllers.ResultItem]

編輯3：

這是動作：

public List<ResultItem> GetSortedByFeedback()
{
    return lista.OrderByDescending(x => x.Feedback).ToList();
}

Edit4這是Alexandru發表后的數據：

Array[100]

現在我可以做：

data[0].Feedback

並在控制台中輸出：

61259

Answer 1

您實際上想做的是將JSON數據附加到HTML元素，這當然不能按預期工作。

考慮使用諸如jQuery Templates之類的模板引擎。 您將能夠編譯HTML模板，並在需要時使用它來呈現數據。 例如：

var markup = "<li><b>${Name}</b> (${ReleaseYear})</li>";

// Compile the markup as a named template
$.template( "movieTemplate", markup );

$.ajax({
  dataType: "jsonp",
  url: moviesServiceUrl,
  jsonp: "$callback",
  success: showMovies
});

// Within the callback, use .tmpl() to render the data.
function showMovies( data ) {
  // Render the template with the "movies" data and insert
  // the rendered HTML under the 'movieList' element
  $.tmpl( "movieTemplate", data )
    .appendTo( "#movieList" );
}

Answer 2

嘗試這樣的事情：

$(document).ready(function () {
    $("body").on("click",".feedbackClick",function() {//delegate the click event
       $.get("/Analyze/GetSortedByFeedback",function(data) {
                  var sellers = $(data).find('#tableSellers').html();//find the table and take the html
                  $('#tableSellers').html(sellers);//append the html
              });
    });
});

注意：您需要從Ajaxed頁面返回html（以您的情況為准）

來自@Alexandru部分回復，您可以執行以下操作

public JsonResult GetSortedByFeedback()
{
   var list=lista.OrderByDescending(x => x.Feedback).ToList();
   return Json(list,JsonRequestBehavior.AllowGet);
}

JS：

 $(document).ready(function () {
        $("body").on("click",".feedbackClick",function() {//delegate the click event
           $.get("/Analyze/GetSortedByFeedback",function(data) {
                     $('#tableSellers tbody').empty();//empty the table body first
                     $.each(data,function(i,item){//loop each item from the json
                      $('#tableSellers tbody').append('<tr><td><a href="http://ebay.com/usr/'+item.StoreName+'" target="_blank">'+item.StoreName+'</a></td><td><b>'+item.SaleNumber+'</b></td><td><b>'+item.Feedback+'</b></td></tr>');//build and append the html
});
                  });
        });
    });

Answer 3

請使用此：

public JsonResult GetSortedByFeedback()
{
   var list=lista.OrderByDescending(x => x.Feedback).ToList();
   return Json(list);
}

如果您的方法是GET請使用以下方法：

public JsonResult GetSortedByFeedback()
{
   var list=lista.OrderByDescending(x => x.Feedback).ToList();
   return Json(list,JsonRequestBehavior.AllowGet);
}

然后請使用：

 .done(function (data) {
      $('#tableSellers tbody').empty();
      $.each(data,function(i,item){
           var tr='<tr><td><a href="http://ebay.com/usr/'+item.StoreName+'" target="_blank">'+item.StoreName+'</a></td><td><b>'+item.SaleNumber+'</b></td><td><b>'+item.Feedback+'</b></td></tr>';
           $('#tableSellers tbody').append(tr);//append the row
      });
  });