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