Creating html links inside jQuery Datatable

Question

I am currently trying to change asp.net GridView Control to jQuery DataTable with Ajax. In my project, the home page has a justified image grid as shown below:

Each picture works as a link, when the user clicks on a specific image it will redirect the user to another page based on a product Id. The jQuery DataTable code works for a regular table that has rows & columns. But I want to create my own table inside that jQuery DataTable in order to get the same image grid + links mentioned above.

My code is like this:

1- In Code behind (Default.aspx.cs) I use a simple web method to retrieve data from 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- In (Default.aspx) page , there is one table:

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

3- The jQuery DataTable code looks like this:

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

By the way, the above code is server side processing (paging).

Can anyone tell me or guide me some instructions?

Thanks

Pankaja Gamage · Accepted Answer · 2017-03-13 17:50:25Z

I don't recommend you to use the jQuery DataTable for your requirement. Usually this is used instead of HTML tables due to their user-friendliness in handling data. However this implementation should work fine for you. I will give you a couple of links that might suit you for an image grid too at the bottom.

$('#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>; 
            }
        },
    ]
});

I personally haven't used these but worth giving a try :)

Collectives™ on Stack Overflow

Creating html links inside jQuery Datatable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related