Примените плагин JQuery DataTables к ASP GridView

Я использовал этот плагин раньше в PHP, поэтому я решил использовать его снова для моего проекта ASP.

По какой-то причине он не работает с моим элементом управления GridView.

блок javascript:

<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:

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

Я делаю что-то неправильно или DataTables не могут использоваться для элементов управления ASP?

Ответы

Ответ 1

Проблема заключается в том, что элемент управления GridView не добавляет элемент <thead>, а просто помещает строку заголовка в раздел <body> сгенерированной таблицы, тогда как плагин Data Table требует раздел <thead> в таблице. Попробуйте использовать следующие script:

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

P.S. также вы можете использовать элементы управления, которые не выполняют рендеринг с компоновкой по умолчанию, например Repeater или ListView

Ответ 2

Вы можете добавить теги thead, tbody и tfoot с помощью события GridView Prerender, попробуйте этот код

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

}

И не забудьте добавить обработчик событий на исходную страницу ниже

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

Теперь вы можете просто вызвать функцию JQuery, как обычно, для рендеринга

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

Ответ 3

Пожалуйста, попробуйте ввести код ниже.