jqueryasp.net-mvcrazorjquery-bootgrid

JQuery bootgrid plugin with ASP.NET Razor pages


I have simple HTML table in Razor view

 <table id="grid"  class="table table-condensed table-hover table-striped">
            <tr>
                  <th data-column-id="Detail">
        Detail
      </th>
                <th data-column-id="Client_Ref">
                    Client Ref
                </th>
                <th data-column-id="Acc">
                     Acc
                </th>

            </tr>

            @foreach (var item in Model)
            {
                <tr>
                    <td>
  @Html.ActionLink(" ", "Detail", new {
   id = item.KeyOfTransaction},
 new { @class = "btn btn-default glyphicon glyphicon-book" })
            </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Client_Ref)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Acc)
                    </td>

                </tr>
            }

        </table>

When I apply JQuery Bootgrid, only search field is shown, but whole table become empty

@section Scripts {
    <script>

        $(document).ready(function () {

            $("#grid").bootgrid();
        })

    </script>
}

Anyone has idea what is wrong here ? I need to filter data, sort it and do all the other stuff this plugin provides


Solution

  • The bootgrid plugin requires that you put your table rows into the tbody tags and your header row into the thead tag

    <table id="grid" class="table table-condensed table-hover table-striped">
      <thead>
        <tr>
             <th data-column-id="Detail">
            Detail
          </th>
          <th data-column-id="Client_Ref">
            Client Ref
          </th>
          <th data-column-id="Acc">
            Acc
          </th>
         </tr>
      </thead>
      <tbody>
        @foreach (var item in Model) {
        <tr>
    <td>
      @Html.ActionLink(" ", "Detail", new {
       id = item.KeyOfTransaction},
     new { @class = "btn btn-default glyphicon glyphicon-book" })
                </td>
          <td>
            @Html.DisplayFor(modelItem => item.Client_Ref)
          </td>
          <td>
            @Html.DisplayFor(modelItem => item.Acc)
          </td>
    
        </tr>
        }
      </tbody>
    
    </table>