Open Manupucelano opened 7 years ago
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" } ] }
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:
data.json