2013-07-17 2 views
0

Я пытаюсь использовать надстрочный фильтр столбцов DataTables в таблице gridview с использованием источника данных sql, но я не прихожу с удачей. У меня gridview отображает верхний и нижний колонтитулы, но я ничего не могу добавить в нижний колонтитул.Возможно использование надстройки фильтра столбцов DataTables с помощью Gridview

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Glossary.aspx.cs" Inherits="Home.Glossary" %> 

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title spellcheck="true">Glossary</title> 
    <style type="text/css" media="all"> 
     @import "DataTables-1.9.4/DataTables-1.9.4/media/css/jquery.dataTables_themeroller.css"; 
     #form1 { 
      width: 100%; 
     } 
    </style>   

     <script src="DataTables-1.9.4/DataTables-1.9.4/media/js/jquery.js"></script> 
     <script src="DataTables-1.9.4/DataTables-1.9.4/media/js/jquery.dataTables.js"></script> 
     <script src="JQuery-DataTables-ColumnFilter/media/js/jquery.dataTables.columnFilter.js"></script> 
     <script> 
    $(document).ready(function() { 
     $('#<%=GridView1.ClientID%>').dataTable().columnFilter(); 
     }); 
</script> 
    </head> 
<body> 
    <form id="form1" runat="server"> 

    <div style="background: #A0A0A0"> 

     </div> 

     <asp:GridView ID="GridView1" runat="server" DataKeyNames="TermText,DefNbr,DefVerNbr" DataSourceID="TedGlossary" 
      EnableSortingAndPagingCallbacks="True" OnSelectedIndexChanged="GridView1_SelectedIndexChanged" ShowFooter="true" 
      AutoGenerateColumns="False" AutoGenerateEditButton="False" style="margin-right: 0px" Width="100%" Height="382px">    

      <Columns> 
       <asp:BoundField DataField="TermText" HeaderText="Term" ReadOnly="True" SortExpression="Term" /> 
       <asp:BoundField DataField="DefNbr" HeaderText="Number" ReadOnly="True" SortExpression="DefinitionNumber" /> 
       <asp:BoundField DataField="DefVerNbr" HeaderText="Version" ReadOnly="True" SortExpression="DefinitinonVersionNumber" /> 
       <asp:BoundField DataField="DefText" HeaderText="Definition" SortExpression="Definition" /> 
       <asp:BoundField DataField="AmplifyingExplanationText" HeaderText="Amplifying Explanation" SortExpression="AmplifyingExplanationText" /> 
       <asp:BoundField DataField="SeeAlsoText" HeaderText="See Also" SortExpression="See Also" /> 
       <asp:BoundField DataField="AuthoritativeSrcText" HeaderText="Authoritative Source" SortExpression="AuthoritativeSrcText" /> 
       <asp:BoundField DataField="ScopeName" HeaderText="Scope" SortExpression="Scope" /> 
       <asp:BoundField DataField="DomnName" HeaderText="Domain" SortExpression="Domain" /> 
       <asp:BoundField DataField="GovernanceStateName" HeaderText="Governance State" SortExpression="GovernanceStateName" /> 
       <asp:BoundField DataField="LastUpdtTimestamp" HeaderText="Last Updated" SortExpression="LastUpdtTimestamp" /> 

      </Columns> 


     </asp:GridView> 
     <asp:SqlDataSource ID="TedGlossary" runat="server" ConnectionString="<%$ ConnectionStrings:Glsry_Taylor %>" SelectCommand="SELECT * FROM [Glossary] ORDER BY [TermText]"></asp:SqlDataSource> 

     </form> 

</body> 

</html> 

Вот сотовый для рендеринга

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; 

namespace Home 
{ 
    public partial class Glossary : System.Web.UI.Page 
    { 
     protected void Page_Load(object sender, EventArgs e) 
     { 
      GridView1.PreRender += new EventHandler(GridView1_PreRender); 
     } 
     protected void GridView1_PreRender(object sender, EventArgs e) 
     { 
      if (GridView1.Rows.Count > 0) 
      { 
      //forces grid to render thead/tbody/tfoot elements 
      GridView1.UseAccessibleHeader = true; 
      GridView1.HeaderRow.TableSection = TableRowSection.TableHeader; 
      GridView1.FooterRow.TableSection = TableRowSection.TableFooter; 

      } 
} 
     protected void GridView1_SelectedIndexChanged(object sender, EventArgs e) 
     { 

     } 
} 
} 

Вот выхода HTML, есть слишком много для сайта, чтобы справиться я положил в Pastebin ссылки включен

http://pastebin.com/2qh2eXWY

ответ

0

Чтобы добавить что-нибудь в нижний колонтитул, вам необходимо использовать элементы управления TemplateField, а не BoundField элементов управления. См. http://www.dreamincode.net/forums/topic/222381-insert-data-using-gridview-footerrow/ для примера того, как это сделать. Однако стоит отметить, что HTML, созданный элементом управления GridView, будет использовать элементы <td> в нижнем колонтитуле, а не <th> элементов, как ожидается в документации DataTables.

Смежные вопросы