Here, I have a Django form and view.
I am displaying the data from db using datatables in Django template.
Now I want the view functionality when, I click on view button it should render corresponding row data in popup boxlike "https://datatables.net/extensions/responsive/examples/display-types/bootstrap4-modal.html"
How can we achieve this with Django templates?
service.html
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="id_veh" class="control-label">
Car
</label>
<div class="controls ">
{{ervice.veh_id}}
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="id_service_date" class="control-label">
Service Dtae
</label>
<div class="controls ">
{{service.service_date}}
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="id_kms" class="control-label">
Kms
</label>
<div class="controls ">
{{service.kms}}
</div>
</div>
</div>
views.py
def add_edit_servicing(request, id=None, service=None):
#
if id:
service = Service.objects.get(pk=id)
if request.method == 'POST':
form = ServiceForm(request.POST, request=request)
if form.is_valid():
......
.....
service.save()
context = {
'menu': 'active',
'submenu':'active',
'form': form,
'id':id,
'service':service,
}
return render(request, 'service.html', context=context)
list.html
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-body">
<table id="service" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Veh</th>
<th>Service Date</th>
<th>KMS</th>
<th>View</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</section>
{% endblock %}
{% block scripts %}
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.0/js/dataTables.select.min.js"></script>
<script src="/static/plugins/datatables/dataTables.editor.js"></script>
<script src="/static/plugins/datatables/editor.bootstrap4.min.js"></script>
<script>
$(document).ready(function () {
$.extend(true, $.fn.dataTable.defaults, {
columnDefs: [
{
targets: '_all',
defaultContent: ''
}
]
});
var table = $('#service').DataTable({
"pageLength": 100,
"serverSide": true,
"bSearchable":true,
"dom": 'blfrtip',
"ajax": "/maint/dt/car_service/?format=datatables",
"columns": [
{
"data": "c.number"
},
{
"data": "service_date"
},
{
"data": "kms"
},
{
"data": "id",
"bSortable": false,
"mRender": function (data, type, full) {
return '<a class="btn btn-sm btn-primary" href="srv/service' + full.id + '/view">' + 'View' + '</a>';
}
}]
});
});
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
var csrftoken = getCookie('csrftoken');
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
beforeSend: function (xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
</script>
{% endblock %}
Mentioned datatable ("https://datatables.net/extensions/responsive/examples/display-types/bootstrap4-modal.html") functionality is not working for me to populate the data.
Thankyou
