将 Jquery DataTables 插件应用到 ASP GridView

本文介绍了将 Jquery DataTables 插件应用到 ASP GridView的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我之前在 PHP 中使用过这个插件，所以我想我会在我的 ASP 项目中再次使用它.

I've used this plugin before in PHP so I thought I'll use it again for my ASP project.

由于某种原因，它不适用于我的 GridView 控件.

For some reason it doesn't work with my GridView control.

javascript 块:

javascript block:

<link type="text/css" href="../scripts/demo_table.css" rel="stylesheet" />

    <script type="text/javascript" language="javascript" src="../scripts/jquery-1.4.1.js"></script>
    <script type="text/javascript" language="javascript" src="../scripts/jquery.dataTables.js"></script>

    <script type="text/javascript" charset="utf-8">
        $(document).ready(function () {
            $(".gvv").dataTable();
        });
        </script>

网格视图代码:

<asp:GridView ID="gv" runat="server" AutoGenerateColumns="False"
        DataKeyNames="Prop_No" DataSourceID="testtt" CssClass="gvv">

是我做错了什么还是 DataTables 不能用于 ASP 控件?

Am I doing something wrong or DataTables can't be used for ASP controls?

推荐答案

问题是GridView控件没有添加<thead>元素，只是将标题行放入<body> 生成表的部分，而数据表插件需要表中的部分.尝试使用以下脚本:

The problem is that GridView control doesn't add <thead> element but just put the header row into <body> section of generated table whereas the Data Table plugin requires a <thead> section in a table. Try to use following script:

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

附言您也可以使用那些不使用默认布局渲染的控件，例如 Repeater 或 ListView

P.S. also you can use controls those don't rendering with default layout like Repeater or ListView

这篇关于将 Jquery DataTables 插件应用到 ASP GridView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！