有没有办法将DataTables Column Filter Add-on添加到我的项目中

时间:2013-07-02 19:42:39

标签: c# asp.net jquery-datatables

我目前正在尝试添加DataTables Column Filter Add-on的附加组件。有没有办法使用Microsoft Visual Studio Express 2012 for web添加此附加组件?我是否必须添加js脚本或其他东西。而且我无法通过当前数据表显示CSS,是否有我遗漏的东西。

初始化代码是这样的:

是否有某些地方我错过了什么。

$(document).ready(function(){
     $('#example').dataTable()
          .columnFilter();
}); 


<%@ Page Title="Home Page" Language="c#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="Glossary._Default" %>

<asp:Content runat="server" ID="HeaderContent" ContentPlaceHolderID="HeadContent">
    <link href="media/css/jquery.dataTables.css" rel="stylesheet" />
     </asp:Content>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
       <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">

       <HeaderTemplate>
       <table id="datatable">
           <thead>
           <tr>
               <th>Term</th>
               <th>Definition Number</th>
               <th>Definitnion Version Number </th>
               <th>Definition</th>
               <th>Amplifying Explanation Text</th>
               <th>See Also</th>
               <th>Authoritative Source</th>
               <th>Scope</th>
               <th>Domain</th>
               <th>Governance State</th>
               <th>Last Updated Time</th>
           </tr>
       </thead>
       </HeaderTemplate>

       <ItemTemplate>
           <tr>
             <td><%# DataBinder.Eval(Container.DataItem, "TermText").ToString() %></td>
               <td><%# DataBinder.Eval(Container.DataItem, "DefNbr").ToString() %></td>
               <td><%# DataBinder.Eval(Container.DataItem, "DefVerNbr").ToString() %></td>
               <td><%# DataBinder.Eval(Container.DataItem, "DefText").ToString() %></td>
               <td><%# DataBinder.Eval(Container.DataItem, "AmplifyingExplanationText").ToString() %></td>
               <td><%# DataBinder.Eval(Container.DataItem, "SeeAlsoText").ToString() %></td>
               <td><%# DataBinder.Eval(Container.DataItem, "AuthoritativeSrcText").ToString() %></td>
               <td><%# DataBinder.Eval(Container.DataItem, "ScopeName").ToString() %></td>
               <td><%# DataBinder.Eval(Container.DataItem, "DomnName").ToString() %></td>
               <td><%# DataBinder.Eval(Container.DataItem, "GovernanceStateName").ToString() %></td>
               <td><%# DataBinder.Eval(Container.DataItem, "LastUpdtTimestamp").ToString() %></td>


           </tr>
       </ItemTemplate>

       <FooterTemplate>
       </table>
       </FooterTemplate>
       </asp:Repeater>

       <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:Glossary %>"
            SelectCommand="SELECT [TermText], [DefNbr], [DefVerNbr], [DefText], [AmplifyingExplanationText], [SeeAlsoText], [AuthoritativeSrcText], [ScopeName], [DomnName], [GovernanceStateName], [LastUpdtTimestamp] FROM [Glossary] ORDER BY [TermText]"></asp:SqlDataSource>

<script src="media/js/jquery.js"></script>
        <script src="media/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript">
            $('#dataTable').dataTable();

        </script>

       </asp:Content>

1 个答案:

答案 0 :(得分:0)

添加

<div class="info"></div>
表格前的