Fixed Header using JQuery for HTML Table in MVC

See more:

C#

C#4.0

MVC

ASP.NET4

I am creating table in my application like below

<table id="listTable" width="700px" class="full">
        <tr>
            <th>Name</th>
            <th>Group Name</th>
            <th>Status</th>
            <th>Started At</th>
            <th>Last Run</th>
            <th>Next Run</th>
            <th>Last Run Outcome</th>
             <%--<th>Edit</th>--%>
        </tr>
        <%if(ViewData["Jobs"] != null)
          { %>
        <%foreach (Jobs job in (List<Jobs>)ViewData["Jobs"])
          {%>
            <tr>

                <td><%:  Html.ActionLink(job.Name, "Redirect", "Jobs", new { Name = job.Name }, new { @style = "color:Blue;font-size: 11px;text-decoration:none;" })%></td>
                <td><%= job.GroupName %></td>
                <td><%= job.Status %></td>
                <td><%= job.StartedAt %></td>
                <td><%= job.LastRun %></td>
                <td><%= job.NextRun %></td>
                <td><%= job.LastRunOutCome %></td>

                <%--<td class="editBtn">
                    <%:  Html.ActionLink("Edit", "Redirect", "Jobs")%>
                </td>--%>
            </tr>
        <%}%>
        <%} %>
    </table>

and i am using JQuery for pagination like below

$(document).ready(function () {
        var rows = $('table').find('tbody tr').length;
        var no_rec_per_page = 11;
        var no_pages = Math.ceil(rows / no_rec_per_page);
        var $pagenumbers = $('<div id="pages"></div>');
        for (i = 0; i < no_pages; i++) {
            $('<span class="page">' + (i + 1) + '</span>').appendTo($pagenumbers);
        }
        $pagenumbers.insertAfter('table');
        $('.page').hover(function () {
            $(this).addClass('hover');
        }, function () {
            $(this).removeClass('hover');
        });
        $('table').find('tbody tr').hide();
        var tr = $('table tbody tr');
        for (var i = 0; i <= no_rec_per_page - 1; i++) {
            $(tr[i]).show();
        }
        $('span').click(function (event) {
            $('table').find('tbody tr').hide();
            for (i = ($(this).text() - 1) * no_rec_per_page; i <= $(this).text() * no_rec_per_page - 1; i++) {
                $(tr[i]).show();
            }
        });
    });

So i need Fixed Header for Pagination using JQuery.

Regards
Srinivas