DataTable Not showing table - datatables

Question

I am trying to incorporate dataTables to my posts index. i get the table to appear but there are no information shown in the table columns
I tried implementing the DataTables as their side says and i kept the normal way of displaying data just to be sure i get results
I use
<link rel="stylesheet" href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
For the creation of my table i use:
<table class="display" id="postsTable">
<thead>
<tr>
<td>ID</td>
<th>Title</th>
<th>Slug</th>
<th>Subtitle</th>
<th>Content</th>
</tr>
</thead>
<tbody>
#foreach($posts as $post)
<tr>
<td>{{$post->id}}</td>
<td>{{$post->Title}}</td>
<td>{{$post->Slug}}</td>
<td>{{$post->Subtitle}}</td>
<td>{{$post->Content}}</td>
</tr>
#endforeach
</tbody>
</table>
</body>
<script>
$(document).ready( function () {
$('#postsTable').DataTable();
} );
</script>
And i am sure i can get the results of my posts table since when i use:
<h1 class="title">Posts Table</h1>
<form action="/posts/create" id="myTable">
<div class="field">
<div class="control">
<button type="submit" class="button is-link">Create New Post</button>
</div>
</div>
</form>
#foreach ($posts as $post)
<li>
<a href="/posts/{{ $post->id }}">
{{$post->title}}
</a>
</li>
#endforeach
I get results.
Any help is appreciated as i couldn't find a working solution anywhere.

Answer 1

After reviewing my code i realized that i had a typo on the names of the attributes i was trying to get. Instead of "Title" it should have been "title" and etc