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. Elplugin 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 necesitamospara hacer uso de ellos:

  1. Añadimos una referenciaa 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 conel id asignadoal 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# !