如何求解GridView标头在单击JQuery DataTable的下一页时消失了错误

我在gridview上添加了一个jQuery datatable。当我单击第二页时，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 DataTable中进行搜索。

我希望您意识到此插件要求该表元素在斜面部分中必须定义其标题。这就是标准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中的数据/内容。但是toby部分事实并不是问题。这个插件即使没有它！

现在，目前最简单的方法是通过JS操纵它，以使第一行进入斜线。之后，您编写的代码可能有效。

这是一个样本。

    $(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并覆盖其标记生成，以使其生成所需的部分。

相关内容

最新更新

热门标签：