Функциональность jquery datatable не работает с asp:repeater

Question

Я искал некоторое время на этом, и я довольно озадачен. У меня есть очень, очень простой прототип для чего-то, над чем я работаю, и я не уверен, что происходит не так. У меня есть повторитель, который привязан к данным в коде, и я вызываю.datatable в.js для него... Таблица отображается со всеми необычными функциями, но ни одна из функций на самом деле не работает. Вот мой код, я что-то упустил?

разметка:

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <asp:Repeater ID="repeater" runat="server">
        <HeaderTemplate>
            <table id="booksTable" border="1" width="100%">
                <thead>
                    <tr>
                        <th>
                            author
                        </th>
                        <th>
                            title
                        </th>
                        <th>
                            genre
                        </th>
                    </tr>
                </thead>
        </HeaderTemplate>
        <ItemTemplate>
            <tbody>
                <tr>
                    <td>
                        <%#DataBinder.Eval(Container.DataItem, "author")%>
                    </td>
                    <td>
                        <%#DataBinder.Eval(Container.DataItem, "title")%>
                    </td>
                    <td>
                        <%#DataBinder.Eval(Container.DataItem, "genre")%>
                    </td>
                </tr>
            </tbody>
        </ItemTemplate>
        <FooterTemplate>
            </table>
        </FooterTemplate>
    </asp:Repeater>
    <script type="text/javascript" src="js\jquery-1.4.1.js"></script>
    <script type="text/javascript" src="js\jquery.dataTables.js"></script>
    <script type="text/javascript" src="js\GridControls.js"></script>
</asp:Content>

отделенный код:

namespace WebApplication1
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                DataTable dataTable = CreateDataTable();
                repeater.DataSource = dataTable;
                repeater.DataBind();
            }
        }

        private static DataTable CreateDataTable()
        {
            DataTable dataTable = new DataTable();
            dataTable.Columns.Add(new DataColumn("Author", typeof(string)));
            dataTable.Columns.Add(new DataColumn("Title", typeof(string)));
            dataTable.Columns.Add(new DataColumn("Genre", typeof(string)));
            dataTable.Rows.Add("douglas Adams", "the hitchhiker's guide to the galaxy", "science fiction");
            dataTable.Rows.Add("j.d. salinger", "the catcher in the rye", "fiction");
            dataTable.Rows.Add("aldous huxley", "brave new world", "science fiction");
            dataTable.Rows.Add("ayn rand", "atlus shrugged", "fiction");
            dataTable.Rows.Add("barbara w. tuchman", "the guns of august", "non-fiction");
            dataTable.Rows.Add("joshua foer", "moonwalking with einstein", "non-fiction");
            dataTable.Rows.Add("esther forbes", "johnny tremain", "historical fiction");
            dataTable.Rows.Add("harold keith", "rifles for watie", "historical fiction");
            dataTable.Rows.Add("tom clancy", "rainbow six", "military fiction");
            dataTable.Rows.Add("tom clancy", "clear and present danger", "military fiction");
            dataTable.Rows.Add("tom clancy", "the sum of all fears", "military fiction");
            dataTable.Rows.Add("stephen king", "christine", "horror fiction");
            dataTable.Rows.Add("stephen king", "pet cemetary", "horror fiction");
            dataTable.Rows.Add("stephen king", "the shining", "horror fiction");
            dataTable.Rows.Add("brian jacques", "redwall", "fantasy fiction");
            dataTable.Rows.Add("benjamin franklin", "the autobiography of benjamin franklin", "autobiography");
            return dataTable;
        }
    }
}

JavaScript:

$(document).ready(function () {
    $('#booksTable').dataTable({
        'sPaginationType': 'full_numbers'
    });
});

Answer 1

Когда вы делаете это:

<ItemTemplate>
    <tbody>
        <tr>
            <td>
                <%#DataBinder.Eval(Container.DataItem, "author")%>
            </td>
            <td>
                <%#DataBinder.Eval(Container.DataItem, "title")%>
            </td>
            <td>
                <%#DataBinder.Eval(Container.DataItem, "genre")%>
            </td>
        </tr>
    </tbody>
</ItemTemplate>

вы добавляете несколько <tbody> элементы. Добавить <tbody> на ваш HeaderTemplate а также </tbody> на ваш FooterTemplate и попробуй еще раз.

Answer 2

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <asp:Repeater ID="repeater" runat="server">
        <HeaderTemplate>
            <table id="booksTable" border="1" width="100%">
                <thead>
                    <tr>
                        <th>
                            author
                        </th>
                        <th>
                            title
                        </th>
                        <th>
                            genre
                        </th>
                    </tr>
                </thead>
         <tbody>
        </HeaderTemplate>
        <ItemTemplate>

                <tr>
                    <td>
                        <%#DataBinder.Eval(Container.DataItem, "author")%>
                    </td>
                    <td>
                        <%#DataBinder.Eval(Container.DataItem, "title")%>
                    </td>
                    <td>
                        <%#DataBinder.Eval(Container.DataItem, "genre")%>
                    </td>
                </tr>

        </ItemTemplate>
        <FooterTemplate>
           </tbody>
            </table>
        </FooterTemplate>
    </asp:Repeater>
    <script type="text/javascript" src="js\jquery-1.4.1.js"></script>
    <script type="text/javascript" src="js\jquery.dataTables.js"></script>
    <script type="text/javascript" src="js\GridControls.js"></script>
</asp:Content>