Desarrollando

en tu idioma

Escrito por: TiraCodigo
Etiquetas: jQuery, javascript, asp.net, DataTable

Muchas veces tenemos la necesidad, de poder mostrar de una buena forma datos en una tabla, con DataTable podemos hacer que nuestra simple tabla de html, cobre vida, y se muestre de manera presentable, y nos brinde muchas propiedades que le incorpora este plugin de jQuery

Por ejemplo, podemos pasar de una simple tabla <table> al DataTable, el cual nos dará muchas mas funcionalidades, como ordenar por columnas, búsqueda, etc, y todo con una simple instrucción de JS

Realizaremos lo siguiente para implementarlo en nuestro proyecto:

  • Primeramente, entramos a la web oficial en el siguiente enlace http://datatables.net/download/, en la parte final de la pagina, veras un botón para descargar, da click en el, al final tendríamos el archivo DataTables.zip
  • Al descomprimir veremos en la carpeta final, los siguientes archivos y carpeta:
    • datatables.css
    • datatables.js
    • DataTables-1.10.21
  • Para implementarlo en nuestro proyecto, tendremos que copiar y pegar los archivos anteriores en la carpeta correspondiente de nuestro proyecto, es decir:
    • datatables.css la pegaremos en la carpeta "Content"
    • datatables.js lo pegaremos en la carpeta "Scripts"
    • DataTables-1.10.21 la pegaremos en la carpeta "Content"
  • Ahora tenemos que agregar la entrada correspondiente en el archivo "BundleConfig.cs" que esta dentro de la carpeta "App_Start", donde agregaremos las siguientes lineas:

 

      bundles.Add(new ScriptBundle("~/bundles/datatablesjs").Include(
                  "~/Scripts/datatables.js"));

      bundles.Add(new ScriptBundle("~/bundles/datatablescss").Include(
                  "~/Content/datatables.css"));

 Ahora, en la vista del Layout que encontraremos en "Views/Shared/_Layout.cshtml", tenemos que agregar en la sección <head> le siguiente entrada: 

@Styles.Render("~/bundles/datatablescss")

Y en la sección del body antes de la etiqueta </body> la siguiente linea: 

@Scripts.Render("~/bundles/datatablesjs")

Con lo anterior, tenemos todo lo necesario para utilizar la libreria de DataTables, ahora solo lo que falta es la linea para aplicar este plugin a nuestra simple tabla, suponiendo que nuestra tabla tenga el id "MiTabla", seria de la siguiente manera: 

<script type="text/javascript">

        $(document).ready(function () {

            $('#MiTabla').DataTable();

        });

 </script>

 

Teniendo como resultado, nuestro siguiente DataTable  

 

 

A continuación los links para ver el proyecto en producción y el link de descarga

Ver la página en ejecución

Descargar el código fuente del ejemplo