Jquery Bootgrid

This custom jquery bootgrid Object extends so that we can add buttons to the Top of Data Table

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.min.js"></script>
<html>

  <head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.min.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.min.js"></script>
  </head>
  <div class="row">
    <div class="col-md-4">



      <table id="grid-data" class="table table-condensed table-hover table-striped">
        <thead>

          <tr>
            <th data-column-id="id" data-visible="false" order=desc data-order="desc" data-identifier="true" data-type="numeric">ID</th>
            <th data-column-id="sender">Sender</th>
            <th data-formatter="commands" data-sortable="false">Commands</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>ABC</td>
          </tr>
          <tr>
            <td>2</td>
            <td>DEF</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>


</html>

JavaScript

function formatTable() {
  $("#grid-data").bootgrid({
    ajax: false,
    columnSelection: false,
    selection: false,
    sort:true,
    multiSelect: false,
    rowSelect: true,
    keepSelection: true,
    caseSensitive: false,
    rowCount: -1,
    templates: {
      search: "",
      actionButton: ""
    },
    formatters: { "commands": function(column, row)
        {
            return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.id + "\"  >Book</button> ";
        }},
    converters: {},
    labels: {
      noResults: "No results found",
    }
  });
}

//  set your counter to 1
var result = [];

function myLoop() {
  i++;
  //  create a loop function
  var JSONINFO = {
    "id": i,
    "sender": "test " + i
  };
  result.push(JSONINFO);
  $("#grid-data").bootgrid("append", result);
  setTimeout(function() { //  call a  setTimeout when the loop is called
    if (i < 10) { //  if the counter < 10, call the loop function
      myLoop(); //  ..  again which will trigger another 
    } //  ..  setTimeout()
  }, 500);
}
formatTable();
var i = 2;

myLoop();