Ordenando GridView con JQuery

Posted on


En el post de hoy, quiero mostrar como con JQuery es muy fácil permirtir el ordenamiento de un gridview con tan solo dar clic en la cabecera de la columna, para realizar este ejemplo vamos a necesitar tres elementos:

  1. La libreria core de JQuery.
  2. El  plugin tablesorter.
  3. CSS Friendly Control Adapters.

El plugin tablesorter trabaja sobre una tabla HTML, pero necesita una tabla bien estructurada, es decir que su encabezado este definido por las etiquetas head, tr y th, y el cuerpo por las etiquetas tbody, tr y td. Cuando en asp.net utilizamos el control gridview, este es renderizado como una tabla, pero no con la estructura correcta, para solucionar este problema es que vamos a utilizar los CSS Friendly Control Adapters.

Ahora veamos que necesitamos para hacer uso de ellos:

  1. Añadimos una referencia  a la dll.
  2. Añadimos el archivo CSSFriendlyAdapters.browser

Luego cuando se realize la renderización de nuestro grid se hará correctamente, lo único a tener en cuenta es que el genera un div con  el id asignado al grid en tiempo de diseño, y dentro de este div, la tabla con los datos correspondientes, esto es importante tenerlo claro para nuestro pequeño código JQuery.

Ahora nuestro “extenso y complicado” código JQuery:

 
$(function () {
$("#<% = grvDatos.ClientID %> table").tablesorter();
})

Como se puede observar utilizamos un selector por ID  #<% = grvDatos.ClientID %> y lo filtramos aún más table para q seleccione la tabla, porque como se menciono anteriormente al renderizar el grid, se crea un div y dentro de este la tabla con nuestros datos.

Y eso es todo, al dar clic en el encabezado de cualquier columna del grid el orden cambiará automáticamente, así la aplicación finalmente lucirá algo así:

Luego vamos a ver como podemos agregar la funcionalidad de filtro al gridview.

Como siempre les dejo el código del ejemplo tanto en VB como en C#.

Ejemplo en VB !

Ejemplo en C# !

2 comentarios sobre “Ordenando GridView con JQuery

    […] Todo en Visual Basic.Net InicioAcerca de « Ordenando GridView con JQuery […]

    jordan escribió:
    08/02/2014 en 08:59

    Estimado podrias brindar el codigo .. ya que el link no funciona

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s