Warning "Cannot reinitialise DataTable" when using Symfony2 and Twig

Question

Every time I log on to the system there's this dialog box that keeps on popping up when running with the dev environment.

DataTables warning: table id=datTable - Cannot reinitialise DataTable.

But whenever I run the production environment, everything works fine. How can I get rid of this?

// controller

public function indexAction() {
    $em = $this->getDoctrine()->getManager();
    $po = $em->getRepository('MatrixEdiBundle:EdiTransactionDetail')->findDocs('850');

    return $this->render('MatrixEdiBundle:Matrix:index.html.twig', array('po' => $po));
}

// index.html.twig

{% extends 'layout.html.twig' %}
{# {% include 'MatrixEdiBundle:Matrix:header.html.twig'%} #}
{% block body %}
<div class="content">
</br>
  <table id="datTable"class="table table-bordered table-condensed table-hover">
      <thead>
        <th colspan="8">Edi Matrix</th>
        <tr>
          <th>Po Numbers</th>
          <th>Trading Partner Id</th>
          <th>PO 855 Acknowledgement</th>
          <th>PO 997 Acknowledgement</th>
          <th>Advance Shipment Notice</th>
          <th>Invoice</th>
          <th>Purchase Order Change</th>
          <th>Order Status</th>
        </tr>
      </thead>
      <tbody>
      {% for tran in po %}
        <tr>
            <td><a href="{{ path('matrix_edi_showpo', {'po_num':  tran.poNumber}) }}"data-toggle="modal"data-target="#myModal">{{tran.poNumber}}</td>

            <td>{{tran.ediTransaction.senderId}}</td>

            <td><a href="{{ path('matrix_edi_findAll', {'po_num':  tran.poNumber, 'sender_id':  tran.ediTransaction.senderId, 'doc_type': 855}) }}"data-toggle="modal"data-target="#myModal">
            {{ render(controller('MatrixEdiBundle:Matrix:matrix', {
            'po_num': tran.poNumber, 'sender_id': tran.ediTransaction.senderId, 'reciever_id': tran.    ediTransaction.receiverId, 'doc_type': 855, 'gs_number': tran.ediTransaction.gsNumber })) }}</a>
            </td>

            <td><a href="{{ path('matrix_edi_poack', {'gs_number':  tran.ediTransaction.gsNumber, 'receiver_id':  tran.ediTransaction.receiverId, 'sender_id': tran.ediTransaction.senderId}) }}"data-toggle="modal"data-target="#myModal">
            {{ render(controller('MatrixEdiBundle:Matrix:matrix', {
            'po_num': tran.poNumber, 'sender_id': tran.ediTransaction.senderId, 'reciever_id': tran.    ediTransaction.receiverId, 'doc_type': 997, 'gs_number': tran.ediTransaction.gsNumber })) }}</a>
            </td>

            <td><a href="{{ path('matrix_edi_findAll', {'po_num':  tran.poNumber, 'sender_id':  tran.ediTransaction.senderId, 'doc_type': 856}) }}"data-toggle="modal"data-target="#myModal">{{ render(controller('MatrixEdiBundle:Matrix:matrix', {
            'po_num': tran.poNumber, 'sender_id': tran.ediTransaction.senderId, 'reciever_id': tran.ediTransaction.receiverId, 'doc_type': 856, 'gs_number': tran.ediTransaction.gsNumber }))}}</a>
            </td>

            <td><a href="{{ path('matrix_edi_findAll', {'po_num':  tran.poNumber, 'sender_id':  tran.ediTransaction.senderId, 'doc_type': 810}) }}"data-toggle="modal"data-target="#myModal">{{ render(controller('MatrixEdiBundle:Matrix:matrix', {'po_num': tran.poNumber, 'sender_id': tran.ediTransaction.senderId, 'reciever_id': tran.ediTransaction.receiverId, 'doc_type': 810, 'gs_number': tran.ediTransaction.gsNumber})) }}</a>
            </td>

            <td><a href="{{ path('matrix_edi_findAll', {'po_num':  tran.poNumber, 'sender_id':  tran.ediTransaction.senderId, 'doc_type': 860}) }}"data-toggle="modal"data-target="#myModal">{{ render(controller('MatrixEdiBundle:Matrix:matrix', {'po_num': tran.poNumber, 'sender_id': tran.ediTransaction.senderId, 'reciever_id': tran.ediTransaction.receiverId, 'doc_type':860, 'gs_number': tran.ediTransaction.gsNumber})) }}</a>
            </td>

          <td><a href="{{ path('matrix_edi_findAll', {'po_num':  tran.poNumber, 'sender_id':  tran.ediTransaction.senderId, 'doc_type': 870}) }}"data-toggle="modal"data-target="#myModal">{{ render(controller('MatrixEdiBundle:Matrix:matrix', {
        'po_num': tran.poNumber, 'sender_id': tran.ediTransaction.senderId, 'reciever_id': tran.ediTransaction.receiverId, 'doc_type': 870, 'gs_number': tran.ediTransaction.gsNumber
    })) }}</a></td>

        </tr>
      {% endfor %}
    </tbody>
    </table>
  </div> 


<div id="myModal"class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Details</h4>
      </div>
      <div class="modal-body">
        Loading content......
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
{% endblock %}

{% block javascripts %}
{% javascripts
  'bundles/matrixdoc/js/jQuery.js'
  'bundles/matrixdoc/js/jquery.dataTables.min.js'
  'bundles/matrixdoc/js/dataTables.bootstrap.js'
  'bundles/matrixdoc/js/bootstrap.js'
   %}
  <script src="{{ asset_url }}"></script>
  <script type="text/javascript">
  $(document).ready(function() {
    $('#datTable').dataTable( {
      "scrollY": "400px",
      "scrollCollapse": true,
      "pagingType": "simple",
    });
    $('body').on('hidden.bs.modal', '.modal', function () {
      $(this).removeData('bs.modal');
    });
    $(document).on("hidden.bs.modal", function (e) {
      $(e.target).removeData("bs.modal").find(".modal-content").empty();
    });
    });
</script>
{% endjavascripts %}
{% endblock %}

Answer 1

CAUSE

Error Cannot reinitialise DataTable means that DataTable is initialized more than once with $('#datTable').dataTable() without being destroyed.

SOLUTION

You only run $('#datTable').dataTable() once in your code, therefore there must be something wrong with your templates. Search on StackOverflow confirmed this, see answer for "JavaScript loading twice in Symfony".

You need to move your block containing JavaScript code {% block javascripts %} ... {% endjavascripts %} outside of body block {% block body %} ... {% endblock %}.