javascript - jQuery 数据表无法在 symfony 中工作

Question

我已经完成了所有必需的步骤，但我不知道为什么我的数据表没有显示。我已包含 jquery.dataTables.css 和 jquery.dataTables.js。

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

这是我使用 Ajax 的 demo.js 文件:

    $(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;
            }
            }   
    });
    });
    });

我不知道我哪里做错了。

Answer 1

默认情况下， block javascript 会在 html 末尾呈现。因此，在您的情况下，您正在调用 $('#table_view').DataTable();太早了。 移动:

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

位于 JavaScript block 的末尾。并在你的base.html.twig中确保 block javascript是在 block 体之后定义的。