C# ASP.NET的GridView应用jQuery插件DataTables的方法 Apply Jquery DataTables plugin to ASP GridView

最新推荐文章于 2021-08-05 15:10:02 发布

cxrsdn

最新推荐文章于 2021-08-05 15:10:02 发布

阅读量1k

点赞数 1

分类专栏： # asp.net

asp.net 专栏收录该内容

1 篇文章

订阅专栏

本文介绍在C#ASP.NET项目中，如何解决GridView与jQuery插件DataTables的兼容性问题，通过添加thead元素确保DataTables正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

C# ASP.NET的GridView应用jQuery插件DataTables的方法

Apply Jquery DataTables plugin to ASP GridView

参考链接：https://stackoverflow.com/questions/8200681/apply-jquery-datatables-plugin-to-asp-gridview

1.遇到的问题

用C#编写asp.net网页程序时，需要用到jQuery插件DataTables，使用方法参考：DataTables配置，具体代码如下：

<!--引入css-->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
 
<!--引入JavaScript-->
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
 
<!--初始化代码-->
<script>
     $(document).ready(function() {
           $('#example').DataTable();
      });
</script>

但是在asp.net应用的时候发现表格显示不正常：

GridView代码如下：

<asp:GridView ID="GridView" runat="server">
	    	</asp:GridView>

对应JavaScript如下：

<script type="text/javascript">
	$(document).ready(function () {
        $("#GridView").dataTable();
	});
</script>

2.原因

查阅DataTables常见问题：http://datatables.club/faqs/index.html

Datatables所需要的table是比较严谨的，table里必须包含thead和tbody标签(1.10.x+好像不需要tbody也行了，大家注意自己多尝试)。再检查其他html是否有效，控制台有没有错误？初次使用Datatables参考安装手册

可以发现用ASP.NET的GridView控件不添加<thead>元素，只是将标题行放入生成的表的<body>部分，而数据表插件需要表中的<thead>部分。因此显示不正常。

3.解决办法

替换成如下代码即可：

<script type="text/javascript">
	$(document).ready( function () {
	    $('#GridView').prepend( $("<thead></thead>").append( $("#GridView").find("tr:first") ) ).dataTable();
	});
</script>

4.补充说明

在https://stackoverflow.com/questions/8200681/apply-jquery-datatables-plugin-to-asp-gridview 此链接中代码

$(function () {
    $(".gvv").prepend( $("<thead></thead>").append( $(this).find("tr:first") ) ).dataTable();
});

其中用的 $(this) ，如果在此Table前有其他的Table，则会出现错误，因此用 $("#GridView") 代替，这样才不会出现错误。

References:

[1] Apply Jquery DataTables plugin to ASP GridView

[2] 0配置基本初始化博客 DataTables中文网

[3] 常见问题 Datatables 中文网（Frequently Asked Questions）