c# - example - datatables link row

Crear enlaces html dentro de jQuery Datatable

Question

Actualmente estoy intentando cambiar el control asp.net GridView a jQuery DataTable con Ajax. En mi proyecto, la página de inicio tiene una cuadrícula de imagen justificada como se muestra a continuación:

Cada imagen funciona como un enlace, cuando el usuario hace clic en una imagen específica, redirigirá al usuario a otra página en función de un Id de producto. El código jQuery DataTable funciona para una tabla normal que tiene filas y columnas. Pero quiero crear mi propia tabla dentro de esa jQuery DataTable para obtener la misma imagen de la grilla + enlaces mencionados anteriormente.

Mi código es así:

1- En código subyacente (Default.aspx.cs) utilizo un método web simple para recuperar datos de la base de datos.

[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- En la página (Default.aspx), hay una tabla:

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

3- El código jQuery DataTable se ve así:

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

Por cierto, el código anterior es el procesamiento del lado del servidor (paginación).

¿Alguien puede decirme o guiarme algunas instrucciones?

Gracias

Answer 1

No le recomiendo que use el jQuery DataTable para su requerimiento. Por lo general, esto se utiliza en lugar de tablas HTML debido a su facilidad de uso en el manejo de datos. Sin embargo, esta implementación debería funcionar bien para usted. Le daré un par de enlaces que también le convienen para una cuadrícula de imágenes en la parte inferior.

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

1. Justificado, js
2. Albañilería

Personalmente no los he usado, pero vale la pena intentarlo :)