Help with jQuery DataTable

[cgull]

Hello,

This is the first time I am trying to use jQuery DataTable.

I read a lot of articles, but I can't make it work.

I hope someone can help.

I need to build a table that displays Rugby games scores.
The table I am building should look like this:

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
    <thead>
        <tr>
            <th>Match</th>
            <th colspan="3">Results</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th></th>
            <th>Team</th>
            <th>Halftime</th>
            <th>Final Score</th>
        </tr>
        <tr>
            <td colspan="4">Match: AA</td>
        </tr>
        <tr>
            <td></td>
            <td>Team A</td>
            <td class="center">1</td>
            <td class="center">2</td>
        </tr>
        <tr>
            <td></td>
            <td>Team B</td>
            <td class="center">1</td>
            <td class="center">2</td>
        </tr>
        <tr>
            <td colspan="4">Match: BB</td>
        </tr>
        <tr>
            <td></td>
            <td>Team A</td>
            <td class="center">1</td>
            <td class="center">2</td>
        </tr>
        <tr>
            <td></td>
            <td>Team B</td>
            <td class="center">1</td>
            <td class="center">3</td>
        </tr>
    </tbody>
</table>

I want the user to be able to sort the columns:
Match, Team, Halftime and Final Score.

The way my code is now, the user can't sort on anything and the Show entries and search input field are not there at all.

My jQuery code:

$(function() {
        $('#example').dataTable({
            bJQueryUI: true
        });
    });

I include these two files on the page:
<link rel="stylesheet" href="/shared/jQuery/jquery-ui-1.10.3.custom/css/smoothness/jquery-ui-1.10.3.custom.min.css">
<script src="/shared/jQuery/jquery.dataTables.js"></script>

Can someone please help?

[cgull]

An update:

My table looks like this now:

<table class="display" id="example" border="0" cellpadding="0" cellspacing="0">
    <thead>
    <tr>
    <th colspan="1" class="ui-state-default" rowspan="2">
    <div class="DataTables_sort_wrapper">
    Match<span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"></span></div>
    </th>
    <th rowspan="1" colspan="3" class="ui-state-default" style="text-align:center">Results
    </th>
    </tr>
    <tr>
    <th colspan="1" rowspan="1" class="ui-state-default">
    <div class="DataTables_sort_wrapper">
    Team<span class="DataTables_sort_icon css_right ui-icon ui-icon-triangle-1-s"></span></div>
    </th>
    <th colspan="1" rowspan="1" class="ui-state-default">
    <div class="DataTables_sort_wrapper">Halftime<span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"></span>
    </div>
    </th>
    <th colspan="1" rowspan="1" class="ui-state-default">
    <div class="DataTables_sort_wrapper">Final Score<span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"></span>
    </div>
    </th>
    </tr>
    </thead>
    <tbody>
    <tr>
       <td>

            PBHS vs St Stithians<br>
            24/03/2012
        </td>

    </tr>

    <tr>

        <td></td>
        <td>PBHS 1st</td>
        <td></td>
        <td>14</td>
    </tr>

    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>

        <td>

            PBHS vs St Stithians<br>
            24/03/2012
        </td>
        ....

Now I see the show xx entries and the search box, but I see much more than just 10 rows in the table and I still can't sort any column.

[cgull]

Another update:
I added the class dataTable to the table, now when I go to the page I get an alert error:

DataTables warning (table id='example'): Requested unknown parameter '1' from the data source for row 0