Question

我在gridview上添加了一个jquery数据表。当我点击第二页时，gridview标题消失，再点击第一页，它们会再次显示。

我的代码是

    <head runat="server">
    <link href="Stylesheets/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" type="text/css" />`enter code here`
    <link href="Stylesheets/demo_table.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.dataTables.columnFilter.js" type="text/javascript"></script>
    <script src="Scripts/jquery.dataTables.min.js" type="text/javascript"></script>
         <script type="text/javascript">
          $(document).ready(function () {
            $('.display').dataTable({
                "sPaginationType": "full_numbers",
                "iDisplayLength": 10,
                "aaSorting": [],
                "bDestroy": true,
                "bRetrieve": true,
                'bProcessing': true,
                'bServerSide': false
            })

            ApplyDataTable('.display');
        });
    </script>
     </head>



 <asp:GridView ID="gvReport" TabIndex="11" class="display" runat="server" Height="176px" Width="100%"
                            BackColor="#EEEEEE" Font-Size="10pt" Font-Names="Verdana" AutoGenerateColumns="False"
                            DataKeyField="TaskId" HorizontalAlign="Center" Font-Name="Verdana" ShowFooter="True"
                            OnRowDataBound="gvReport_RowDataBound">
                            <HeaderStyle Font-Bold="True" HorizontalAlign="Center" ForeColor="White" BackColor="Black">
                            </HeaderStyle>
                            <FooterStyle BorderColor="Black" BackColor="Black"></FooterStyle>
                            <Columns>
                                <asp:BoundField DataField="FullName" ItemStyle-HorizontalAlign="Left" ReadOnly="True"
                                    HeaderText="Resource" HeaderStyle-Width="250px" />
                                <asp:BoundField DataField="Date" ItemStyle-HorizontalAlign="Left" ReadOnly="True"
                                    HeaderText="Date" HeaderStyle-Width="200px" />
<asp:TemplateField HeaderText="Score" HeaderStyle-Width="100px">
                                    <ItemTemplate>
                                        <asp:Label ID="lblScore" runat="server"></asp:Label>
                                    </ItemTemplate>
                                </asp:TemplateField>
                            </Columns>
                        </asp:GridView>

右侧角落的搜索文本框也不会搜索网格中的任何记录。如何解决头部消失问题并在jquery数据表中搜索。

Answer 1

我希望你意识到这个插件要求table元素的标题要在thead部分中定义。这就是标准html表的外观：

<table>
    <thead>
        <tr>
            <th>Column1</th>
            <th>Column2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data1</td>
            <td>Data2</td>
        </tr>
    </tbody>
</table>

事实上，这是标准：thead中的标头和tbody中的数据/内容。但是tbody部分结果不是问题。这个插件即使没有它也可以工作！

现在，目前最简单的方法是通过js操纵它，以便将第一行放入thead中。在此之后，您编写的代码可能会起作用。

这是一个示例。

    $(function () {
        var gv = $('#GridView1');
        var thead =$('<thead/>');
        thead.append(gv.find('tr:eq(0)'));
        gv.append(thead);
        gv.dataTable({            
            "sPaginationType": "full_numbers",
            "iDisplayLength": 10,
            "aaSorting": [],
            "bDestroy": true,
            "bRetrieve": true,
            'bProcessing': true,
            'bServerSide': false                
        });            
    });

您需要对其进行修改以使其适用于您的情况。

更复杂的方法是扩展GridView并覆盖其标记生成，以便生成所需的部分。

如何解决gridview标题消失了点击jquery数据表的下一页的错误？

1 个答案: