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

Bootgrid is a awesome grid plugin for listing results.Bootgrid grid control especially designed for bootstrap. Bootgrid has rich features like Lightweight,Cross Browser Support(IE, Firefox, Chrome, Safari, Opera) and html5 support.

In previous article i have introduced about BootGrid Plugin Basic. You can use bootgrid to generate listing using two methods.

You can also check other tutorial for Grid,

option 1 : Bootgrid Example with Client Side

Client side means you are provides pagination, sorting and searching by loading whole data records at once.This will work fine only small set of records but if you have large set of records then performance issue will come in picture,because fetching large amount of data from server side will take time.

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

There is no any special configuration needed to apply bootgrid on table.You need to fetch all records from database and bind with table using rows via HTML or use the jQuery append method to append rows dynamically with table body.Finally initialize bootgrid on table using data-toggle="bootgrid" attribute with in you table like below,

data-toggle use to initialize bootgrid on table.

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

Server side processing will come in picture when you have 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 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 use to create connection with mysql.
  • response.php : This file is responsible to fetch data from database using mysql query and return json data to index.php.
  • dist : This is a folder, which is use to keep all library file.

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

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

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


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

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.

Conclusion :

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

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

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

  • I want to thanks to samuel, who made some changes for laravel Framework,
    //Handles Sort query string sent from Bootgrid
    if (isset($params[‘sort’]) && is_array($params[‘sort’]) )
    {
    $order_by=””;
    foreach($params[‘sort’] as $key=> $value)
    $order_by.=” $key $value”;

    $where .=”ORDER BY “.$order_by.” “;
    }

  • I implemented it in one of my project, the search is not functioning.

    • I have cross verified on my tuts and demo,it should be work.

    • I checked in demo link,its working fine bro

  • jawed

    me try this then comment

    • Which issues are you facing,I haven’t get any comment from your side regrading this on this post.

  • Basuki Tafif

    This article is very helpful, I really appreciate.
    but how to put the Edit and Delete button and enter the KEY ID on each line for the next action ?
    Please explain to me and give some examples.
    Thank You.

    • You can add/edit/delete button like datatable example,anyways i will share new article with this requirement.

  • i am using below bootgrid config code,Its working fine.
    $( document ).ready(function() {
    var grid = $(“#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: {
    “commands”: function(column, row)
    {
    return ” ” +
    “”;
    }
    }
    }).on(“loaded.rs.jquery.bootgrid”, function()
    {
    /* Executes after data is loaded and rendered */
    grid.find(“.command-edit”).on(“click”, function(e)
    {
    alert(“You pressed edit on row: ” + $(this).data(“row-id”));
    }).end().find(“.command-delete”).on(“click”, function(e)
    {
    alert(“You pressed delete on row: ” + $(this).data(“row-id”));
    });
    });
    });

    i am using bootstrap icon classes

    • Camilo

      Hello Dear, you were right…. I had another object with the same name as my command column, hence it won’t display command columns..

      Thank you so much for your quick answer.

  • i have share full source code, you need to create test folder, dump mysql file in test db.You need put source code into xampp like, xampp/htdocs/bootgrid, now open http://localhost/bootgrid, it will work perfectly.

  • Sheikh Faisal Ahmed

    here delete function not working

    • uncomment below code into index.php,

      $.post(‘response.php’, { id: $(this).data(“row-id”), action:’delete’}
      , function(){
      // when ajax returns (callback),
      $(“#employee_grid”).bootgrid(‘reload’);
      });