修复了在MVC中使用JQuery for HTML Table的Header [英] Fixed Header using JQuery for HTML Table in MVC

问题描述

我正在我的应用程序中创建表格，如下所示

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>

我正在使用JQuery进行分页，如下所示

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();
            }
        });
    });

所以我需要使用JQuery固定标头进行分页。



问候

Srinivas

So i need Fixed Header for Pagination using JQuery.

Regards
Srinivas

推荐答案

（文件）.ready（function（）{
var rows =

(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

('table').find('tbody tr').length; var no_rec_per_page = 11; var no_pages = Math.ceil(rows / no_rec_per_page); var

pagenumbers =

pagenumbers =

这篇关于修复了在MVC中使用JQuery for HTML Table的Header的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！