Question

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

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

我的代码是这样的：

1- In 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- In（Default.aspx）页面中有一个表：

<table class="table table-striped table-bordered table-hover" id="TableId"
cellspacing="0" align="center"  width="100%">
</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>");
                  }
              }
    });
});

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

有人可以告诉我或指导我一些指示吗？

由于

Answer 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

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

在jQuery Datatable中创建html链接

1 个答案: