Implementando Jquery DataTables en Asp.Net MVC 5 Part 1.

Hola a todos.

Hoy quiero mostrarles como implementar el plugin DataTables para Jquery en una solución de Asp.Net MVC 5.

DataTables es un plugin para la librería de Jquery, el cual nos permite crear una grilla muy potente, esta grilla tiene funcionalidades de búsqueda, filtrado, paginación, exportación entre otras. Para revisar mas ir a al sitio el cual contiene cantidad de información para hacer sus implementaciones.

Lo primero para empezar es crear nuestro proyecto.

image

image

Después de crear nuestro proyecto vamos al administrador de paquetes de nuget.

image

Buscamos “datables” y damos instalar.

image

El sistema procede a instalar.

image

Verificamos la instalación.

image

Procedemos a configurar el respectivo bundle para el javascript y configurar el css.

   1: bundles.Add(new ScriptBundle("~/bundles/datatables").Include(

   2:                 "~/Scripts/DataTables/jquery.dataTables.js", "~/Scripts/DataTables/dataTables.tableTools.js",

   3:                 "~/Scripts/DataTables/dataTables.scroller.min.js",

   4:                 "~/Scripts/DataTables/dataTables.bootstrap.js"

   5:                 ));

 

   1: bundles.Add(new StyleBundle("~/Content/css").Include(

   2:                       "~/Content/bootstrap.css",

   3:                       "~/Content/site.css",

   4:                       "~/Content/DataTables/css/dataTables.bootstrap.css"));

 

Para la conexión a datos usaremos la bd de NORTHWND y crearemos un modelo DataBaseFirts de EntityFramework.

image

image

image

image

Después de tener nuestro modelo, procedemos a crear nuestra vista que implementara DataTables. La forma basica de implementar DataTables es crear nuestro conjunto de datos, pasarlos a la vista y en la vista instanciar la librería.

   1: public ActionResult Customers()

   2:         {

   3:             var customers = db.Customers.ToList();

   4:             return View(customers);

   5:         }

Creamos la vista con el scaffolding y configuramos la librería.

   1: @section scripts

   2: {

   3:     @Scripts.Render("~/bundles/jquery")

   4:     @Scripts.Render("~/bundles/datatables")

   5:     <script type="text/javascript">

   6:         $(document).ready(function () {

   7:             $('#listar').DataTable({

   8:                 "paging": true,

   9:                 "recordsFiltered": 10,

  10:                 "lengthChange": false,

  11:                 "searching": true,

  12:                 "ordering": true,

  13:                 "info": true,

  14:                 "autoWidth": false

  15:             });

  16:         });

  17:     </script>

  18: }

Ejecutamos y vemos como se comporta la libreria.

image

En un principio esta todo bien pero hay un error de javascript, esto error ocurre por que la tabla no esta definida correctamente.

Faltan los <thead> y los <tbody>, corregimos esto y volvemos a probar.

image

En este punto tenemos funcionando la librería, pero esta a medias, por que si nos fijamos el paginado no esta funcionando, el filtro y ordenamiento tampoco

image

Estas funcionalidades las revisaremos en nuestro siguiente post.

El código esta en esta url: https://github.com/romnyd/JqueyDataTables

Espero que les haya gustado. S@ludos.

Romny

Publicado por

Romny Duarte

Ingeniero de sistemas con experiencia en desarrollo web y móvil, geek, amante de la lectura y de la tecnología.

Deja un comentario

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