在 jQuery Datatable 中创建 html 链接

Posted 2023-05-07

【中文标题】在 jQuery Datatable 中创建 html 链接

【英文标题】：Creating html links inside jQuery Datatable

【发布时间】：2017-08-02 03:08:54

【问题描述】：

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

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

我的代码是这样的：

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"  >
</table>

3- jQuery DataTable 代码如下所示：

$(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】：

我不建议您使用 jQuery DataTable 来满足您的要求。由于它们在处理数据方面的用户友好性，通常使用它来代替 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>; 
            
        ,
    ]
);

Justified,js Masonry

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