# of records in table divided into pages - ASP.Net MVC Bootstrap
<p>How do I make the <code>HTML</code> <code>table</code> display 10 records only and whenever it goes beyond 10 it will display a link for pages below? e.g. "1, 2, 3.." And limits up to 7 links like how YouTube displays it (See image below)? I'm using ASP.Net MVC with Bootstrap by the way.</p>

<pre><code>&lt;table id="userTbl" onclick="getTblRec('userTbl,'userBody','0')" class="table-scroll table-striped bootgrid-table"&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th class="hidden"&gt;
                @Html.DisplayNameFor(model =&gt; model.USR_ID)
            &lt;/th&gt;
            &lt;th class="hidden"&gt;
                @Html.DisplayNameFor(model =&gt; model.USR_FNAME)
            &lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody id="userBody"&gt;
        @foreach (var item in Model)
        {
            &lt;tr&gt;
                &lt;td id="userId" class="hidden"&gt;
                    @Html.DisplayFor(modelItem =&gt; item.USR_ID)
                &lt;/td&gt;
                &lt;td&gt;
                    @Html.DisplayFor(modelItem =&gt; item.USR_FNAME)
                &lt;/td&gt;
                &lt;td&gt;
            &lt;/tr&gt;
        }
    &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p>YouTube sample pic:</p>

<p><a href="https://i.stack.imgur.com/D4OQI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/D4OQI.png" alt="enter image description here"></a></p>