JQuery Datatables not loading

41 views

Skip to first unread message

Ronald Kamulegeya

unread,

May 12, 2020, 10:30:04 AM5/12/20

to Django users

Hello members,

I want to use Jquery datatables in my app to take advantage of inbuilt searching,export to pdf and excel features.

Without Jquery the view displays the data...

So here is my code for the base view:

<html>
<head>
 <title>Rentals Mgt Applications</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4-4.1.1/jszip-2.5.0/dt-1.10.21/af-2.3.5/b-1.6.2/b-html5-1.6.2/b-print-1.6.2/cr-1.5.2/r-2.2.4/rg-1.1.2/rr-1.2.7/sc-2.0.2/sp-1.1.0/sl-1.3.1/datatables.min.css"/>
 <script   src="https://code.jquery.com/jquery-3.5.1.slim.js"  integrity="sha256-DrT5NfxfbHvMHux31Lkhxg42LY6of8TaYyK50jnxRnM="  crossorigin="anonymous">
</script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>


<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js">
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js">
</script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4-4.1.1/jszip-2.5.0/dt-1.10.21/af-2.3.5/b-1.6.2/b-html5-1.6.2/b-print-1.6.2/cr-1.5.2/r-2.2.4/rg-1.1.2/rr-1.2.7/sc-2.0.2/sp-1.1.0/sl-1.3.1/datatables.min.js">
</scr
 
 
 
</head>




<body>


<div class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>


            </div>
            <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
 <li><a href="{% url 'rentals:home' %}"> Home </a></li>
                        <li><a href="{% url 'rentals:TenantsListView' %}"> Tenants </a> </li>
                        <li><a href="{% url 'rentals:TenancyListView' %}"> Tenancies </a></li>     
 <li><a href="#"> Process Invoices  </a></li>
 <li><a href="#"> Process Receipts </a></li>
                </ul>
            </div>
        </div>
    </div>






 <div class="container">
{% block content %}
{% endblock %}
</div>



{% block javascript %}
    {% endblock %}


</body>
</html>

Here is the home view where i want the data table.

{% extends 'rentals/base.html' %}
{% block content %}
<div class="container-fluid">


 <table class ="table table-bordered " id="payments" >
 <thead class="thead-dark">
 <tr>
    <th>Tenant</th>
 <th>Invoice Amount</th>
 <th>Invoice Due Date</th>
 <th>Payment Date</th>
 <th>Amount Paid</th>
 <th> Year</th>
 <th>Month</th>
     </tr>
    </thead>


 <tbody>
 {% include 'rentals/home_partial.html' %}
 </tbody>
 </table>


</div>


{% endblock %}


{% block js %}


 <script type="text/text/javascript">
 $(document).ready(function() {
     $('#payments').DataTable(
  
 );
 } );
 </script>
{% endblock js %}

Here is the partial view(home partial view)

{% for p in payment_list %}
 <tr>  
      <td>{{p.tenant}}</td>
      <td>{{p.invoice_amount}}</td>
      <td>{{p.duedate}}</td>
   <td>{{p.payment_date}}</td>
   <td>{{p.amount}}</td>
 <td>{{p.year}}</td>
   <td>{{p.month}}</td>
      </tr>
{% empty %}


  <tr>
    <td colspan="8" class="text-center bg-warning">No infomation</td>
  </tr>
{% endfor %}

Here is the view code! in case it is needed.

class home(ListView):
    model = InvoicePayments
    context_object_name = 'payment_list'
    template_name = 'rentals/home.html'    
    def get_queryset(self):
        return InvoicePayments.objects.all()

Here the Url...

urlpatterns = [
    path("", views.home.as_view(), name="home"),
    path("tenants/list/", views.TenantsListView.as_view(), name="TenantsListView"),    
    path("tenants/add/",views.createTenant, name='createTenant'), 
    path("tenants/edit/<int:pk>/",views.tenat_update, name='edit'),
    path("tenants/delete/<int:pk>/",views.tenant_delete, name='delete'),   
    path('dashboard/', views.invoice_data, name='invoice_data'),
    path("tenancy/all/",views.TenancyListView.as_view(), name='TenancyListView'),
]

When i run the app, i get a blank page(no data displayed) and the console does not show any errors! and data appears in the sources (see screen shot attached).

What is wrong with my code that prevents the data tables to load( i have internet connection).