HTML <table data-toggle="bootgrid" data-ajax="true" data-url="/api/data/basic"> <thead> <tr> <th data-column-id="id" data-type="numeric" data-identifier="true">ID</th> <th data-column-id="sender">Sender</th> <th data-column-id="received" data-order="desc">Received</th> </tr> </thead> </table> POST Body (Request) current=1&rowCount=10&sort[sender]=asc&searchPhrase= JSON (Response) { "current": 1, "rowCount": 10, "rows": [ { "id": 19, "sender": "123@test.de", "received": "2014-05-30T22:15:00" }, { "id": 14, "sender": "123@test.de", "received": "2014-05-30T20:15:00" }, ... ], "total": 1123 }

Start Example

ID Sender Received Commands

HTML <table> <thead> <tr> <th data-column-id="id" data-type="numeric">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> </table> JavaScript var grid = $("#grid-command-buttons").bootgrid({ ajax: true, post: function () { return { id: "b0df282a-0d67-40e5-8558-c9e93b7befed" }; }, url: "/api/data/basic", 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")); }); }); POST Body (Request) current=1&rowCount=10&sort[sender]=asc&searchPhrase=&id=b0df282a-0d67-40e5-8558-c9e93b7befed JSON (Response) { "current": 1, "rowCount": 10, "rows": [ { "id": 19, "sender": "123@test.de", "received": "2014-05-30T22:15:00" }, { "id": 14, "sender": "123@test.de", "received": "2014-05-30T20:15:00" }, ... ], "total": 1123 }

More examples like manipulation will follow very soon. For experienced developer I recommend to see in code how feature-rich and flexible jQuery Bootgrid is. Here you see only a small set of features.