Dispaly processing message in jQuery DataTables

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
<table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example">
  <thead>
    <tr>
      <th>Rendering engine</th>
      <th>Browser</th>
      <th>Platform(s)</th>
      <th>Engine version</th>
      <th>CSS grade</th>
      <th>10000000000000</th>
      <th>12000000000000000</th>
      <th>13000000000000000</th>
      <th>1400000000000000000</th>
      <th>100000000000000005</th>
      <th>160000000000000000</th>
      <th>7000000000000000001</th>
      <th>8000000000000000000001</th>
      <th>90000000000000000</th>
      <th>10000000000000000000</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Trident</td>
      <td>Internet Explorer 4.0</td>
      <td>Win 95+</td>
      <td> 4</td>
      <td>X</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Trident</td>
      <td>Internet Explorer 5.0</td>
      <td>Win 95+</td>
      <td>5</td>
      <td>C</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>
  </tbody>
</table>
<br/>
<button id="show"> Show Procesing </button>
<button id="hide"> Hide Procesing </button>

CSS

div.dataTables_wrapper {
  width: 800px;
  margin: 0 auto;
}

.dataTables_wrapper .dataTables_processing {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 20px;
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-left: -100px;
  margin-top: -26px;
  text-align: center;
  padding: 1em 0;
  z-index: 1;
}

JavaScript

$(function() {
  $("#example").dataTable({
    "scrollX": true,
    "bProcessing": true
  });
});

$("#show").click(function() {
  $("#example_processing").css("visibility", "visible");
});

$("#hide").click(function() {
  $("#example_processing").css("visibility", "hidden");
});