Add,Edit and Delete Record using Bootgrid , PHP and MySQL

jQuery Bootgrid is very popular grid plugin and especially designed for bootstrap.This tutorial help to add .edit and delete records using php and mysql. I am using AJAX technology to add,edit and delete records with mysql. Bootgrid is very rich jQuery grid plugin which is used to convert a simple HTML table into grid with powerful features like sorting,pagination,searching, add record,edit record and delete record functionality. We will cover below listed features using PHP, MySQL and ajax.I done many googling but do not found any example which has below features,

  • Bootgrid listing Using Ajax
  • Bootgrid listing with search server-side using Ajax
  • Enable ajax pagination
  • Enable Sorting
  • Enable Command button with for-matter function
  • Enable server side dynamic pagination
  • Add records using bootstrap ModalBox and ajax
  • Edit records using bootstrap ModalBox and ajax
  • Delete records using bootstrap ModalBox and ajax

You can bind data in bootgrid, Either you use the server-side way (e.g. a REST service) for querying a dynamic data source like a database or you use the client-side way for simple in-memory data.

jQuery Bootgrid dependent library is jquery and bootstrap. We will learn how to add,edit and delete records in bootgrid using php, mysql and ajax.

Add,Edit and Delete records using Bootgrid, PHP and MySQL

I am using following files and folder

dist folder: This folder will contains all css and js libs of jquery,bootstrap and bootgrid.
font folder: This folder will contains all fonts related files.
index.php: This file will use to create HTML layout and handle ajax response.
connection.php: This file will use to create database connection.
response.php: This file will use to handle all server side functionality. I will create add,edit,delete action methods and return back json response to ajax method.

bootgrid-serverside

Also Checkout other tutorials of grid,

How to add listing in Bootgrid

Step 1: Created connection file to handle database connection and return db connection object.

Where is:

  1. $servername: your mysql db hostname
  2. $username: mysql db username
  3. $password: mysql db pass
  4. $dbname: database name

Step 2: Included all js and css files into index.php file.

Step 3: Create HTML table for listing data in index.php file.

Here we have added a 'Add record' button which will use to create new record and table for listing records.

Step 4: Applied Bootgrid constructor method on HTML table.The Bootgrid method converts HTML table into beautiful grid listing.

Added above jquery code into footer of index.php file.

Step 5: Added action handler in response.php file.

How to add insert record in Bootgrid

Step 1: Added Bootstrap add modal box to add record in index.php file.

Step 2: Added callback method in 'add record' button to open add modal box.

Step 3: Added event on submit button to add modal input values.

Step 4: Added ajaxAction() method which will fire ajax request to server-side. We will passed json data to server side using ajax technology.

Step 6: Added a switch option in response.php file.

Step 7: Added add action method in response.php file which will insert record in mysql database and send status.

How to add Edit record in Bootgrid

Step 1: Added Bootstrap edit modal box to update record in index.php file.

Step 2: Added callback method on event of Bootgrid contsructor,

We are collecting all data of clicked row which you want to edit and shows value into modal box.

Step 3: Added click event on submit button to edit modal input values.

Step 4: Added a switch option in response.php file.

Step 5: Added add action method in response.php file which will update record in mysql database and send status.

How to add Delete record in Bootgrid

You need to select row in Bootgrid then click delete record button icon, Each row of bootgrid has edit and delete row icon and bonded action on them.

Step 1: Added delete callback method under bootgrid constructor,

Step 2: Added a switch option in response.php file.

Step 3: Added add action method in response.php file which will insert record in mysql database and send status.

You can download source code and Demo from below link.

How To Use Downloaded Source Code

Conclusion :

In previous tutorial, we have learn listing of bootgrid with PHP, MySQL and AJAX.This tutorials help to add crud functionality with bootgrid using ajax.I have demonstrate about how to add,edit and delete row using php,mysql and ajax.