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

Question

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

 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>

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>