웨브 그리드에서 부트 스트랩 페이지 매김 구현하기

Question

웹 그리드 페이지 매김을 부트 스트랩으로 스타일링하고 싶지만 좋은 방법은 없습니다.

이 패키지를 발견했습니다. https://www.nuget.org/packages/WebGridBootstrapPagination/ 하지만 설치 후 사용할 생각이 없습니다. 패키지를 사용하거나 알려 주시기 바랍니다 다른 방법을 알고하는 방법을 알고 있다면 여기

내 webgrid

@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

내 솔루션. 어떤 사용자 정의 CSS 나 HTML은 webgrid 페이지 매김

$("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" />'); 

결과

에 대한 추가되지