Hello members,
Here the Url...
-- 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).
Ronald
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users+unsubscribe@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/d76d9568-48e8-4a02-8d17-3d075ce03165%40googlegroups.com.
No comments:
Post a Comment