php - 使用 Symfony2 和 Twig 时出现警告 "Cannot reinitialise DataTable"

Question

每次登录系统时，在开发环境下运行时，都会不断弹出此对话框。

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

但每当我运行生产环境时，一切正常。我怎样才能摆脱这个？

// 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

错误 Cannot reinitialise DataTable意味着 DataTable 被 $('#datTable').dataTable() 多次初始化而没有被破坏。

SOLUTION

您在代码中只运行了一次$('#datTable').dataTable()，因此您的模板一定有问题。在 StackOverflow 上搜索证实了这一点，请参阅 answer for "JavaScript loading twice in Symfony" .

您需要将包含 JavaScript 代码的 block {% block javascripts %} ... {% endjavascripts %} 移到 body block 之外 {% block body %} ... { % endblock %}.