Creating html links inside jQuery datatable

Question

I'm currently trying to change asp.net GridView Control to jQuery DataTable using Ajax. In my project, the homepage has a reasonable image grid, as shown below:

Each image acts as a link, when a user clicks on a specific image, he redirects the user to another page based on the product identifier. JQuery DataTable code works for a regular table that has rows and columns. But I want to create my own table inside this JQuery DataTable in order to get the same image grid + links mentioned above.

My code looks like this:

1- In Code behind (Default.aspx.cs) I use a simple web method to retrieve data from a database.

[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- There is one table in the (Default.aspx) page:

<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>");
                  }
              }
    });
});

, (paging).

- ?

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>; 
            }
        },
    ]
});

• , js
• Masonry

, :)