Added dataTable but getting an appendChild error

So I just added dataTables and I get the following error

Uncaught NotFoundError: Failed to execute 'appendChild' on 'Node': The new child element is null. jquery.tools.min.js:38
f.extend.clean jquery.tools.min.js:38
f.buildFragment jquery.tools.min.js:38
f.fn.extend.domManip jquery.tools.min.js:38
f.fn.extend.append jquery.tools.min.js:37
_fnFeatureHtmlLength jquery.dataTables.js:3209
_fnAddOptionsHtml jquery.dataTables.js:2099
_fnInitialise jquery.dataTables.js:3083
(anonymous function) jquery.dataTables.js:6301
e.extend.each jquery.tools.min.js:36
e.fn.e.each jquery.tools.min.js:36
DataTable jquery.dataTables.js:5838
$.fn.DataTable jquery.dataTables.js:14206
(anonymous function) index.php?r=rfp:148
n jquery.tools.min.js:36
o.fireWith jquery.tools.min.js:36
e.extend.ready jquery.tools.min.js:36
c.addEventListener.B

All I've added to the javascript is this

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

While my table structure looks something like this

<table id="main_table" class="dataTable no-footer">
    <thead>
        <tr>
            <td>Stuff</td>
            <td>More Stuff</td>
            <td>Even more stuff</td>
        </tr>
    </thead>

    <tbody>
        <tr role="row">
            <td onclick="document.getElementById('cdid').value=232; document.getElementById('viewForm').submit();"> ... </td>
            <td> more things </td>
            <td> even more things </td>
        </tr>
        ...
        More rows of the same format
    </tbody>

</table>

But the error is not from my code, it's apparently something that dataTable is trying to do. Trying to append a child to a null node (what the error says). If anyone has an idea as to what is actually happening, that'd be great.