Saltar al contenido

Aplicar el complemento Jquery DataTables a ASP GridView

Solución:

El problema es que el control GridView no agrega <thead> elemento, pero simplemente coloque la fila del encabezado en <body> sección de la tabla generada mientras que el complemento Tabla de datos requiere una <thead> sección en una tabla. Intente utilizar el siguiente script:

$(function () {
    $(".gvv").prepend( $("<thead></thead>").append( $(this).find("tr:first") ) ).dataTable();
});

PD también puede usar controles que no se procesan con un diseño predeterminado como Repeater o ListView

Puedes añadir thead, tbody y tfoot etiquetas que usan el evento GridView Prerender prueba este código

protected void GridView1_PreRender(object sender, EventArgs e) {
  // You only need the following 2 lines of code if you are not 
  // using an ObjectDataSource of SqlDataSource
  GridView1.DataSource = Sample.GetData();
  GridView1.DataBind();

  if (GridView1.Rows.Count > 0) {
   //This replaces <td> with <th> and adds the scope attribute
   GridView1.UseAccessibleHeader = true;

   //This will add the <thead> and <tbody> elements
   GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;

   //This adds the <tfoot> element. 
   //Remove if you don't have a footer row
   GridView1.FooterRow.TableSection = TableRowSection.TableFooter;
  }

}

No olvide agregar el controlador de eventos en la página de origen como se muestra a continuación

<asp:GridView ID="GridView1" runat="server" CssClass="gvv"
      OnPreRender="GridView1_PreRender">
</asp:GridView>

Ahora puede simplemente llamar a la función JQuery como de costumbre para renderizarla

$(document).ready(function () {
    $(".gvv").dataTable();
});
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *