jQuery Datatable funktioniert nicht in Symfony

Question

Ich habe alle erforderlichen Schritte durchgeführt, aber ich weiß nicht, warum meine Datentabelle nicht angezeigt wird. Ich habe jquery.dataTables.css und jquery.dataTables.js eingeschlossen.

**view.html.twig** 

{% extends 'base.html.twig' %} 

{% block stylesheets %} 
    <link rel="stylesheet" href="{{ asset('bundles/app/css/style.css') }}" > 
    <link rel="stylesheet" href="{{ asset('bundles/app/css/bootstrap.css') }}" > 
    <link rel="stylesheet" href="{{ asset('bundles/app/css/bootstrap-grid.css') }}" > 
    <link rel="stylesheet" href="{{ asset('bundles/app/css/bootstrap-theme.css') }}" > 
    <link rel="stylesheet" href="{{ asset('bundles/js/media/css/dataTables.bootstrap.css') }}" > 
    <link rel="stylesheet" href="{{ asset('bundles/js/media/css/jquery.dataTables.css') }}" > 
{% endblock %} 

{% block javascripts %} 
    <script src="{{ asset('bundles/app/js/bootstrap.min.js') }}"></script> 
    <script src="{{ asset('bundles/app/js/jquery-3.2.1.min.js') }}"></script> 
    <script src="{{ asset('bundles/app/js/jquery-ui.js') }}"></script> 
    <script src="{{ asset('bundles/app/js/demo.js') }}"></script> 
    <script src="{{ asset('bundles/js/media/js/jquery.dataTables.js') }}"></script> 
    <script src="{{ asset('bundles/js/media/js/dataTables.bootstrap.js') }}"></script> 
    <script src="{{ asset('bundles/js/media/js/jquery.dataTables.js') }}"></script> 
{% endblock %} 

{% block body %} 
    <h1>STUDENT INFORMATION FORM</h1> 
    <table class="container" id="table_view" border="1"> 
     <thead> 
      <tr> 
       <th>USER NAME</th> 
       <th>FIRST NAME</th> 
       <th>LAST NAME</th> 
       <th>EMAIL ID</th> 
       <th>PASSWORD</th> 
       <th>EDIT</th> 
       <th>DELETE</th> 
      </tr> 
     </thead> 
     <tbody> 
     {% for key in view %} 
      <tr> 
       <td>{{ key.UserName }}</td> 
       <td>{{ key.FirstName }}</td> 
       <td>{{ key.LastName }}</td> 
       <td>{{ key.EmailId }}</td> 
       <td>{{ key.Password }}</td> 
       <td><span class="link"><a href="/my_project/web/app_dev.php/edit/{{ key.id }}" class="btn btn-primary btn-lg">Edit</a><span></td> 
       <td><span class="link"><a href="/my_project/web/app_dev.php/delete/{{ key.id }}" class="deleteUser btn btn-danger btn-lg">Delete</a><span></td> 
      </tr> 
     {% endfor %} 
     </tbody> 
    </table> 
    <script> 
      $(document).ready(function(){ 
      $('#table_view').DataTable(); 
      }); 
    </script> 


{% endblock %} 



     **demo.js** 

Das ist mein demo.js Datei i Ajax bin mit:

$(document).ready(function(){ 
    $("#create").click(function(){ 
    alert('You Can See Student Information Form'); 

     //var formURL = "{{ path('form') }}"; 
     //var formData = new FormData(this); 

      $.ajax({ 
      type: "POST", 
      url: formURL, 
      dataType: "json", 
      data: $("#form_person_edit").serialize(), 
      success: function(res){ 
      $(".ajax_response").html(); 

      if(res.status == 'success'){ 
      window.location.href = viewURL; 
      } 
      } 
    }); 
    }); 
    }); 

Ich weiß nicht, wo ich einen Fehler gemacht haben.

Answer 1

Standardmäßig wird block javascripts am Ende des HTML gerendert. In diesem Fall rufen Sie $ ('# table_view') auf. DataTable(); zu früh. Bewegen :

<script> 
      $(document).ready(function(){ 
      $('#table_view').DataTable(); 
      }); 
    </script> 

am Ende des Blocks Javascripts. Und stellen Sie in Ihrer Datei base.html.twig sicher, dass block javascripts nach Block body definiert sind.