Problem with Example JSON Command Buttons

I followed the steps, as the example puts, and I do not run neither the search nor the ordering by id or received. The example is in the url

My code is:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>jQuery Bootgrid Demo</title>

        <!-- CSS -->
        <link href="css/bootstrap/bootstrap.css" rel="stylesheet" />
        <link href="css/bootgrid/jquery.bootgrid.css" rel="stylesheet" />
        <style>
            @-webkit-viewport { width: device-width; }
            @-moz-viewport { width: device-width; }
            @-ms-viewport { width: device-width; }
            @-o-viewport { width: device-width; }
            @viewport { width: device-width; }

            body { padding-top: 70px; }

            .column .text { color: #f00 !important; }
            .cell { font-weight: bold; }
            .pagination{cursor: pointer}
        </style>

        <!-- JS -->
        <script src="js/jquery/jquery-1.11.1.min.js"></script>
        <script src="js/bootstrap/bootstrap.js"></script>
        <script src="js/bootgrid/jquery.bootgrid.js"></script>
        <script>
            $( document ).ready(function()
            {
                var grid = $("#grid-data").bootgrid(
                {
                    ajax: true,
                    url: "data.json",
                    formatters:
                    {
                        "commands": function(column, row)
                        {
                            return "<button type=\"button\" class=\"btn btn-sm btn-primary command-edit\" data-row-id=\"" + row.id + "\"><span class=\"glyphicon glyphicon-edit\"></span></button> " + 
                                "<button type=\"button\" class=\"btn btn-sm btn-danger 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"));
                    });
                });
            });
        </script>
    </head>
    <body>

        <div class="container-fluid">
            <div class="row">
                <div class="col-md-9">
                    <!--div class="table-responsive"-->
                        <table id="grid-data" class="table table-condensed table-hover table-striped">
                            <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>
                            <tbody>

                            </tbody>
                        </table>
                    <!--/div-->
                </div>
            </div>
        </div>
    </body>
</html>

data.json

{
  "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"
    }
    ]
}

rstaib / jquery-bootgrid

Problem with Example JSON Command Buttons #343