jquery datatable functionality not working with asp:repeater

Question

I've searched for awhile on this one, and I'm pretty stumped. I have a very, very basic prototype for something I am working on and I'm not sure what is going wrong. I have a repeater that is databound in the codebehind and I am calling .datatable in the .js for it... The table displays with all of the fancy features, but none of the features actually work. Here is my code, am I missing something?

markup:

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

codebehind:

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

When you do this:

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

you are adding multiple <tbody> elements. Add the <tbody> to your HeaderTemplate and </tbody> to your FooterTemplate and try again.