可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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

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

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>

Gridview code:

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

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

回答1:

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();
});

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

回答2:

You can add thead, tbody and tfoot tags using GridView Prerender event try this code

protected void GridView1_PreRender(object sender, EventArgs e)
{
  // You only need the following 2 lines of code if you are not 
  // using an ObjectDataSource of SqlDataSource
  GridView1.DataSource = Sample.GetData();
  GridView1.DataBind();

  if (GridView1.Rows.Count > 0)
  {
    //This replaces <td> with <th> and adds the scope attribute
    GridView1.UseAccessibleHeader = true;

    //This will add the <thead> and <tbody> elements
    GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;

    //This adds the <tfoot> element. 
    //Remove if you don't have a footer row
    GridView1.FooterRow.TableSection = TableRowSection.TableFooter;
   }

}

And Dont forget to add the event handler on source page as below

<asp:GridView ID="GridView1" runat="server" 
  OnPreRender="GridView1_PreRender">
</asp:GridView>

Now you can simply call JQuery function as usual to render it

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

回答3:

Please try below code.

Apply Jquery DataTables plugin to ASP GridView

问题:

回答1:

回答2:

回答3:

收藏的人(0)

Apply Jquery DataTables plugin to ASP GridView

问题:

回答1:

回答2:

回答3:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮