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.
In order to use this jQuery Datepicker you only have to point to the correct elements with a CSS3 selector, for example if I have a input with id = datepicker then to attached the jQuery Datepicker to that element I would use the following code.
The jQuery plugin Datatable is a plugin that will allow you to have many features on a HTML table. This plugin is so simple to use, but if you need more complex thing you can also achieve them since the plugin is full of features that can be customize, it also includes an event listener for the action on the table.
Among the features of the Datatable plugin you can have:
- Pagination, instant search and multi-column ordering
Supports almost any data source:
- Easily theme-able: DataTables, jQuery UI, Bootstrap, Foundation
- Wide variety of extensions inc. Editor, TableTools, FixedColumns and more
- Extensive options and a beautiful, expressive API
- Fully internationalisable
- Professional quality: backed by a suite of 2900+ unit tests
- Free open source software (MIT license)! Commercial support available.
- Scrolling options for table viewport
- Smart handling of column widths
- State saving
- Hidden columns
I would like to show you a diagram of the application flow so click it to enlarge.
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.
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 the rest of this entry »