在 webgrid 中实现 bootstrap 分页

Question

我想用 bootstrap 设计我的 Webgrid 分页样式，但找不到任何好的方法。

我找到了这个包裹https://www.nuget.org/packages/WebGridBootstrapPagination/ 但是装了之后就不知道怎么用了

这是我的网络网格的一部分

@model IEnumerable<AnalyticConfig.Models.User>
@{
  var grid = new WebGrid(Model, ajaxUpdateContainerId: "ajaxgrid",    ajaxUpdateCallback: "webgrid", rowsPerPage: 5);
  grid.Pager(WebGridPagerModes.All);
}


    <div id="ajaxgrid" class="row panel-body table-responsive">
    @grid.GetHtml(
    tableStyle: "table table-striped table-list table-hover",
    columns: grid.Columns(
                grid.Column(canSort: false, style: "col-md-2", format: 
                @<text>
                    <a href='#' class="btn btn-info glyphicon glyphicon-pencil display edit-btn"></a>
                    <a href="#" class="btn btn-success glyphicon glyphicon-ok modify save-btn"></a>
                    <a href="#" class="btn btn-warning glyphicon glyphicon-remove modify cancel-btn"></a>
                    <a href="#" class="btn btn-danger glyphicon glyphicon-trash display delete-btn"></a>
                </text>),
                grid.Column(null, null, style:"hidecol", format: @<input type="hidden" id="in_ID" value="@item.Id" />),
                grid.Column("SchoolUnit", "Skolenhet", style: "col-md-2", format:
                @<text>
                    <span class="display"><label id="lbl_unit">@item.SchoolUnit</label></span>
                    @Html.DropDownList("in_unit", new SelectList(ViewBag.schoolUnitList, "Text", "Value", @item.SchoolUnit), new { @class = "form-control modify" })
                </text>),
                grid.Column("Name", "Namn", style: "col-md-2", format:
                 @<text>
                    <span class="display"><label id="lbl_name">@item.Name</label></span>
                    <input type="text" id="in_name" value="@item.Name" class="form-control modify" />
                </text>)

    )
    </div>

如果您知道如何使用该软件包或知道任何其他方法，请告诉我。

Answer 1

我的解决方案。没有为 webgrid 分页添加自定义 css 或 html

$("tfoot a").addClass('btn btn-default'); // add bootstrap buttons

// add active bootstrap button
$("tfoot td")
  .contents()
  .filter(function () {     
      if (this.nodeType === 3 && this.length > 1) {
          return this.nodeType
      }
  })
  .wrap('<span class="btn btn-primary" />');

结果

在 webgrid 中实现 bootstrap 分页

Implement bootstrap pagination in webgrid

asp.net

webgrid

twitter-bootstrap