1

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

Jalle
  • 1,566
  • 5
  • 22
  • 42

2 Answers2

0

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>
Jalle
  • 1,566
  • 5
  • 22
  • 42
nemesv
  • 138,284
  • 16
  • 416
  • 359
  • great ! that worked before marking your answer as correct i have 1 more question. – Jalle Dec 20 '18 at 11:04
  • Table has one column with @Html.ActionLink. How do I make this one work ? – Jalle Dec 20 '18 at 11:09
  • @Jalle what is the problem with the `@Html.ActionLink` is it not rendered or not working correclty? – nemesv Dec 20 '18 at 11:12
  • @Jalle are you using Bootstrap 4 or Bootstrap 3? Because glyphicon were removed from Boostrap 3 so you need to use a different icon set. Otherwise your actionlink should work fine – nemesv Dec 20 '18 at 12:09
  • I've fixed it . – Jalle Dec 20 '18 at 15:29
0

<thead> and <tbody> tag is missing

Example

<table id="grid-basic" 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>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>10238</td>
            <td>eduardo@pingpong.com</td>
            <td>14.10.2013</td>
        </tr>
        ...
    </tbody>
</table>
Harshit Tailor
  • 3,261
  • 6
  • 27
  • 40