Asp.net Gridview的Datatable插件

Question

我在我的asp.net页面中使用了asp.net gridview控件。我想使用JQUERY数据表插件进行分页。下面是我的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> 

问题分页是没有得到的形式实现，我得到错误 无法读取的不确定 财产“MDATA”当我在运行时检查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> 

我abl e看到两次创建了。可能是这是造成问题。 桑杰塔

Answer 1

如何删除空THEAD fromggridview

在此先感谢试试这个

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