jquery bootgrid not displaying command buttons
<p>I've followed the below JQuery Bootgrid tutorials/documentation in order to create a dataGrid for my DB. </p>

<ul>
<li><p><a href="http://www.abrandao.com/2014/11/bootstrap-bootgrid-with-php-pdo-server-script/" rel="nofollow">http://www.abrandao.com/2014/11/bootstrap-bootgrid-with-php-pdo-server-script/</a></p></li>
<li><p><a href="http://www.jquery-bootgrid.com/Documentation#column" rel="nofollow">http://www.jquery-bootgrid.com/Documentation#column</a></p></li>
</ul>

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

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

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

  &lt;!-- now write the script specific for this grid --&gt;
   &lt;script type="text/javascript"&gt;
 //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 "&lt;button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.id + "\"&gt;&lt;span class=\"fa fa-pencil\"&gt;&lt;/span&gt;&lt;/button&gt; " + 
                  "&lt;button type=\"button\" class=\"btn btn-xs btn-default command-delete\" data-row-id=\"" + row.id + "\"&gt;&lt;span class=\"fa fa-trash-o\"&gt;&lt;/span&gt;&lt;/button&gt;";
          }
      }
        }).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"));
            });
        });
 
 &lt;/script&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>This is driving me crazy, many thanks for your help in advance....</p>