C# 在jQuery数据表中创建html链接

我目前正在尝试使用Ajax将asp.net GridView控件更改为jQuery DataTable。在我的项目中，主页有一个对齐的图像网格，如下所示：

每幅图片都是一个链接，当用户点击一个特定的图片时，它会根据产品Id将用户重定向到另一个页面。 jQuery DataTable代码适用于具有行和列的常规表。但是我想在jQuery数据表中创建我自己的表，以便获得上面提到的相同的图像网格+链接

我的代码如下：

$(document).ready(function ()
{
    $('#TableId').DataTable(
    {

        "language":
            {
                "processing": "<div class='overlay custom-loader-background'><i class='fa fa-cog fa-spin custom-loader-color'></i></div>"
            },
        "processing": true,
        "serverSide": true,
        "ajax":{
                 url: "Default.aspx/GetData",
                 contentType: "application/json",
                 type: "GET",
                 dataType: "JSON",
                 data: function (d) {
                           return d;
                       },
                 dataSrc: function (json) {
                           json.draw = json.d.draw;
                           json.recordsTotal = json.d.recordsTotal;
                           json.recordsFiltered = json.d.recordsFiltered;
                           json.data = json.d.data;
                           var return_data = json;
                           return return_data.data;
                       }
              }, success: function (data) {
                  for (var i = 0; i < data.d.length; i++) {
                      $("#TableId").append("<tr><td><a href=Default.aspx?Id="+data.d[i].Id+"><img src="+data.d[i].ImgUrl+"></a></td></tr>");
                  }
              }
    });
});

1-在Code behind Default.aspx.cs中，我使用一个简单的web方法从数据库检索数据

[WebMethod]
public static SalesOrderDetail[] BindDatatable()
{
    DataTable dt = new DataTable();
    List<PDetail > details = new List<PDetail>();
    using (SqlConnection con = new SqlConnection(@"server=Server\SQLEXPRESS;integrated security=true;database=MyDb"))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT Id, PName,ImgUrl FROM Products ORDER BY Id", con))
        {
            con.Open();
            SqlDataAdapter da = new SqlDataAdapter(cmd);
            da.Fill(dt);
            foreach (DataRow dtrow in dt.Rows)
            {
                PDetail p = new PDetail();
                p.Id = Convert.ToInt16(dtrow["Id"].ToString());
                p.PName= dtrow["PName"].ToString();
                p.ImgUrl = Convert.ToInt16(dtrow["ImgUrl"].ToString());
                details.Add(p);
            }
        }
    }
    return details.ToArray();
}

2-在Default.aspx页面中，有一个表：

<table class="table table-striped table-bordered table-hover" id="TableId"
cellspacing="0" align="center"  width="100%">
</table>

3-jQuery数据表代码如下所示：

$(document).ready(function ()
{
    $('#TableId').DataTable(
    {

        "language":
            {
                "processing": "<div class='overlay custom-loader-background'><i class='fa fa-cog fa-spin custom-loader-color'></i></div>"
            },
        "processing": true,
        "serverSide": true,
        "ajax":{
                 url: "Default.aspx/GetData",
                 contentType: "application/json",
                 type: "GET",
                 dataType: "JSON",
                 data: function (d) {
                           return d;
                       },
                 dataSrc: function (json) {
                           json.draw = json.d.draw;
                           json.recordsTotal = json.d.recordsTotal;
                           json.recordsFiltered = json.d.recordsFiltered;
                           json.data = json.d.data;
                           var return_data = json;
                           return return_data.data;
                       }
              }, success: function (data) {
                  for (var i = 0; i < data.d.length; i++) {
                      $("#TableId").append("<tr><td><a href=Default.aspx?Id="+data.d[i].Id+"><img src="+data.d[i].ImgUrl+"></a></td></tr>");
                  }
              }
    });
});

顺便说一下，上面的代码是服务器端处理分页的代码

有人能告诉我或指导我一些指示吗

---

谢谢

我不建议您根据需要使用jQuery数据表。由于HTML表在处理数据时的用户友好性，通常使用它来代替HTML表。然而，这个实现应该可以很好地为您工作。我会给你一对夫妇的联系，可能适合你的图像网格也在底部

$('#TableId').DataTable({
    "processing": true, // show progress bar while loading
    "serverSide": true, // process is done on server side
    "pageLength": 12, // page size
    "ajax": {
        "url": "", // your url here
        "type": "POST", // since you need to pass data for the request
        "datatype": "json",
        "data": function (d) {
            d.parameter1 = "some value";
            d.parameter2 = "another value";
        }
    },
    "columns": [
        { 
            "data": "ImageName",
            "name": "Image_Name",
            "className": "className",
            "defaultContent": "Image Not Found" 
        },
        {
            "data": null,
            "className": "class1 class2",
            "orderable": false,
            "render": function (data, type, row) {
                var someUrl = "example.com/api/" + data.someVal;
                return '< a href="'+ someUrl +'" id="'+ data.Id +'"><img src="'+ data.imageUrl + '" ></a>; 
            }
        },
    ]
});

我个人没有使用过这些，但值得一试：