The DataTables search is not working in Chrome. My code works fine in Firefox.

I checked the Chrome console: Uncaught TypeError: Property 'getItem' of object #<Object> is not a function

This is my code:

html:

<table class="table-announcement" id="announcement">
<thead>
    <tr>
        <th class="header">Announcement</th>
        <th class="header">Date</th>
        <th class="header">Posted by</th>
    </tr>
</thead>
<tbody>
<?php foreach ($announcement as $post): ?>
    <?php $msg = "'<h1>" . $post['title'] . "</h1><h2>by: " . $post['username'] . "</h2><br/>" . str_replace("\r\n", "", nl2br(htmlspecialchars($post['body']))) . "'";?>
     <tr>
         <td><a href="javascript:;" class="prompt" onclick="$.prompt(<?php echo $msg;?>)"><?php echo $post['title'];?></a></td>
         <td><?php echo $post['date'];?></td>
         <td><?php echo $post['username'];?></td>
     </tr>
<?php endforeach;?>
</tbody>

This is the jQuery:

$(document).ready( function () {
    $('#announcement').dataTable();
    $('#user').dataTable();
    $('#school').dataTable();
} );