c# - プロジェクトに DataTables 列フィルター アドオンを追加する方法はありますか

Question

現在、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>

Answer 1

追加

<div class="info"></div>

テーブルの前