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
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>