When I try to export datatables as a pdf It turns out as I have posted in image attached to question
When I try to export datatables as a pdf It turns out as I have posted in image attached to question
sheikhchilli
Posts: 1Questions: 1Answers: 0
I am using dataTables with jquery in Django templates
and the following is my code
`{% block pageContent %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.datatables.net/2.0.0/css/dataTables.dataTables.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/3.0.0/css/buttons.dataTables.css">
<link rel="stylesheet" href="https://cdn.datatables.net/rowgroup/1.5.0/css/rowGroup.dataTables.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/3.0.0/css/responsive.dataTables.css">
</head>
<body>
| Remaining | Credit | Debit | Description | Date |
|---|---|---|---|---|
| {{transaction.get_running_balance}} | {{transaction.credit}} | {{transaction.debit}} | {{transaction.description}} | {{transaction.form.created_at}} |
{% endblock pageContent %} {% block ScriptBlock %}
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://cdn.datatables.net/2.0.0/js/dataTables.js"></script>
<script src="https://cdn.datatables.net/buttons/3.0.0/js/dataTables.buttons.js"></script>
<script src="https://cdn.datatables.net/buttons/3.0.0/js/buttons.dataTables.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/3.0.0/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/3.0.0/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/responsive/3.0.0/js/dataTables.responsive.js"></script>
<script src="https://cdn.datatables.net/responsive/3.0.0/js/responsive.dataTables.js"></script>
<script src="https://cdn.datatables.net/rowgroup/1.5.0/js/dataTables.rowGroup.js"></script>
<script src="https://cdn.datatables.net/rowgroup/1.5.0/js/rowGroup.dataTables.js"></script>
<script>
$(document).ready(function () {
$('#example').DataTable({
layout: {
topStart: {
buttons: ['copy', 'csv', 'excel', 'pdf', 'print']
}
}
})
})
</script>
{% endblock ScriptBlock %}
</body>
</html>
`
Answers
I'm not sure I see what the problem is, and you don't explicitly say what the issue is?
Allan