jQuery Datatables sDom – Custom Elements

jQuery Datatables

This post is the next part of Working with the jQuery Datatables plugin. Since this tutorial is written for those familiar with the plugin You might need to learn the basics of the plugin on the following link http://behstant.com/blog/jquery/datatables-jquery-implementation/. On this tutorial I am going to focus on how to manipulate the elements of the Datatables by using the sDom property. In the first place you need to know that the plugin jQuery Datatables have 4 visual core elements:

  1. Number of items to Display.
  2. The main table.
  3. Number of records retrieved.
  4. Paginator.

Since these elements are visual you can put them in different positions or perhaps you can decide to set them visible or not, however, remember that not adding information into this property will result in a working DataTable using the default settings.

Read more

jQuery Datatables Implementation

jQuery Datatables

jQuery Datatables

The jQuery Plugin Datatable will help you to keep those huge database results into a better and organize table. I have spoke of the jQuery Datatables plugin into this entry, so I will no use much time in the introduction of the plugin. I will focus and how you can get you database results into that Datatable.

For this Example I will be using a database, the employee table that I have been using in previous tutorials, so if you don’t remember the file structure of the table I present it again.

Read more

Search with Ajax and jQuery UI Autocomplete, PHP, MySQL and JSON

Autocomplete Example
Autocomplete Example

I have been creating posts with scripts to do small stuff, but on this post I would like to show/teach you how to implement the jQuery UI Autocomplete Widget. I have to remark that for the style of the application I am using Bootstrap, so the most important thing is the html code of the form and the Javascript code. This is the Part 1 of the tutorial.

I would like to show you a diagram of the application flow so click it to enlarge.

jQuery UI Autocomplete flow
jQuery UI Autocomplete flow

As you can see the application will load the information when the page loads, this is why the tutorial is Part 1, on further tutorial the information will not be loaded until the user type the information to search. Now, the code.

Read more

Ajax usage to search a Record with PHP, MySQL and jQuery

I have created a few post about how to Search, Update and Delete data from a MySQL Database with PHP and PDO. Those tutorials are quite simple (but not dynamically enough, they don’t use Ajax), but they are very important to catch the flow of this tutorial if you have never worked with this technologies. The tutorials are in Spanish so if you really need them in English I will be glad to translate them.

Something that I would like to remark is that you can get the scripts at the end of the tutorial.

In order to create a nice look and feel to the page I have implemented the framework Boostrap, but if you don’t want to focus on the look and feel you only have to focus on the Form, the event to Fire the Ajax request and the server to process your request.

The next flow chart will show the path that we are going to cover to complete our Ajax search:

Read more

Uso de Ajax con jQuery

Mucho se ha hablado sobre el uso de Ajax en la Web moderna, para muchos esto parece algo tan complejo que mejor prefieren estar trabajando su aplicaciones web en una forma tradicional, claro, Ajax es algo complicado porque nos permite tener interacción con el servidor de una manera tan dinámica que no necesitamos recargar nuestro sitio Web completo para obtener una respuesta.

Antes de hablar de Ajax de jQuery voy a dar un antecedente de lo que es Ajax, porque si no sabemos de dónde viene no podemos comprender su uso. Una vez que entendamos como funciona Ajax, mostrare su uso a través de la librería jQuery, el cual es nuestro objetivo.

AJAX

Ajax es un término acuñado por Jesse Garrett de Adaptive Path para explicar la comunicación asíncrona entre cliente-servidor. El significado del Acrónimo Ajax es “Asynchronous Javascript and XML”, Ajax se simplemente un término para encapsular las técnicas necesarias para crear una aplicación web.

Read more