Question

我是一个新的Django开发人员，我希望并分页到我的表视图。我用这个链接来做。 reference link

但是当加载页面时，控制台中会显示此错误。

TypeError: $(...).DataTable is not a function

我的视图模板代码。

    {% extends "base.html" %}

{% block content %}
  <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
            </tr>
        </tbody>
    </table>
{% endblock %}

我的基本模板代码：

   {% load staticfiles %}

<!doctype html>

<html class="no-js" lang="">
    <head>
         <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Marcador - {% block title %}{% endblock %}</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="apple-touch-icon" href="{% static "apple-touch-icon.png" %}">

        <link rel="stylesheet" href="{% static "css/bootstrap.min.css" %}">
        <style>
            body {
                padding-top: 50px;
                padding-bottom: 20px;
            }
        </style>
        <link rel="stylesheet" href="{% static "css/bootstrap-theme.min.css" %}">
        <link rel="stylesheet" href="{% static "css/main.css" %}">
        <script src="{% static "js/vendor/modernizr-2.8.3-respond-1.4.2.min.js" %}"></script>


        <!--http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js-->

        <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

       <script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>

        <script src="https://cdn.datatables.net/1.10.10/js/dataTables.bootstrap.min.js" ></script>

       <!-- DataTables -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/dataTables.bootstrap.min.css">


    </head>
    <body>


       <div class="container">
             <header>
               {% block toggle_login %}
                     {% include "toggle_login.html" %}
               {% endblock %}
              </header>

             <div>
                 {% block heading %}{% endblock %}
             </div>
             <div>
                 {% block content %}{% endblock %}
           </div>

           <hr>

            <footer>
                  <p>&copy; Company 2015-2016</p>
            </footer>
        </div>


        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="{% static "js/vendor/jquery-1.11.2.min.js" %}"><\/script>')</script>

        <script src="{% static "js/vendor/bootstrap.min.js" %}"></script>

        <script src="{% static "js/main.js" %}"></script>


        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
        <script>
            (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
            function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
            e=o.createElement(i);r=o.getElementsByTagName(i)[0];
            e.src='//www.google-analytics.com/analytics.js';
            r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
            ga('create','UA-XXXXX-X','auto');ga('send','pageview');
        </script>

        <script type="text/javascript">
           $(document).ready(function() {
            $('#example').dataTable();
           });

        </script>
  </body>
</html>

目前看起来像这样：

Answer 1

根据您自己的代码：

错误消息显示：TypeError: $(...).DataTable is not a function

但您使用：$('#example').dataTable();

我很困惑

Answer 2

您似乎试图在页面上不存在的HTML x = ["1","2","3","4"] x.map(&:to_i)元素上调用.dataTable()

id

替换＆＃34; #example＆＃34;引用表格中的HTML $('#example').dataTable();或id，您希望将dataTable应用到。

Django视图传递错误数据表是不是一个函数？

2 个答案: