BootGrid Example JSON doesnt work (with code)

Question

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 Bootgrid Example JSON

In the example it works correctly and something is missing

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

Open your browser's console (e.g F12 in chrome, console tab) and check if it has errors. If it helps, see [this JSFiddle](https://jsfiddle.net/L2gfe6ey/1/) example. — Alisson Reinaldo Silva, Mar 09 '17 at 01:52
Your example works correctly, but when you put the external source json, you can neither filter, nor search — Manply, Mar 09 '17 at 08:31

score 1 · Answer 1 · answered Mar 09 '17 at 08:18

Hopefully my code as following is okay for you , on the other hand please let me know if my code isn't work in your environment .

<table id="grid" 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>


<script>
            var grid = $("#grid").bootgrid({
                ajax: true,
                ajaxSettings: {
                    method: "GET",
                    cache: false
                },
                url: 'data.json',
            }).on('loaded.rs.jquery.bootgrid', function () {

            });
        </script>

DATA.JSON

{
  "current": 1,
  "rowCount": 5,
  "rows": [
    {
      "id": "a0e3a286-4343-4240-8d6d-e79fa2e94b4c",
      "sender": "test@test.de",
      "received": "2014-04-17 15:08:03Z"
    },
    {
      "id": "dd9f2d42-9442-404c-8d2a-dd3bd2156c03",
      "sender": "test@test.de",
      "received": "2014-04-16 15:19:31Z"
    },
    {
      "id": "e9b8ede5-c1bf-4d90-b724-e7379b25f7b3",
      "sender": "test@test.de",
      "received": "2014-04-16 15:17:05Z"
    },
    {
      "id": "153d3acb-efe7-4b5f-a3a9-e8ac18bdec30",
      "sender": "test@test.de",
      "received": "2014-04-16 15:17:05Z"
    },
    {
      "id": "49bad60a-bbf7-42bf-b040-d901805ccbf1",
      "sender": "test@test.de",
      "received": "2014-04-15 11:23:06Z"
    }
  ],
  "total": 5
}

Your code is almost similar to mine, load the json correctly, but when you are going to sort by id or received it does not order or when you are fetching it does not search — Manply, Mar 09 '17 at 08:29
@Manply Hi please check [Bootgrid](http://www.jquery-bootgrid.com/Documentation) and insert attributions into your function. — Willie Cheng, Mar 09 '17 at 08:44
I don´t understand which attributions added in my function for correct function — Manply, Mar 09 '17 at 09:49
@Manply please follow my [Question](http://stackoverflow.com/questions/42664192/how-to-build-the-crud-with-ajax-json-format-between-jquery-bootgrid-and-c-sharp) ,I have the similar question that needs to solve too , sorry I cannot help you now,but I still work hardly to deal with my issue , maybe tomorrow I will help you to do your problem, sorry again — Willie Cheng, Mar 09 '17 at 10:27
@Manply let you know I have changed another grid to finish my project, BootGrid isn't useful for me, maybe you can refer JqGrid that has many documents to help programmer to do it. — Willie Cheng, Mar 13 '17 at 03:31

score 0 · Answer 2 · answered Mar 09 '17 at 13:05

If you are returning a simple file "data.json" like in your example then you will always get the full contents back. To have sorting, paging and searching you will need to implement an API or something similar which will then take POST or GET parameters (defined in the documentation) and then sort, page, search data.

You need something like this:

//url: "data.json", // This only serves a full file at once and doesn't know how to sort etc.
url: "/api/GetSomeJsonData"

Where /api/GetSomeJsonData is your API and supports these input parameters:

current= //current page you're on
rowCount= //rows per page
sort[sender]= //possible fields which were ordered + order direction
searchPhrase= //possible search term

BootGrid Example JSON doesnt work (with code)

2 Answers2