Simple Example Bootgrid (Server Side) with PHP, MySQL and Ajax

This tutorial help to understand Bootgrid listing with PHP, MySQL Using Ajax.We will convert a simple HTML table into a feature table with features such as table data searching, pagination, column sorting, and many more.

Bootgrid is a fantastic grid plugin for displaying results. Bootgrid grid is a bootstrap-specific grid control. Bootgrid Lightweight, Cross Browser Support (IE, Firefox, Chrome, Safari, Opera), and HTML5 support are among its many features.

You can use bootgrid to generate a listing using two methods.

You can also check other tutorial for Grid,

• Simple Example Bootgrid (Server Side) with PHP, MySQL and Ajax
• Datatable Pagination, Sorting and Search – Server Side (PHP/MySQl) Using Ajax
• Datatable Pagination, Sorting and Search – Server Side (PHP/MySQl) Using Ajax

Bootgrid is an extremely well-built jQuery grid plugin that is used to transform a simple HTML table into a powerful grid with functionality such as inserting, updating, and deleting records from the table, table column sorting, pagination, and searching data on the server side.

Option 1: Bootgrid Example with Client Side

Client-side means you offer pagination, sorting, and searching by loading entire data sets at once. This will work fine for a small set of records, but if you have a large set of records, you will run into performance issues because fetching large amounts of data from the server side will take time to process and load data into the table.

Bootgrid Example of Pagination, Sorting and Searching Using Client Side Data Binding

There is no special configuration required to use bootgrid on a table. You must retrieve all records from the database and bind them to the table using rows via HTML or use the jQuery append method to dynamically append rows to the table body. Finally, use the data-toggle="bootgrid" attribute in your table to initialize bootgrid, as shown below.

<table id="employee_grid" class="table table-condensed table-hover table-striped" width="100%" cellspacing="0" data-toggle="bootgrid">
        ...
</table>

data-toggle use to initialize bootgrid on the table.

Option 2: Bootgrid (Server Side) With PHP, MySQL and Ajax

Server-side processing will come into the picture when you have a large set of data. Server side data will fetch data in chunk, so data overhead of your application will improve and get better performance of application. We need the ajax option to true and pass an URL to the url option in the bootgrid method.

There are Following files will participate in Bootgrid with PHP, MySql and ajax

• index.php: This file is responsible to create html table and pagination.
• connection.php: This file is used to create a connection with mysql.
• response.php This file is responsible to fetch data from the database using mysql query and return json data to index.php.
• dist : This is a folder, which is used to keep all library files.

Simple Demo Bootgrid (Server Side) with PHP, MYsql and ajax

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

<script src="dist/jquery-1.11.1.min.js"></script>
<script src="dist/bootstrap.min.js"></script>
<script src="dist/jquery.bootgrid.min.js"></script>

Step 2: Define html table and call data-toggle="bootgrid" attribute

<table id="employee_grid" class="table table-condensed table-hover table-striped" width="100%" cellspacing="0" data-toggle="bootgrid">
 <thead>
  <tr>
   <th data-column-id="id" data-type="numeric">Empid</th>
   <th data-column-id="employee_name">Name</th>
   <th data-column-id="employee_salary">Salary</th>
   <th data-column-id="employee_age">Age</th>
  </tr>
 </thead>
</table>

Step 3: Define ajax request to fetch data from server-side.

$("#employee_grid").bootgrid({
        ajax: true,
        post: function ()
        {
            /* To accumulate custom parameter with the request object */            return {
                id: "b0df282a-0d67-40e5-8558-c9e93b7befed"
            };
        },
        url: "response.php",
        formatters: {
            
        }
});

Here #employee_grid is table id where i am implementing bootgrid and url: "response.php" is the target service or file to call on each pagination request.

Step 4: response.php will contain all server-side processing logic and code.

$totalRecords = mysqli_num_rows($queryTot);

    $queryRecords = mysqli_query($conn, $sqlRec) or die("error to fetch employees data");

    //iterate on results row and create new index array of data
    while( $row = mysqli_fetch_assoc($queryRecords) ) { 
        $data[] = $row;
}

$json_data = array(
"current" => intval( $params['current'] ),
"rowCount" => 10,
"total" => intval( $totalRecords ),
"rows" => $data // total data array
);

echo json_encode($json_data); // send data as json format

Conclusion :

Bootgrid is very simple and easy to use with php and MySQL.We can use one-time data records(Client side sorting, searching and pagination) as well as server-side (sorting, searching and pagination) for large data sets.

Demo & Download Code Of Bootgrid with PHP,Mysql and Ajax

Please feel free to send queries to me using below comment section.