DataTable插件不适用于grdi控制器 [英] DataTable Plug in Is not working for the grdi controle
本文介绍了DataTable插件不适用于grdi控制器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个要求，其中一个网格列应显示为第二行，我需要应用数据表搜索功能。
但数据表不适合这种情况。我在chrome的控制台中收到类似Uncaught TypeError：无法读取未定义的属性'className'的错误。请任何人都可以帮我将数据表添加到asp.net的网格控制中。
Aspx代码：
< script < span class =code-attribute> type = text / javascript src = // ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"> < / script >
< span class =code-keyword>< script type = text / javascript src = // datatables.net/download/build/jquery.dataTables.nightly.js\"> < / script >
< script 类型 = text / javascript >
$（document）.ready（function（）{
var yourTable = $（'＃<％=Gv.ClientID ％> '）。dataTable（{
//如果HTML表中只有三列，则此行会导致错误，因为它列出了aoColumnDefs中的四列。
aoColumnDefs：[{bSortable：false，aTargets：[0,1,2,3]}]
}）;
}）;
< / script >
< asp：GridView ID = Gv runat = server AutoGenerateColumns = false ClientIDMode = 静态
GridLines = 两者都 >
< 列 >
< asp：TemplateField HeaderText = 渲染引擎 >
< ItemTemplate >
< asp：Label ID = lblRender runat = server 文本 =' <％ #Eval（ Renderingengine）％> ; ' > < / asp：标签 >
< / ItemTemplate >
< / asp：TemplateField >
< asp：TemplateField HeaderText = 浏览器 >
< ItemTemplate >
< asp：标签 ID = lblBrowser runat = server 文字 =' <％ #Eval（ 浏览器）％> ' > < / asp：Label >
< / ItemTemplate >
< / asp：TemplateField >
< asp：TemplateField HeaderText = 平台 >
< ItemTemplate >
< asp：标签 ID = lblPlatform < span class =code-attribute> runat = server 文本 = ' <％ #Eval（ 平台）％> ' > ; < / asp：Label > ;
< / ItemTemplate >
< / asp：TemplateField >
< asp： TemplateField HeaderText = 引擎版本 >
< ItemTemplate >
< asp：标签 ID = lblEngine runat = server 文本 =' <％ #Eval（ Engineversion）％> ' > < span class =code-keyword>< / asp：Label >
< / ItemTemplate >
< / asp：TemplateField > ;
< asp：TemplateField HeaderText = CSS等级 >
< ItemTemplate >
< tr >
< td colspan = 4 >
< / td >
< span class =code-keyword>< td >
< asp：标签 ID = lblCss runat = server 文字 =' < span class =code-keyword> <％ #Bind（ CSSgrade）％> ' > < span class =code-keyword>< / asp：Label >
< / td >
< / tr >
< / ItemTemplate > ;
< / asp：TemplateField >
< /列 >
< / asp：GridView >
渲染后：
< 表 cellspacing = 0 规则 = all border = 1 id = Gv style = border-collapse：collapse; >
< thead >
< tr >
< th scope = col > 渲染引擎< / th > < th 范围 = col > 浏览器< < span class =code-leadattribute> / th > < th scope = col > 平台 < / th > < th 范围 = col > 引擎version < / th > < span class =code-keyword>< th scope = col > CSS等级< / th >
< / tr >
< / thead > < tbody >
< tr >
< td >
< span id = lblRender > Trident < / span >
< / td > < td >
< 跨度 id = lblBrowser > Internet Explorer 4.0 < < span class =code-leadattribute> / span >
< / td > < < span class =code-leadattribute> td >
< span id = lblPlatform > Win 95+ < / span >
< / td > < span class =code-keyword>< td >
< span id = lblEngine > < / span >
< / td > < td >
< tr &克t;
< td colspan = 4 >
< / td >
< td >
< span id = lblCss > 4 < / span >
< / td >
< / tr >
< / td >
< < span class =code-leadattribute> / tr > < tr >
< td >
< < span class =code-leadattribute> span id = lblRender > Trident < / span >
< / td > < td >
< span id = lblBrowser > Internet Explorer 5.0 < / span >
< / td > < td >
< span id = lblPlatform > Win 95+ < / span >
< / td > < td >
< span id = lblEngine > C < / span >
< / td > < td >
< tr >
< td colspan = 4 >
< / td >
< td >
< span id = lblCss > 5 < ; / span >
< / td >
< / tr >
< / td >
< / tr > < tr >
< td >
< span id = lblRender > Trident < / span >
< span class =code-keyword>< / td > < td >
< span id = lblBrowser > Internet Explorer 5.5 < / span >
< / td > < td >
< span id = lblPlatform > Win 95+ < / span >
< / td > < td >
< span id = lblEngine > < / span >
< ; / td > < td >
< tr >
< ; td colspan <跨度class =code-keyword> = 4 >
< / td >
< td >
< span id = lblCss > 5.5 < / span >
< / td >
< / tr >
< / td > ;
< / tr > < tr >
< td > ;
< span id = lblRender > Trident < / span >
< / td <跨度class =code-keyword>> < td >
< span id=\"lblBrowser\">Internet Explorer 6.0</span>
</td><td>
<span id=\"lblPlatform\">Win 95+</span>
</td><td>
<span id=\"lblEngine\">A</span>
</td>< span class=\"code-keyword\"><td>
<tr>
<td colspan=\"4\">
</td>
<td>
<span id=\"lblCss\">6</span>
</td>
</tr>
</td>
</tr><tr>
<td>
<span id=\"lblRender\">Gecko</span>
</td><td>
<span id=\"lblBrowser\">Firefox 1.0</span>
</td><td>
<span id=\"lblPlatform\">Win 98+ / OSX.2+</span>
</td><td>
<span id=\"lblEngine\">A</span>
</td><td>
<tr>
<td colspan=\"4\">
</td>
<td>
<span id=\"lblCss\">1.7</span>
</td>
</tr>
</td>
</tr><tr>
<td>
<span id=\"lblRender\">Gecko</span>
</td><td>
<span id=\"lblBrowser\">Firefox 1.5</span>
</td><td>
<span id=\"lblPlatform\">Win 98+ / OSX.2+</span>
</td><td>
<span id=\"lblEngine\">A</span>
</td><td>
<tr>
<td colspan=\"4\">
</td>
<td>
<span id=\"lblCss\">1.8</span>
</td>
</tr>
</td>
</tr>
</tbody><tfoot>
</tfoot>
</table> 解决方案 (document).ready(function () {
var yourTable =
('#<%=Gv.ClientID %>').dataTable({
// If you only have three columns in the HTML table, then this line will cause an error, because it lists four columns in \"aoColumnDefs\".
\"aoColumnDefs\": [{ \"bSortable\": false, \"aTargets\": [0, 1, 2, 3]}]
});
}）;
</script>
<asp:GridView ID=\"Gv\" runat=\"server\" AutoGenerateColumns=\"false\" ClientIDMode=\"Static\"
GridLines=\"Both\">
<Columns>
<asp:TemplateField HeaderText=\"Rendering engine\">
<ItemTemplate>
<asp:Label ID=\"lblRender\" runat=\"
server\" Text='<% #Eval(\"Renderingengine\")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText=\"Browser\">
<ItemTemplate>
<asp:Label ID=\"lblBrowser\" runat=\"server\" Text='<%#Eval(\"Browser\") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText=\"Platform\">
<ItemTemplate>
<asp:Label ID=\"lblPlatform\" runat=\"server\" Text='<%#Eval(\"Platform\") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText=\"Engine version\">
<ItemTemplate>
<asp:Label ID=\"lblEngine\" runat=\"server\" Text='<%#Eval(\"Engineversion\") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText=\"CSS grade\">
<ItemTemplate>
<tr>
<td colspan=\"4\">
</td>
<td>
<asp:Label ID=\"lblCss\" runat=\"server\" Text='<%#Bind(\"CSSgrade\") %>'></asp:Label>
</td>
</tr>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
After rendering:
<table cellspacing=\"0\" rules=\"all\" border=\"1\" id=\"Gv\" style=\"border-collapse:collapse;\">
<thead>
<tr>
<th scope=\"col\">Rendering engine</th><th scope=\"col\">Browser</th><th scope=\"col\">Platform</th><th scope=\"col\">Engine version</th><th scope=\"col\">CSS grade</th>
</tr>
</thead><tbody>
<tr>
<td>
<span id=\"lblRender\">Trident</span>
</td><td>
<span id=\"lblBrowser\">Internet Explorer 4.0</span>
</td><td>
<span id=\"lblPlatform\">Win 95+</span> $b$ b </td><td>
<span id=\"lblEngine\">A</span>
</td><td>
<tr&g t;
<td colspan=\"4\">
</td>
<td>
<span id=\"lblCss\">4</span>
</td>
</tr>
</td>
</tr><tr>
<td>
<span id=\"lblRender\">Trident</span>
</td><td>
<span id=\"lblBrowser\">Internet Explorer 5.0</span>
</td><td>
<span id=\"lblPlatform\">Win 95+</span>
</td><td>
<span id=\"lblEngine\">C</span>
</td><td>
<tr>
<td colspan=\"4\">
</td>
<td>
<span id=\"lblCss\">5</span>
</td>
</tr>
</td>
</tr><tr>
<td>
<span id=\"lblRender\">Trident</span>
</td><td>
<span id=\"lblBrowser\">Internet Explorer 5.5</span>
</td><td>
<span id=\"lblPlatform\">Win 95+</span>
</td><td>
<span id=\"lblEngine\">A</span>
</td><td>
<tr>
<td colspan=\"4\">
</td>
<td>
<span id=\"lblCss\">5.5</span>
</td>
</tr>
</td>
</tr><tr>
<td>
<span id=\"lblRender\">Trident</span>
</td><td>
<span id=\"lblBrowser\">Internet Explorer 6.0</span>
</td><td>
<span id=\"lblPlatform\">Win 95+</span>
</td><td>
<span id=\"lblEngine\">A</span>
</td>< span class=\"code-keyword\"><td>
<tr>
<td colspan=\"4\">
</td>
<td>
<span id=\"lblCss\">6</span>
</td>
</tr>
</td>
</tr><tr>
<td>
<span id=\"lblRender\">Gecko</span>
</td><td>
<span id=\"lblBrowser\">Firefox 1.0</span>
</td><td>
<span id=\"lblPlatform\">Win 98+ / OSX.2+</span>
</td><td>
<span id=\"lblEngine\">A</span>
</td><td>
<tr>
<td colspan=\"4\">
</td>
<td>
<span id=\"lblCss\">1.7</span>
</td>
</tr>
</td>
</tr><tr>
<td>
<span id=\"lblRender\">Gecko</span>
</td><td>
<span id=\"lblBrowser\">Firefox 1.5</span>
</td><td>
<span id=\"lblPlatform\">Win 98+ / OSX.2+</span>
</td><td>
<span id=\"lblEngine\">A</span>
</td><td>
<tr>
<td colspan=\"4\">
</td>
<td>
<span id=\"lblCss\">1.8</span>
</td>
</tr>
</td>
</tr>
</tbody><tfoot>
</tfoot>
</table>
Hi,
I have requirement where the one of the grid column should be displayed as second row and i need to apply data table search functionality.
but data table is not working for this scenario. I am getting error like "Uncaught TypeError: Cannot read property 'className' of undefined " in console of the chrome. Please any one can help me to add data table to the grid controle of the asp.net.
Aspx Code:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="//datatables.net/download/build/jquery.dataTables.nightly.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var yourTable = $('#<%=Gv.ClientID %>').dataTable({
// If you only have three columns in the HTML table, then this line will cause an error, because it lists four columns in "aoColumnDefs".
"aoColumnDefs": [{ "bSortable": false, "aTargets": [0, 1, 2, 3]}]
});
});
</script>
<asp:GridView ID="Gv" runat="server" AutoGenerateColumns="false" ClientIDMode="Static"
GridLines="Both">
<Columns>
<asp:TemplateField HeaderText="Rendering engine">
<ItemTemplate>
<asp:Label ID="lblRender" runat="server" Text='<% #Eval("Renderingengine")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Browser">
<ItemTemplate>
<asp:Label ID="lblBrowser" runat="server" Text='<%#Eval("Browser") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Platform">
<ItemTemplate>
<asp:Label ID="lblPlatform" runat="server" Text='<%#Eval("Platform") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Engine version">
<ItemTemplate>
<asp:Label ID="lblEngine" runat="server" Text='<%#Eval("Engineversion") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="CSS grade">
<ItemTemplate>
<tr>
<td colspan="4">
</td>
<td>
<asp:Label ID="lblCss" runat="server" Text='<%#Bind("CSSgrade") %>'></asp:Label>
</td>
</tr>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
After rendering:
<table cellspacing="0" rules="all" border="1" id="Gv" style="border-collapse:collapse;">
<thead>
<tr>
<th scope="col">Rendering engine</th><th scope="col">Browser</th><th scope="col">Platform</th><th scope="col">Engine version</th><th scope="col">CSS grade</th>
</tr>
</thead><tbody>
<tr>
<td>
<span id="lblRender">Trident</span>
</td><td>
<span id="lblBrowser">Internet Explorer 4.0</span>
</td><td>
<span id="lblPlatform">Win 95+</span>
</td><td>
<span id="lblEngine">A</span>
</td><td>
<tr>
<td colspan="4">
</td>
<td>
<span id="lblCss">4</span>
</td>
</tr>
</td>
</tr><tr>
<td>
<span id="lblRender">Trident</span>
</td><td>
<span id="lblBrowser">Internet Explorer 5.0</span>
</td><td>
<span id="lblPlatform">Win 95+</span>
</td><td>
<span id="lblEngine">C</span>
</td><td>
<tr>
<td colspan="4">
</td>
<td>
<span id="lblCss">5</span>
</td>
</tr>
</td>
</tr><tr>
<td>
<span id="lblRender">Trident</span>
</td><td>
<span id="lblBrowser">Internet Explorer 5.5</span>
</td><td>
<span id="lblPlatform">Win 95+</span>
</td><td>
<span id="lblEngine">A</span>
</td><td>
<tr>
<td colspan="4">
</td>
<td>
<span id="lblCss">5.5</span>
</td>
</tr>
</td>
</tr><tr>
<td>
<span id="lblRender">Trident</span>
</td><td>
<span id="lblBrowser">Internet Explorer 6.0</span>
</td><td>
<span id="lblPlatform">Win 95+</span>
</td><td>
<span id="lblEngine">A</span>
</td><td>
<tr>
<td colspan="4">
</td>
<td>
<span id="lblCss">6</span>
</td>
</tr>
</td>
</tr><tr>
<td>
<span id="lblRender">Gecko</span>
</td><td>
<span id="lblBrowser">Firefox 1.0</span>
</td><td>
<span id="lblPlatform">Win 98+ / OSX.2+</span>
</td><td>
<span id="lblEngine">A</span>
</td><td>
<tr>
<td colspan="4">
</td>
<td>
<span id="lblCss">1.7</span>
</td>
</tr>
</td>
</tr><tr>
<td>
<span id="lblRender">Gecko</span>
</td><td>
<span id="lblBrowser">Firefox 1.5</span>
</td><td>
<span id="lblPlatform">Win 98+ / OSX.2+</span>
</td><td>
<span id="lblEngine">A</span>
</td><td>
<tr>
<td colspan="4">
</td>
<td>
<span id="lblCss">1.8</span>
</td>
</tr>
</td>
</tr>
</tbody><tfoot>
</tfoot>
</table>
解决方案 (document).ready(function () {
var yourTable =
('#<%=Gv.ClientID %>').dataTable({
// If you only have three columns in the HTML table, then this line will cause an error, because it lists four columns in "aoColumnDefs".
"aoColumnDefs": [{ "bSortable": false, "aTargets": [0, 1, 2, 3]}]
});
});
</script>
<asp:GridView ID="Gv" runat="server" AutoGenerateColumns="false" ClientIDMode="Static"
GridLines="Both">
<Columns>
<asp:TemplateField HeaderText="Rendering engine">
<ItemTemplate>
<asp:Label ID="lblRender" runat="server" Text='<% #Eval("Renderingengine")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Browser">
<ItemTemplate>
<asp:Label ID="lblBrowser" runat="server" Text='<%#Eval("Browser") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Platform">
<ItemTemplate>
<asp:Label ID="lblPlatform" runat="server" Text='<%#Eval("Platform") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Engine version">
<ItemTemplate>
<asp:Label ID="lblEngine" runat="server" Text='<%#Eval("Engineversion") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="CSS grade">
<ItemTemplate>
<tr>
<td colspan="4">
</td>
<td>
<asp:Label ID="lblCss" runat="server" Text='<%#Bind("CSSgrade") %>'></asp:Label>
</td>
</tr>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
After rendering:
<table cellspacing="0" rules="all" border="1" id="Gv" style="border-collapse:collapse;">
<thead>
<tr>
<th scope="col">Rendering engine</th><th scope="col">Browser</th><th scope="col">Platform</th><th scope="col">Engine version</th><th scope="col">CSS grade</th>
</tr>
</thead><tbody>
<tr>
<td>
<span id="lblRender">Trident</span>
</td><td>
<span id="lblBrowser">Internet Explorer 4.0</span>
</td><td>
<span id="lblPlatform">Win 95+</span>
</td><td>
<span id="lblEngine">A</span>
</td><td>
<tr>
<td colspan="4">
</td>
<td>
<span id="lblCss">4</span>
</td>
</tr>
</td>
</tr><tr>
<td>
<span id="lblRender">Trident</span>
</td><td>
<span id="lblBrowser">Internet Explorer 5.0</span>
</td><td>
<span id="lblPlatform">Win 95+</span>
</td><td>
<span id="lblEngine">C</span>
</td><td>
<tr>
<td colspan="4">
</td>
<td>
<span id="lblCss">5</span>
</td>
</tr>
</td>
</tr><tr>
<td>
<span id="lblRender">Trident</span>
</td><td>
<span id="lblBrowser">Internet Explorer 5.5</span>
</td><td>
<span id="lblPlatform">Win 95+</span>
</td><td>
<span id="lblEngine">A</span>
</td><td>
<tr>
<td colspan="4">
</td>
<td>
<span id="lblCss">5.5</span>
</td>
</tr>
</td>
</tr><tr>
<td>
<span id="lblRender">Trident</span>
</td><td>
<span id="lblBrowser">Internet Explorer 6.0</span>
</td><td>
<span id="lblPlatform">Win 95+</span>
</td><td>
<span id="lblEngine">A</span>
</td><td>
<tr>
<td colspan="4">
</td>
<td>
<span id="lblCss">6</span>
</td>
</tr>
</td>
</tr><tr>
<td>
<span id="lblRender">Gecko</span>
</td><td>
<span id="lblBrowser">Firefox 1.0</span>
</td><td>
<span id="lblPlatform">Win 98+ / OSX.2+</span>
</td><td>
<span id="lblEngine">A</span>
</td><td>
<tr>
<td colspan="4">
</td>
<td>
<span id="lblCss">1.7</span>
</td>
</tr>
</td>
</tr><tr>
<td>
<span id="lblRender">Gecko</span>
</td><td>
<span id="lblBrowser">Firefox 1.5</span>
</td><td>
<span id="lblPlatform">Win 98+ / OSX.2+</span>
</td><td>
<span id="lblEngine">A</span>
</td><td>
<tr>
<td colspan="4">
</td>
<td>
<span id="lblCss">1.8</span>
</td>
</tr>
</td>
</tr>
</tbody><tfoot>
</tfoot>
</table>这篇关于DataTable插件不适用于grdi控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
