带有 ASP.NET Razor 页面的 JQuery bootgrid 插件答案

【问题标题】：JQuery bootgrid plugin with ASP.NET Razor pages带有 ASP.NET Razor 页面的 JQuery bootgrid 插件
【发布时间】：2018-12-20 09:55:06
【问题描述】：

我在 Razor 视图中有简单的 HTML 表格

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

当我应用 JQuery Bootgrid 时，只显示搜索字段，但整个表变为空

@section Scripts {
    <script>

        $(document).ready(function () {

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

    </script>
}

有人知道这里有什么问题吗？我需要过滤数据，对其进行排序并执行此插件提供的所有其他操作

【问题讨论】：

标签： jquery asp.net-mvc razor jquery-bootgrid

【解决方案1】：

bootgrid 插件要求您将表格行放入 tbody 标记中，将标题行放入 thead 标记中

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

【讨论】：

太棒了！在将您的答案标记为正确之前有效，我还有 1 个问题。
表格有一列带有@Html.ActionLink。我如何使这个工作？
@Jalle @Html.ActionLink 有什么问题是它没有渲染还是不能正常工作？
@Jalle 您使用的是 Bootstrap 4 还是 Bootstrap 3？因为 glyphicon 已从 Boostrap 3 中删除，所以您需要使用不同的图标集。否则，您的操作链接应该可以正常工作
我已经修好了。

【解决方案2】：

<thead> 和 <tbody> 标签丢失

例子

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

【讨论】：