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

Hola a todo.

Continuando con nuestro anterior post. Implementando Jquery DataTables en Asp.Net MVC 5 Part 1. donde mostramos como usar la librería Jquery DataTables en nuestros proyectos de MVC. Pero el post se quedo corto dado que algunas funcionalidades no funcionan correctamente a la primera implementada, y este post cubre esas necesidades.

Partimos de nuestro código de inicio: https://github.com/romnyd/JqueyDataTables

Lo primero crearemos una clase en la carpeta Models, con el nombre “jQueryDataTableParams” la cual se encargara de manejar todos estos temas. “Búsqueda, filtro, orden”

image

Esta clase tendrá la siguiente estructura

   1: /// <summary>  

   2:    /// Class that encapsulates most common parameters sent by DataTables plugin  

   3:    /// </summary>  

   4:     public class jQueryDataTableParams

   5:     {

   6:         /// <summary>  

   7:         /// Request sequence number sent by DataTable,  

   8:         /// same value must be returned in response  

   9:         /// </summary>      

  10:         public string sEcho { get; set; }

  11:         /// <summary>  

  12:         /// Text used for filtering  

  13:         /// </summary>  

  14:         public string sSearch { get; set; }

  15:         /// <summary>  

  16:         /// Number of records that should be shown in table  

  17:         /// </summary>  

  18:         public int iDisplayLength { get; set; }

  19:         /// <summary>  

  20:         /// First record that should be shown(used for paging)  

  21:         /// </summary>  

  22:         public int iDisplayStart { get; set; }

  23:         /// <summary>  

  24:         /// Number of columns in table  

  25:         /// </summary>  

  26:         public int iColumns { get; set; }

  27:         /// <summary>  

  28:         /// Number of columns that are used in sorting  

  29:         /// </summary>  

  30:         public int iSortingCols { get; set; }

  31:         /// <summary>  

  32:         /// Comma separated list of column names  

  33:         /// </summary>  

  34:         public string sColumns { get; set; }

  35:  }

 

Para que la grilla funcione correctamente tendremos que crear una acción para que maneje todos estos temas por backend, en mi opinión es la mejor forma.

La estructura básica seria la siguiente.

   1: public ActionResult GetDataCustomers(jQueryDataTableParams param)

   2:         {

   3:  

   4:         }

Esta es la implementación final de esta acción, esta acción maneja todo los que necesita la grilla.

   1: public ActionResult GetDataCustomers(jQueryDataTableParams param)

   2:         {

   3:             //Traer registros

   4:             IQueryable<Customers> memberCol = db.Customers.AsQueryable();

   5:  

   6:             //Manejador de filtros

   7:             int totalCount = memberCol.Count();

   8:             IEnumerable<Customers> filteredMembers = memberCol;

   9:             if (!string.IsNullOrEmpty(param.sSearch))

  10:             {

  11:                 filteredMembers = memberCol

  12:                         .Where(m => m.CompanyName.Contains(param.sSearch) ||

  13:                            m.ContactName.Contains(param.sSearch) ||

  14:                            m.ContactTitle.Contains(param.sSearch) ||

  15:                            m.Address.Contains(param.sSearch) ||

  16:                            m.City.Contains(param.sSearch) ||

  17:                            m.Region.Contains(param.sSearch) ||

  18:                            m.PostalCode.Contains(param.sSearch) ||

  19:                            m.Country.Contains(param.sSearch) ||

  20:                            m.Phone.Contains(param.sSearch) ||

  21:                            m.Fax.Contains(param.sSearch));

  22:             }

  23:             //Manejador de orden

  24:             var sortIdx = Convert.ToInt32(Request["iSortCol_0"]);

  25:             Func<Customers, string> orderingFunction =

  26:                                 (

  27:                                 m => sortIdx == 0 ? m.CompanyName :

  28:                                   sortIdx == 1 ? m.ContactName :

  29:                                   sortIdx == 2 ? m.ContactTitle :

  30:                                   sortIdx == 3 ? m.Address :

  31:                                   sortIdx == 4 ? m.City :

  32:                                   sortIdx == 5 ? m.Region :

  33:                                   sortIdx == 6 ? m.PostalCode :

  34:                                   sortIdx == 7 ? m.Country :

  35:                                   sortIdx == 8 ? m.Phone :

  36:                                   sortIdx == 9 ? m.Fax :

  37:                                   m.CustomerID

  38:                                  );

  39:             var sortDirection = Request["sSortDir_0"]; // asc or desc  

  40:             if (sortDirection == "asc")

  41:                 filteredMembers = filteredMembers.OrderBy(orderingFunction);

  42:             else

  43:                 filteredMembers = filteredMembers.OrderByDescending(orderingFunction);

  44:             var displayedMembers = filteredMembers

  45:                      .Skip(param.iDisplayStart)

  46:                      .Take(param.iDisplayLength);

  47:  

  48:             //Manejardo de resultados

  49:             var result = from a in displayedMembers

  50:                          select new

  51:                          {

  52:                              a.CompanyName,

  53:                              a.ContactName,

  54:                              a.ContactTitle,

  55:                              a.Address,

  56:                              a.City,

  57:                              a.Region,

  58:                              a.PostalCode,

  59:                              a.Country,

  60:                              a.Phone,

  61:                              a.Fax

  62:  

  63:  

  64:                          };

  65:             //Se devuelven los resultados por json

  66:             return Json(new

  67:             {

  68:                 sEcho = param.sEcho,

  69:                 iTotalRecords = totalCount,

  70:                 iTotalDisplayRecords = filteredMembers.Count(),

  71:                 aaData = result

  72:             },

  73:                JsonRequestBehavior.AllowGet);

  74:         }

 

La vista cambia y solo devuelve la vista.

   1: public ActionResult Customers()

   2:         {

   3:             return View();

   4:         }

En la vista los cambios que hay que realizar son los siguientes.

  1. El foreach que cargaba los datos se elimina solo se deja la etiqueta <tbody> dado que toda esta información se cargara por backend.
  2. el jquery de carga cambia.
   1: <script type="text/javascript">

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

   3:             $('#listar').dataTable({

   4:                 "bServerSide": true,

   5:                 "sAjaxSource": '@Url.Action("GetDataCustomers", "Home")',

   6:                 "bProcessing": true,

   7:                 "bdestroy": true,

   8:                 "start": 0,

   9:                 "order": [0, "asc"],

  10:                 "bDeferRender": true,

  11:  

  12:                 "aoColumns": [

  13:                         { "sName": "CompanyName", "mData": "CompanyName" },

  14:                         { "sName": "ContactName", "mData": "ContactName" },

  15:                         { "sName": "ContactTitle", "mData": "ContactTitle" },

  16:                         { "sName": "Address", "mData": "Address" },

  17:                         { "sName": "City", "mData": "City" },

  18:                         { "sName": "Region", "mData": "Region" },

  19:                         { "sName": "PostalCode", "mData": "PostalCode" },

  20:                         { "sName": "Country", "mData": "Country" },

  21:                         { "sName": "Phone", "mData": "Phone" },

  22:                         { "sName": "Fax", "mData": "Fax" },

  23:                         

  24:                 ],

  25:             });

  26:         });

Es importante leer la documentación dado que esta les indica que hacer para lo que desean implementar.

Ejecutamos y probamos.

image

image

Revisamos la consola del navegador y vemos que todo esta funcionando correctamente.

image

Espero que les haya gustado. S@ludos.

 

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

 

Romny

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