Simple Example of JTable With PHP and MySQL

jTable is very popular jquery HTML table plugin.I got a request about jtable with php and MySQL integration.This tutorials help to understand what is jTable and how to use with php and mysql.
jTable is a table plugin which creates HTML table and loads records from server using AJAX.The table supports main CRUD features like add/edit and delete records.I will extend these functionality and integrate with php and mysql.

Main Features of jTable are as follows

  • Automatically creates HTML table and loads records from server using AJAX.
  • Creates ‘create new record’ jQueryUI dialog form. When user creates a record, it sends data to server using AJAX and adds the same record to the table in the page.
  • Creates ‘edit record’ jQueryUI dialog form. When user edits a record, it updates server using AJAX and updates all cells on the table in the page.
  • Allow user to ‘delete a record’ by jQueryUI dialog based confirmation. When user deletes a record, it deletes the record from server using AJAX and deletes the record from the table in the page.
  • Shows animations for create/delete/edit operations on the table.
  • Supports server side paging using AJAX.
  • Supports server side sorting using AJAX.
  • Supports master/child tables.
  • Allows user to select rows.
  • Allows user to resize columns.
  • Allows user to show/hide columns.
  • Exposes some events to enable validation with forms.
  • It can be localized easily.
  • All styling of table and forms are defined in a CSS file, so you can easily change style of everything to use plugin in your pages. CSS file is well defined and commented.
  • It comes with per-defined color themes.
  • It is not depended on any server side technology.
  • It is platform independent and works on all common browsers.

We are using below Files,The details are:

Index.php - This file will responsible to create html and instance jtable using jquery code.
response.php - This file responsible to create database connection string and convert records into json string and returns data as a response.
connection.php - This file responsible to create mysql database connection.

jtable-with-php-and-mysql

Simple Example of jTable with PHP and MySQL

Step 1: Include js and css file into section of index.php file.

Step 2: Create connection file connection.php and define database variable and connect with MySQL database.

Step 3: Create response.php file and fetch records from mysql database and passed records json object to jTable instance.

Step 4: Now we have JSON format of records and will use into jatable instance, So we will instantiate jTable on div id 'employee_grid' and define jtable parameters for grid.

Here i have applied jTable method on employee_grid div and defined all options here, I have added response file with listAction property.
We have used jtable('load') method for auto load data from response.php file.

You can download source code and Demo from below link.

Conclusion :

We have learn about basic of jTable jquery table plugin with options.We have integrated jTable jquery grid plugin with PHP and MySQL and display records into jtable grid.I have left add/edit and delete functionality for next tutorial about jTable with server-side using php and MySQL.