Current Table is not converting to DataTable

So I have a current table that I have been trying to paginate and it comes out to be pretty difficult to paginate as is. I was looking for solutions and I came across Datatables. I have it installed and such into my project. I did the tutorial on setting up just the basic table and I was able to get that to work. I 'assumed" that all I had to do was exchange that id = 'table_id' and put it on my current table. I did that and all I got was the header reformatted and that was it. No pagination or any other of the DataTable options. Was my assumption wrong(too easy to be true)? Is there more I need to do to get it to work with my current table?

<script>
$(document).ready(function() {
    alert('I am working'); //tests to see if this is being called
    $('#table_id').dataTable( {
        "sPaginationType": "full_numbers"
    } );
});
</script>

 
		<table id="table_id" class ="display" >
				<thead>
					<tr>
					    <th>
							${message(code: 'User.username.label', default: 'Username')}
						</th>
					
                        <th>
							${message(code: 'User.id.label', default: 'ID')}
						</th>
						<th>
							${message(code: 'User.timeStamp.label', default: 'Timestamp')}
						</th>

						<th>
							${message(code: 'User.details.label', default: 'Details')}
						</th>

					</tr>
				</thead>
				<tbody>
					
						<tr>
	
						<g:each in="${results}" status="i"var="audit">
						<tr class="${(i % 2) == 0 ? 'even' : 'odd'}">
							
							
							<td width = "12%">
							${fieldValue(bean: audit, field: "username")}
							</td>
							
							<td width = "20%">
							${fieldValue(bean: audit, field: "id")}
							</td>
							
							<td width = "16%">
							${fieldValue(bean: audit, field: "timeStamp")}
							</td>
							
							<td width = "51%">
							
							<span style="font-size:0.8em; font-weight:bold">Username:</span> ${audit.username } <br>
							<span style="font-size:0.8em; font-weight:bold">ID:</span> ${audit.accountUuID }<br>
							<span style="font-size:0.8em; font-weight:bold">EVENT TYPE:</span> ${audit.eventType }<br>
							<span style="font-size:0.8em; font-weight:bold">EVENT DETAILS: </span>${audit.eventDetails }<br>
							<span style="font-size:0.8em; font-weight:bold">MESSAGE:</span> ${audit.message }<br>
							
							</td>

						</tr>
					</g:each>
				</tbody>
		</table>

This is my existing table that I want converted over. I put exactly what the tutorial did on the bottom of this page to make sure I was calling everything correctly to this page and it worked out great, just doesn't work with this table. My tables can return results sizing from 0-5k+. I also get the 'infamous' "DataTables warning (table id = 'table_id'): Requested unknown parameter '0' from the data source for row 0" error that I have read online.

Any help would be greatly appreciated!

Thanks,

Nate