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