Uso de Datatable -finales de 2015

Bueno esta sera la primera entrada de algunas cuantas mas a futuro y espero que una vez por todas terminar un nuevo tutorial que ayude a los demás que como yo han andado perdido en este tema en especifico.

para los impacientes dejo el código fuente aquí

¿Que es DataTable?

Antes que nada debemos definir que es esto de DataTable. Básicamente se trata de un plugin OpenSource que podemos utilizar con Jquery. En mi caso lo utilizare ya que últimamente le é tomado mucho cariño a este framework (jquery).

Cosas a tener en cuenta

Para utilizar esta librería mi recomendación personal es que se este desarrollando en navegadores muy actuales para no tener problemas a futuro, esto en pocas palabras quiere decir que debemos trabajar con iE 9 (para los no entendidos en el tema, hablo de internet explorer 9) como mínimo de esa manera estaremos aprovechando todas las funcionalidades que ofrece.

En cuanto a la versión de jquery necesitaremos una 1.1X o mayor (no estaría mal considerar la versión 2).

Para que este ejemplo se ejecute correctamente tienes que tener conexión a internet y de preferencia este código debería estar siendo ejecutado en un servidor local como mínimo

Contar con una estructura de la tabla similar a la siguiente



Uso de Datatable


  
        Name         Position         Office         Age         Start date         Salary     
 
        Name         Position         Office         Age         Start date         Salary     
 
        Tiger Nixon         System Architect         Edinburgh         61         2011/04/25         $320,800

Name	Position	Office	Age	Start date	Salary
Name	Position	Office	Age	Start date	Salary
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$320,800

De esta manera nos aseguramos de no tener problemas en el futuro.

Ahora hacemos uso de la librería y del css adecuado para esto solo agregamos el siguiente código

y Antes de la etiqueta de cierre del cuerpo agregamos tanto el jquery como la libreria de DataTable

Y para terminar simplemente le indicamos que tiene que comportarse como un DataTable de la siguiente manera

Nota: En este caso se utiliza la forma contractada de inicialización de jquery y se seguirá usando durante todo lo que dure estas clases.

Bueno ahora solo falta probar en el navegador y agregarle unas cuantas Row al elemento de table de nuestro HTML, de lo cual puedo ayudar, solo clona el proyecto que dejo en el siguiente link

Ver código completo de este ejemplo

Bueno espero esta primera entrada sea de tu agrado

Para mas información visita la web donde se aloja la libreria http://www.datatables.net/

Entradas populares de este blog

Northwind para Mysql y otras

Supongamos que necesitamos una base de datos para comenzar a hacer pruebas y a la vez necesitamos que esa base de datos contenga mucha información con la cual trabajar. En mis tiempos de universidad existía una base de datos que utilizábamos en los laboratorios con SQL Server y c# para mostrar los datos en algún formulario. El nombre era Northwind. El problema es que era solo para SQL Server, pero alguien en se dio a la tarea de exportar esa base de datos a MySql y es justo lo que te vengo a mostrar acá. Hace un tiempo atrás clone de los repositorios de Google Code esa información (que como algunos de ustedes sabrá dejara de estar al servicio de todos en un tiempo). Modifique un poco la DB de Mysql para que se pudiera ejecutar el script sin ningún problema. Lo interesante de todo esto es que puedes utilizar los demás script para diferentes gestores de base de datos Se advierte que para poder usarlas adecuadamente hay que modificar los campos de tipo longblob y qu...

How to upload File from form data POST in Android with Retrofit 2

The last day I explain how to upload a simple CSV file using node . And now I teach how to upload from android device. Get source code here: GitHub This article is write in java... later I'll add the method for kotlin. The logic is not changed, only the format code. 1) Is necessary add the dependencies in gradle: module implementation 'com.google.code.gson:gson:2.8.6' // RETROFIT // implementation 'com.squareup.retrofit2:retrofit:2.6.2' implementation 'com.squareup.retrofit2:converter-gson:2.6.2' implementation 'com.squareup.retrofit2:converter-scalars:2.5.0' 2) Add permissions in AndroidManifest.xml and modified the application for work with network security policy <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> in applitacion add ...

How to get the path and name from git log

Hi people. The last day, I got a simple task, get all path and name from git log. In this case It's only necessary a console and project whit some commits . The simplest command is there: git log --raw This command get the name of author, date, commit and file affected. Is simple but is not for me, because I need the path and name of the file affected. Not all these data The second command is here: git log --pretty=format: --name-only The command getting only the path and name; is just I needed. Not showing extra data, but it's separate by newline (later is necessary to delete for create a report for my boos) If you need show the author and date, only add some parameters, for example git log --pretty=format:"%an, %ar%n" --name-only Another way for get only paths and names is there, the problem with this command is getting all files. You think, my project contains 10k files affected, the time to get all data is slow. This command is not insert newline for separa...

NayosX Ness

Buscar este blog