BOOTGRID - Delete Action - Basic Example

HTML

<script src="http://www.scic.com/files/eddie/jquery.bootgrid.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<table id="grid-command-buttons" class="table table-condensed table-hover table-striped bootgrid-table" aria-busy="false">
    <thead>
        <tr>
            <th data-column-id="id" data-identifier="true" data-type="numeric" data-visible="false">ID</th>
            <th data-column-id="sender">Sender</th>
            <th data-column-id="received" data-order="desc">Received</th>
            <th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th>
        </tr>                    
    </thead>
    <tbody>
        <tr data-row-id="xxx">
            <td class="text-left">1122</td>
            <td class="text-left">[email protected] 1</td>
            <td class="text-left">2014-10-27T07:23:43</td>
            <td class="text-left"></td>
        </tr>
        <tr data-row-id="xxx">
            <td class="text-left">1123</td>
            <td class="text-left">[email protected] 2</td>
            <td class="text-left">2014-10-27T07:23:43</td>
            <td class="text-left"></td>
        </tr>
        <tr data-row-id="xxx">
            <td class="text-left">1124</td>
            <td class="text-left">[email protected] 3</td>
            <td class="text-left">2014-10-27T07:23:43</td>
            <td class="text-left"></td>
        </tr>
    </tbody>
</table>

CSS

.bootgrid-header,
.bootgrid-footer {
  margin: 15px 0;
}
.bootgrid-header a,
.bootgrid-footer a {
  outline: 0;
}
.bootgrid-header .search,
.bootgrid-footer .search {
  display: inline-block;
  margin: 0 20px 0 0;
  vertical-align: middle;
  width: 180px;
}
.bootgrid-header .search .glyphicon,
.bootgrid-footer .search .glyphicon {
  top: 0;
}
.bootgrid-header .search.search-field::-ms-clear,
.bootgrid-footer .search.search-field::-ms-clear,
.bootgrid-header .search .search-field::-ms-clear,
.bootgrid-footer .search .search-field::-ms-clear {
  display: none;
}
.bootgrid-header .pagination,
.bootgrid-footer .pagination {
  margin: 0 !important;
}
.bootgrid-header .actionBar,
.bootgrid-footer .infoBar {
  text-align: right;
}
.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu,
.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu {
  text-align: left;
}
.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item,
.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item {
  cursor: pointer;
  display: block;
  margin: 0;
  padding: 3px 20px;
  white-space: nowrap;
}
.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item:hover,
.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item:hover,
.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item:focus,
.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item:focus {
  color: #262626;
  text-decoration: none;
  background-color: #f5f5f5;
}
.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item.dropdown-item-checkbox,
.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item.dropdown-item-checkbox,
.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item .dropdown-item-checkbox,
.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item...

JavaScript

var grid = $("#grid-command-buttons").bootgrid({
    rowSelect:                        true,
    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>";
        }
    }
});

$("#grid-command-buttons").on("loaded.rs.jquery.bootgrid", function()
{
    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)
    {
        var rows = Array();
        rows[0] = $(this).data("row-id");
alert( 'Delete - ' + rows[0] );
        $("#grid-command-buttons").bootgrid('remove', rows);
    });
});