改进asp.net mvc web网格分页链接的外观

我的asp.net mvc razor视图中有以下web网格：-

 var grid = new WebGrid(
                        canPage: true,
                        rowsPerPage: Model.PageSize,
                        canSort: true,
                        ajaxUpdateContainerId: "skillgrid", fieldNamePrefix: "skill");

            grid.Bind(Model.Content, rowCount: Model.TotalRecords, autoSortAndPage: false);
            grid.Pager(WebGridPagerModes.All);

            @grid.GetHtml(htmlAttributes: new { id = "grid" },   // id for ajaxUpdateContainerId parameter
            fillEmptyRows: false,
            tableStyle: "table table-bordered table-hover",
            mode: WebGridPagerModes.All,
            columns: gridcolumns

            );
            }

目前，分页链接将显示为以下简单数字：-

当我试图显示分页链接时，如下所示：-

因为后面的外观允许在分页链接之间更轻松地导航

谢谢

编辑

网格的呈现html为

 <div class="box-content">

            <div id="skillgridarea">
              <div class="well">
<form action="/Skill/GetStaffSkills" data-ajax="true" data-ajax-complete="autoCompleteOnPartial" data-ajax-method="get" data-ajax-mode="replace" data-ajax-update="#skillgridarea" id="form0" method="post">      <label>There are 57 item.</label>
        <div class="row">

            <div class="col-sm-8">
                <div class="input-group">
                    <input id="skillmasterDetail" name="skillmasterDetail" type="hidden" value="" />
                    <input id="skillcustomerDetails" name="skillcustomerDetails" type="hidden" value="" />
                    <input id="skillIsActive" name="skillIsActive" type="hidden" value="True" />
                    <input id="skillpre" name="skillpre" type="hidden" value="" />
                    <input type="text"
                        name="skillfilter"
                        id="skillfilter"
                        class="form-control"
                        style="display: inline"
                        data-autocomplete-source= "/Skill/AutoComplete?isactive=True" 
                        placeholder="Search by Skill Name" />
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="submit">Go</button>
                    </span>

                </div>
            </div>

            <div class="pull-right col-lg-1">   
                <a class="btn btn-success"  href="/Skill/Create" id="btnCreate">
                     <span class="glyphicon glyphicon-plus"></span>      
                </a>
            </div>
        </div></form>   
        <div style="margin-top:17px;">
        <script type="text/javascript">
        (function($) {
            $.fn.swhgLoad = function(url, containerId, callback) {
                url = url + (url.indexOf('?') == -1 ? '?' : '&') + '__swhg=' + new Date().getTime();

                $('<div/>').load(url + ' ' + containerId, function(data, status, xhr) {
                    $(containerId).replaceWith($(this).html());
                    if (typeof(callback) === 'function') {
                        callback.apply(this, arguments);
                    }
                });
                return this;
            }

            $(function() {
                $('table[data-swhgajax="true"],span[data-swhgajax="true"]').each(function() {
                    var self = $(this);
                    var containerId = '#' + self.data('swhgcontainer');
                    var callback = getFunction(self.data('swhgcallback'));

                    $(containerId).parent().delegate(containerId + ' a[data-swhglnk="true"]', 'click', function() {
                        $(containerId).swhgLoad($(this).attr('href'), containerId, callback);
                        return false;
                    });
                })
            });

            function getFunction(code, argNames) {
                argNames = argNames || [];
                var fn = window, parts = (code || "").split(".");
                while (fn && parts.length) {
                    fn = fn[parts.shift()];
                }
                if (typeof (fn) === "function") {
                    return fn;
                }
                argNames.push(code);
                return Function.constructor.apply(null, argNames);
            }
        })(jQuery);
        </script>
    <table class="table table-bordered table-hover" id="skillgrid" data-swhgajax="true" data-swhgcontainer="skillgrid" data-swhgcallback="">
    <thead>
        <tr>
            <th scope="col">
<a data-swhglnk="true" href="/Skill?skillsort=Name&amp;skillsortdir=ASC">Skill Name</a>            </th>
            <th scope="col">
<a data-swhglnk="true" href="/Skill?skillsort=SkillStatu.SkillStatusName&amp;skillsortdir=ASC">Skill Status</a>            </th>
            <th scope="col">
Customer            </th>
            <th scope="col">
<a data-swhglnk="true" href="/Skill?skillsort=Description&amp;skillsortdir=ASC">Description</a>            </th>
            <th scope="col">
<a data-swhglnk="true" href="/Skill?skillsort=SkillType.Name&amp;skillsortdir=ASC">Skill Type</a>            </th>
            <th scope="col">
Level 0            </th>
            <th scope="col">
Level 1            </th>
            <th scope="col">
Level 2            </th>
            <th scope="col">
Level 3            </th>
            <th scope="col">
Actions            </th>
        </tr>
    </thead>
    <tfoot>
        <tr >
            <td colspan="10"><a data-swhglnk="true" href="/Skill?skillpage=1">&lt;</a> <a data-swhglnk="true" href="/Skill?skillpage=1">1</a> 2 </td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>

            <a href="/Skill/Details/59">w</a>
             </td>
            <td>Pending</td>
            <td>
<a data-modal='' href="/skill/GetSkillCustomers/59"   title='GetListCustomer'>   
 0 Customer/s.</a>  

                 </td>
            <td>w</td>
            <td>e</td>
            <td>
<a data-modal='' href="/skill/GetSkillUsers/59?levelID=1"  id= "59" title='GetListUser'>   
 0 Staff.</a>  
            </td>
            <td>  <a data-modal='' href="/skill/GetSkillUsers/59?levelID=2"   id= "59" title='GetListUser'>  
 0  Staff.</a>  
</td>
            <td>
 <a data-modal='' href="/skill/GetSkillUsers/59?levelID=3"   id= "59" title='GetListUser'>   
 1   Staff.</a> 
            </td>
            <td>
 <a data-modal='' href="/skill/GetSkillUsers/59?levelID=4"   id= "59" title='GetListUser'>   
 0  Staff.</a>  
            </td>
            <td>



<a  href="/Skill/Details/59"  id="59" title="Detail"> <span class='glyphicon glyphicon-search'> </span> </a>
<a href="/Skill/Edit/59"  id="59" title="Edit"> <span class='glyphicon glyphicon-edit'> </span> </a>
<a data-modal='' href="/Skill/Deactivate/59"  id="59" title='DeActivate'> <span class='glyphicon glyphicon-remove'> </span> </a>

</td>
        </tr>
       //code goes here/........
    </tbody>
    </table>

             </div>
    </div>

                </div>

</div></div></div>
    </div>

共有57项。
去
（函数（$）{
$.fn.swhgLoad=函数（url、容器ID、回调）{
url=url+（url.indexOf（'？'）==-1？'？'：'&'）+'\uu swhg='+new Date（）.getTime（）；
$（''）.load（url+''+容器ID，函数（数据，状态，xhr）{
$（containerId）.replaceWith（$（this.html（））；
if（类型（回调）=“函数”）{
apply（这个，参数）；
}
});
归还这个；
}
$（函数（）{
$（'table[data swhgajax=“true”]，span[data swhgajax=“true”]）。每个（函数（）{
var self=$（这是）；
var containerId='#'+self.data（'swhgcontainer'）；
var callback=getFunction（self.data（'swhgcallback'）；
$（containerId）.parent（）.delegate（containerId+'a[data swhglnk=“true”]”，'click'，function（）{
$（containerId）.swhgLoad（$（this.attr（'href'），containerId，回调）；
返回false；
});
})
});
函数getFunction（代码、argNames）{
argNames=argNames | |[]；
变量fn=窗口，部件=（代码| |“”）.split（“.”）；
while（fn&&parts.length）{
fn=fn[parts.shift（）]；
}
if（类型（fn）=“功能”）{
返回fn；
}
argNames.push（代码）；
返回函数.constructor.apply（null，argNames）；
}
})（jQuery）；
顾客
0级
一级
二级
三级
行动
2.
悬而未决的
W
E
//代码在这里/。。。。。。。。

EDIT2

 <div class="box-content">

            <div id="skillgridarea">
              <div class="well">

        <div style="margin-top:17px;">

    <table class="table table-bordered table-hover" id="skillgrid" data-swhgajax="true" data-swhgcontainer="skillgrid" data-swhgcallback="">
    <thead>
        <tr>
            <th scope="col">
      </th>
        </tr>
    </thead>
    <tfoot>
        <tr >
            <td colspan="10"><a data-swhglnk="true" href="/Skill?skillpage=1">&lt;</a> <a data-swhglnk="true" href="/Skill?skillpage=1">1</a> 2 </td>
        </tr>
    </tfoot>
    <tbody>
        <tr>

        </tr>
       //code goes here/........
    </tbody>
    </table>

             </div>
    </div>

                </div>

</div></div></div>
    </div>

2.
//代码在这里/。。。。。。。。

您可以为此使用引导css。请参考此@FrebinFrancis，谢谢您的回复，与您提供的链接相比，我似乎使用了不同的代码来构建webgrid，换句话说，我如何在代码中添加“”？由于我没有使用grid.PagerList..你能在问题中发布呈现页面列表的html吗？@FrebinFrancis你能检查我的编辑吗，我提供了呈现的html..你能单独发布呈现页面列表的html吗？所以这很容易理解。