Implementar JQuery DataTable procesamiento del lado del servidor con ASP.Net MVC.

DataTable es un plug-in de jQuery que nos permite mejorar el procesamiento de tablas HTML de forma sencilla y eficiente.

Una de sus principales funcionalidades es la paginación, el ordenamiento y el filtrado de información. Para lograrlo, basta con indicar a qué tabla queremos aplicar el plug-in y este, de manera automática, hace su magia.
Sin embargo, cuando trabajamos con tablas que contienen muchos registros, la vista puede volverse lenta, ya que todo el procesamiento se realiza del lado del cliente.

En este ejemplo veremos cómo generar un método que nos permita procesar las peticiones de paginado, ordenamiento y filtrado a través de solicitudes al servidor (server-side processing).

Omitiremos la creación de un nuevo proyecto y asumiremos que ya contamos con una base de datos sobre la cual se realizarán las consultas.

El proyecto de ejemplo lo puedes descargar desde el siguiente repositorio:

Requisitos

Lo primero que debemos verificar es que jQuery y DataTable estén agregados a nuestro proyecto.

Estas librerías pueden añadirse de forma manual descargándolas desde sus sitios oficiales:

• jQuery
• DataTable

O bien, como en mi caso, instalarlas mediante NuGet.

Una vez que tengamos las librerías en el proyecto, debemos asegurarnos de que estén correctamente incluidas en las vistas donde utilizaremos las tablas.

Clase Adapter

Ahora, dentro de nuestro proyecto, vamos a crear una clase adapter que nos ayude a devolver la estructura JSON que el plug-in de DataTable necesita.

Para ello, agregamos una nueva clase llamada DataTableAdapter.cs.

A esta clase adapter le definiremos las siguientes propiedades:

Clase Request

A continuación, creamos otra clase llamada DataTableRequest.cs, la cual representa los datos que el plug-in envía al servidor en cada petición.

La clase DataTableRequest debe contener las siguientes propiedades:

Puedes encontrar más información sobre estas estructuras en la documentación oficial de DataTable.

Controlador

Una vez que tenemos ambas clases, ya podemos crear en nuestro controlador un método que nos regrese la información del listado de forma paginada.

Este método debe recibir un modelo DataTableRequest y devolver una respuesta JSON utilizando nuestro DataTableAdapter.

El método podría quedar de la siguiente manera:

Vista

Ahora solo nos resta agregar en la vista la tabla en la que se mostrará la información.

Una vez definidos el método del controlador y la tabla, debemos enlazarlos mediante la configuración del plug-in DataTable.

Puntos importantes a considerar:

• El id de la tabla.
• La URL del método que se va a consumir.

Si todo está correctamente configurado, al ejecutar el proyecto podremos ver que la tabla carga la información de forma paginada y mucho más rápida, incluso con grandes volúmenes de datos.