Question

我使用Ajax / Jquery调用返回一个DataSet到客户端。我想将这些数据显示为表格。但我不确定我怎么能做到这一点？另外，我想在每一行中添加一个可点击的链接按钮或其他内容。

服务器端：

 [System.Web.Services.WebMethod]
    public static string GetPopUpDataWM()
    {
        //return "Hello " + name + Environment.NewLine + "The Current Time is: "
        //    + DateTime.Now.ToString();

        DataTable table = new DataTable();
        table.Columns.Add("Dosage", typeof(int));
        table.Columns.Add("Drug", typeof(string));
        table.Columns.Add("Patient", typeof(string));
        table.Rows.Add(25, "Indocin", "David");
        table.Rows.Add(50, "Enebrel", "Sam");
        table.Rows.Add(10, "Hydralazine", "Christoff");
        table.Rows.Add(21, "Combivent", "Janet");
        table.Rows.Add(100, "Dilantin", "Melanie");
        return JsonConvert.SerializeObject(table);
    }

客户端：

  <script type="text/javascript">
      $(document).ready(function () {
          $.ajax({
              type: "POST",
              contentType: "application/json; charset=utf-8",
              url: "test1.aspx/GetPopUpDataWM",
              data: "{}",
              dataType: "json",
              success: function (data) {
                  for (var i = 0; i < data.d.length; i++) {
                      Console.log(data.d[i].UserId);
                      $("#tbDetails").append("<tr><td>" + data.d[i].UserId + "</td><td>" + data.d[i].UserName + "</td><td>" + data.d[i].Location + "</td></tr>");
                  }
              },
              error: function (result) {
                  alert("Error");
              }
          });
      });
</script>
<script type = "text/javascript">

</script>
<table id="tbDetails">
    <tbody>
    <tr>
      <td>Code</td><td>Description</td>
    </tr>
    <tr>
      <td>100</td><td>abc</td>
      <td>101</td><td>mno</td>
      <td>102</td><td>xyz</td>
    </tr>
    </tbody>
</table>

响应：

[{"Dosage":25,"Drug":"Indocin","Patient":"David"},
{"Dosage":50,"Drug":"Enebrel","Patient":"Sam"},
{"Dosage":10,"Drug":"Hydralazine","Patient":"Christoff"},
{"Dosage":21,"Drug":"Combivent","Patient":"Janet"},
{"Dosage":100,"Drug":"Dilantin","Patient":"Melanie"}]

Answer 1

尝试var jObject = $("#tbDetails").find('<tbody>').append(... jObject.click(yourFunction);

但是你不能使用data.d [i] .UserId但是：

$.each(data, function( index, value ) {
    echo value['Dosage']
});

还有一件事：您可以使用data.length et not data.d.length :)测试长度。

如何使用Jquery / Ajax Call以表格形式显示数据？

1 个答案: