jquery bootgrid not displaying command buttons

Question

I've followed the below JQuery Bootgrid tutorials/documentation in order to create a dataGrid for my DB.

Unfortunately, I'm not able to display the Command buttons on the code below, when trying to display them using "formatters":

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootgrid Sample Template</title>
    <!-- Bootstrap CSS-->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Include bootgrid CSS below -->
 <link href="js/jquery.bootgrid-1.3.1/jquery.bootgrid.min.css" rel="stylesheet">
  </head>
  <body> 
 <!--define the table using the proper table tags, leaving the tbody tag empty -->
 <table id="grid-data" class="table table-condensed table-hover table-striped" data-toggle="bootgrid" data-ajax="true" data-url="includes/jsonDataGridRecordings.php">
  <thead>
            <tr>
                <th data-column-id="id" data-type="numeric" data-identifier="true">id</th>
                <th data-column-id="format">Format</th>
                <th data-column-id="source">Source</th>
                <th data-column-id="location" data-order="desc">Location</th>
                <th data-column-id="title">Title</th>
                <th data-column-id="subtitle">Subtitle</th>
                <th data-column-id="person">Person</th>
                <th data-column-id="urn">URN</th>
                <th data-column-id="commands" data-formatter="commands" data-sortable="false"></th>
            </tr>
  </thead> 
 </table>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-1.12.4.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
 <!-- Include bootgrid plugin (below), -->
    <script src="js/jquery.bootgrid-1.3.1/jquery.bootgrid.min.js"></script>

  <!-- now write the script specific for this grid -->
   <script type="text/javascript">
 //Refer to http://jquery-bootgrid.com/Documentation for methods, events and settings
        var grid = $("#grid-data").bootgrid({    
         post: function (){
          return {
              id: "b0df282a-0d67-40e5-8558-c9e93b7befed"
          };
      },
      formatters: {
          "commands": function(column, row)
          {
              return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.id + "\"><span class=\"fa fa-pencil\"></span></button> " + 
                  "<button type=\"button\" class=\"btn btn-xs btn-default command-delete\" data-row-id=\"" + row.id + "\"><span class=\"fa fa-trash-o\"></span></button>";
          }
      }
        }).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"));
            });
        });
 
 </script>
 </body>
</html>

This is driving me crazy, many thanks for your help in advance....

score -1 · Answer 1 · answered Sep 05 '16 at 06:08

I am using below bootgrid configuration options,its same as your code instead of edit and delete icon classes,i am using bootstrap

$( 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 "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.id + "\"><span class=\"glyphicon glyphicon-edit\"></span></button> " + 
                        "<button type=\"button\" class=\"btn btn-xs btn-default command-delete\" data-row-id=\"" + row.id + "\"><span class=\"glyphicon glyphicon-trash\"></span></button>";
                }
            }
   }).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 extending below tutorials, simple-example-bootgrid-server-side-with-php-mysql-and-ajax/

You were right Parvez, thank you so much, what I was missing is that I had another object with the command column name, hence, buttons were not showing up.... really appreciated your help. — Juankam Del Toro, Sep 14 '16 at 20:53

jquery bootgrid not displaying command buttons

1 Answers1