DataTable的插件与Asp.net的GridView [英] Datatable plugin with Asp.net Gridview
本文介绍了DataTable的插件与Asp.net的GridView的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我用asp.net GridView控件在我的asp.net页面。我想使用jQuery数据表插件分页。下面是我的gridview的设计，
I have used asp.net gridview control in my asp.net page . I want to use JQUERY datatable plugin for pagination. Below is my gridview design,
<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>
和我用下面的code申请分页
And i use below code to apply pagination
<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，
Problem is pagination is not getting implimented as i get error Cannot read property 'mData' of undefined When i check the Gridview at runtime from browser below is the html i find,
<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> </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已创建了两个时间。可能是这样创造的问题。如何删除空THEAD fromggridview
I am able to see two time thead has been created. May be this is creating issue. How to remove empty thead fromggridview
在此先感谢
Sangeetha
Thanks in advance Sangeetha
推荐答案
试试这个
$('#cphBody_gvTaskDtl').dataTable({ "aaSorting": [] });
这篇关于DataTable的插件与Asp.net的GridView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
