Question

我在asp.net页面中使用了asp.net gridview控件。我想使用JQUERY datatable插件进行分页。以下是我的gridview设计，

                            <FooterStyle Font-Bold="True" ForeColor="White"  />
                            <AlternatingRowStyle Height="25px"  />
                            <Columns>
                                <asp:BoundField HeaderText="Resource Name" DataField="resourceName" />
                                <asp:BoundField HeaderText="Task Type" DataField="taskType" />
                                <asp:BoundField HeaderText="Task Sub Type" DataField="taskSubType" />
                                <asp:TemplateField HeaderText="Sat">
                                    <ItemTemplate>
                                        <asp:Label ID="lblSat" runat="server" TabIndex="1" Text='<%# Eval("satHrs")+":"+ Eval("satMin") %>'></asp:Label>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Sun">
                                    <ItemTemplate>
                                        <asp:Label ID="lblSun" runat="server" TabIndex="2" Text='<%# Eval("sunHrs")+":"+ Eval("sunMin") %>'></asp:Label>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Mon">
                                    <ItemTemplate>
                                        <asp:Label ID="lblMon" runat="server" TabIndex="3" Text='<%# Eval("monHrs")+":"+ Eval("monMin") %>'></asp:Label>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Tue">
                                    <ItemTemplate>
                                        <asp:Label ID="lblTue" runat="server" TabIndex="4" Text='<%# Eval("tueHrs")+":"+ Eval("tueMin") %>'></asp:Label>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Wed">
                                    <ItemTemplate>
                                        <asp:Label ID="lblWed" runat="server" TabIndex="5" Text='<%# Eval("wedHrs")+":"+ Eval("wedMin") %>'></asp:Label>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Thu">
                                    <ItemTemplate>
                                        <asp:Label ID="lblThu" runat="server" TabIndex="6" Text='<%# Eval("thuHrs")+":"+ Eval("thuMin") %>'></asp:Label>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Fri">
                                    <ItemTemplate>
                                        <asp:Label ID="lblFri" runat="server" TabIndex="7" Text='<%# Eval("friHrs")+":"+ Eval("friMin") %>'></asp:Label>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:BoundField HeaderText="Total Hours" DataField="totalHrs" />
                                <asp:BoundField HeaderText="Comments" DataField="comments" />
                                <asp:TemplateField HeaderText="Approve" ItemStyle-Width="114">
                                    <ItemTemplate>
                                      <%--  <div>--%>
                                            <input type="hidden" id="hdnTaskDetailIds" value='<%# Eval("taskDetailId")%>' runat="server" />
                                            <%--<span style="float: left">--%>
                                                <asp:RadioButton ID="rbTaskApprovedYes" runat="server" AutoPostBack="true" GroupName="isApproved"
                                                    Text="Yes" ForeColor="Green" Font-Bold="True" OnCheckedChanged="rbTaskApprovedYes_CheckedChanged" />
                                            <%--</span><span style="float: right">--%>
                                                <asp:RadioButton ID="rbTaskApprovedNo" runat="server" AutoPostBack="true" GroupName="isApproved"
                                                    Text="No" ForeColor="Red" Font-Bold="True" TextAlign="Right" OnCheckedChanged="rbTaskApprovedNo_CheckedChanged" />
                                           <%-- </span>--%>
                                            <%--<div style="float: left; display: block;">--%>
                                                <asp:RadioButton ID="rbTaskapprovedNB" runat="server" GroupName="isApproved" Text="As non-billable"
                                                    AutoPostBack="true" Font-Bold="True" OnCheckedChanged="rbTaskapprovedNB_CheckedChanged" />
                                            <%--</div>
                                        </div>--%>
                                    </ItemTemplate>
                                    <ItemStyle Width="114px" />
                                </asp:TemplateField>

                                <asp:TemplateField HeaderText="Comment">
                                    <ItemTemplate>
                                        <asp:TextBox ID="txtComment" CssClass="animatedComment" runat="server" TextMode="MultiLine"></asp:TextBox>

                                    </ItemTemplate>
                                </asp:TemplateField>
                            </Columns>

                        </asp:GridView>

我使用下面的代码来应用分页

<script type="text/javascript" src="../JS/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="../JS/dataTables.bootstrap.js"></script>
<script type="text/javascript">
 $(function () {
            $('#cphBody_gvTaskDtl').prepend($("<thead></thead>").append($(this).find("tr:first"))).dataTable({ "aaSorting": [] });

        }); 
</script>

问题是分页没有得到重视，因为我得到错误无法读取属性＆＃39; mData＆＃39;未定义的当我在运行时从下面的浏览器检查Gridview是我发现的HTML，

<table cellspacing="0" rules="all" class="table table-striped table-bordered responsive dataTable no-footer dtr-inline grid-margin-top" id="cphBody_gvTaskDtl" style="border-color:#E7E7FF;border-width:1px;border-style:solid;width:100%;border-collapse:collapse;">
<thead></thead>
        <thead>
            <tr>
                <th scope="col">Resource Name</th><th scope="col">Task Type</th><th scope="col">Task Sub Type</th><th scope="col">Sat<br>28/3</th><th scope="col">Sun<br>29/3</th><th scope="col">Mon<br>30/3</th><th scope="col">Tue<br>31/3</th><th scope="col">Wed<br>1/4</th><th scope="col">Thu<br>2/4</th><th scope="col">Fri<br>3/4</th><th scope="col">Total Hours</th><th scope="col">Comments</th><th scope="col">Approve</th><th scope="col">Comment</th>
            </tr>
        </thead><tbody>
            <tr>
                <td>Andrew Jerome Joseph</td><td>Account Management</td><td>Meetings</td><td>
                                            <span id="cphBody_gvTaskDtl_lblSat_0" tabindex="1">0:0</span>
                                        </td><td>
                                            <span id="cphBody_gvTaskDtl_lblSun_0" tabindex="2">0:0</span>
                                        </td><td>
                                            <span id="cphBody_gvTaskDtl_lblMon_0" tabindex="3">2:0</span>
                                        </td><td>
                                            <span id="cphBody_gvTaskDtl_lblTue_0" tabindex="4">2:0</span>
                                        </td><td>
                                            <span id="cphBody_gvTaskDtl_lblWed_0" tabindex="5">0:0</span>
                                        </td><td>
                                            <span id="cphBody_gvTaskDtl_lblThu_0" tabindex="6">0:0</span>
                                        </td><td>
                                            <span id="cphBody_gvTaskDtl_lblFri_0" tabindex="7">0:0</span>
                                        </td><td>4:0</td><td>&nbsp;</td><td style="width:114px;">

                                                <input name="ctl00$cphBody$gvTaskDtl$ctl02$hdnTaskDetailIds" type="hidden" id="cphBody_gvTaskDtl_hdnTaskDetailIds_0" value="-342019-342020-342021-342022">

                                                    <span style="color:Green;font-weight:bold;"><input id="cphBody_gvTaskDtl_rbTaskApprovedYes_0" type="radio" name="ctl00$cphBody$gvTaskDtl$ctl02$isApproved" value="rbTaskApprovedYes" onclick="javascript:setTimeout('__doPostBack(\'ctl00$cphBody$gvTaskDtl$ctl02$rbTaskApprovedYes\',\'\')', 0)"><label for="cphBody_gvTaskDtl_rbTaskApprovedYes_0">Yes</label></span>

                                                    <span style="color:Red;font-weight:bold;"><input id="cphBody_gvTaskDtl_rbTaskApprovedNo_0" type="radio" name="ctl00$cphBody$gvTaskDtl$ctl02$isApproved" value="rbTaskApprovedNo" onclick="javascript:setTimeout('__doPostBack(\'ctl00$cphBody$gvTaskDtl$ctl02$rbTaskApprovedNo\',\'\')', 0)"><label for="cphBody_gvTaskDtl_rbTaskApprovedNo_0">No</label></span>


                                                    <span style="font-weight:bold;"><input id="cphBody_gvTaskDtl_rbTaskapprovedNB_0" type="radio" name="ctl00$cphBody$gvTaskDtl$ctl02$isApproved" value="rbTaskapprovedNB" onclick="javascript:setTimeout('__doPostBack(\'ctl00$cphBody$gvTaskDtl$ctl02$rbTaskapprovedNB\',\'\')', 0)"><label for="cphBody_gvTaskDtl_rbTaskapprovedNB_0">As non-billable</label></span>

                                        </td><td>
                                            <textarea name="ctl00$cphBody$gvTaskDtl$ctl02$txtComment" rows="2" cols="20" id="cphBody_gvTaskDtl_txtComment_0" class="animatedComment"></textarea>

                                        </td>
            </tr>
<tbody>----</tbody></table>

我能够看到两次创建thead。可能这是创造问题。如何从theggridview中删除空的thead

提前致谢桑杰塔

Answer 1

试试这个

$('#cphBody_gvTaskDtl').dataTable({ "aaSorting": [] });

使用Asp.net Gridview的Datatable插件

1 个答案: