Print/Export Footer
Print/Export Footer
enorthrop
Posts: 17Questions: 5Answers: 0
Hello!
I've been trying to figure out how to attach the footer of my table when I print/export it. It seems like it should be a fairly straightforward process (as shown at https://datatables.net/extensions/buttons/examples/html5/footer.html), but I can't get it to work properly.
Here is my script:
$('#reportTable').DataTable(
{
dom: 'Blfript', // Blfrtip
buttons:
[
{
extend: 'pdf',
footer: true,
className: 'green glyphicon glyphicon-file',
title: 'Report',
filename: 'Report',
exportOptions:
{
columns: [0, 1, 2, 3, 4, 5, 6, 7]
}
},
{
extend: 'excel',
footer: true,
className: 'green glyphicon glyphicon-list-alt',
title: 'Report',
filename: 'Report',
exportOptions:
{
columns: [0, 1, 2, 3, 4, 5, 6, 7]
}
},
{
extend: 'copy',
footer: true,
className: 'green glyphicon glyphicon-duplicate',
exportOptions:
{
columns: [0, 1, 2, 3, 4, 5, 6, 7]
}
},
{
extend: 'print',
footer: true,
className: 'green glyphicon glyphicon-print',
text: 'Print',
title: ' '
}
],
"footerCallback": function (row, start, end, display)
{
var api = this.api(),data;
// Remove the formatting to get integer data for summation
var intVal = function (i)
{
return typeof i === 'string' ?
i.replace(/[\$,]/g, '') * 1 :
typeof i === 'number' ?
i : 0;
};
// Total over all pages
total = api
.column(5)
.data()
.reduce(function (a, b)
{
return intVal(a) + intVal(b);
}, 0);
// Total over all filtered pages
if (api
.column(5,
{
search: 'applied'
})
.data()
.length)
{
pageTotal = api
.column(5,
{
search: 'applied'
})
.data()
.reduce(function (a, b)
{
return intVal(a) + intVal(b);
});
} else {
pageTotal = 0;
}
// Total by category
var category = api.column(7).data().sort().unique().toArray();
var totals = [];
for (var i = 0; i < category.length; i++) totals.push(0);
api.rows({ filter: 'applied' }).every(function ()
{
var data = this.data();
totals[category.indexOf(data[7])] += intVal(data[5]);
});
// Remove any categories that have a "0" result
html = [];
for (var j = 0; j < category.length; j++) {
if (totals[j] > 0) html.push(category[j] + ': ' + totals[j]);
}
// Update footer
$(api.column(5).footer()).html(html.length === 0 ? "" : html.join('</br>') + '</br>' + pageTotal.toFixed(2) + ' hours ( ' + total.toFixed(2) + ' total hours)');
}
});
}
);
Here is my html:
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>View/Edit Work Entries</h2>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<head>
@* Links for the style sheets *@
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/dt/jszip-2.5.0,dt-1.10.9,b-1.0.3,b-flash-1.0.3,b-html5-1.0.3/datatables.min.css" /> @* Needed for pagination and Copy button *@
<link rel="stylesheet" type="text/css" href="~/Content/dataTables.bootstrap.css" /> @* Button and pagination styles *@
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> @* Style sheet used for DatePicker *@
<link rel="stylesheet" href="/resources/demos/style.css"> @* Style sheet used for DatePicker *@
@* Links for the DataTable and various buttons (PDF, Excel, Copy, Print) *@
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> @* Required for DataTable *@
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> @* Required for DataTable *@
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> @* Required for DataTable *@
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script> @* Required for all buttons *@
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script> @* Required for Copy, Excel, and PDF buttons *@
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script> @* Required for all buttons *@
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script> @* Required for Excel button*@
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script> @* Required for PDF button *@
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script> @* Required for PDF button *@
</head>
@* Text boxes used for user input *@
<table border="0" cellspacing="5" cellpadding="5">
<tbody>
<tr>
<td style="margin: 10px; padding: 5px;">Start Date:</td>
<td><input name="min" id="min" type="text"></td>
</tr>
<tr>
<td style="margin: 10px; padding: 5px;">End Date:</td>
<td><input name="max" id="max" type="text"></td>
</tr>
</tbody>
</table>
@* Sets the header names *@
<table class="table" id="reportTable">
<thead>
<tr>
<th width="100">
Date
</th>
<th width="150">
Name
</th>
<th width="150">
Email
</th>
<th width="150">
Description
</th>
<th width="150">
Location
</th>
<th width="100">
Work Hours
</th>
<th width="150">
District
</th>
<th width="150">
Subject Matter
</th>
<th></th>
</tr>
</thead>
@* Gathers the data from SQL database *@
<tbody>
@foreach (var item in Model)
{
<tr>
<td align="left">
@Html.DisplayFor(modelItem => item.Work_Date)
</td>
<td align="left">
@Html.DisplayFor(modelItem => item.User.User_Name)
</td>
<td align="left">
@Html.DisplayFor(modelItem => item.User.User_Email)
</td>
<td align="left">
@Html.DisplayFor(modelItem => item.Work_Description)
</td>
<td align="left">
@Html.DisplayFor(modelItem => item.Work_Location)
</td>
<td align="center">
@Html.DisplayFor(modelItem => item.Work_Hours)
</td>
<td align="left">
@Html.DisplayFor(modelItem => item.District.District_Name)
</td>
<td align="left">
@Html.DisplayFor(modelItem => item.New_Work.Category_Name)
</td>
@* Displays the Edit, Details, and Delete links *@
<td width="225">
@Html.ActionLink("Edit", "Edit", new { id = item.Work_ID }) |
@Html.ActionLink("Details", "Details", new { id = item.Work_ID }) |
@Html.ActionLink("Delete", "Delete", new { id = item.Work_ID })
</td>
</tr>
}
</tbody>
@* Displays the total within the footer *@
<tfoot>
<tr>
<th colspan="7" style="text-align:right">Total: 0.0</th>
<th></th>
</tr>
</tfoot>
</table>
@* Calls the script that handles the hour totals *@
<script type="text/javascript" src="~/Scripts/totalbuttons.js"></script>
@* Calls the script that handles the user inputs for the date range *@
<script type="text/javascript" src="~/Scripts/daterange.js"></script>
This discussion has been closed.
Answers
Hi @enorthrop ,
That's a lot of code there. We're happy to take a look, but it would help if you could link to a running test case showing the issue so we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
Yeah, sorry. That is part of my frustration right now.
I have a jsfiddle https://jsfiddle.net/l337method/6uapvt48/ and it is working as intended there. Perhaps there is something wrong with my footer syntax in regards to Datatables...?
Hi @enorthrop ,
That's odd that it works in the fiddle, but not on your site. Are you using the same versions, with the same libraries being included?
Cheers,
Colin
Yeah, I am. It actually took a bit of tweaking to get that jsfiddle to accurately represent my site (as mine is connected to a SQL database), but the libraries and versions are all the same.
Not sure what else to suggest. Would you be able to link to your site, without that, we can't see it fail?
C
I really wish I could, but the site is not live yet. Thanks for offering to help though. I guess I'll just keep beating my head against the wall until I figure it out.
@colin
So...I just pulled up my program to show my co-worker the issue that I was having and now it is working. I am not sure why, but I am not going to argue. Perhaps it was a caching problem?
The only thing I can see wrong now, however, is that my column sums that are in the footer show up at the bottom of each column whether it is printed or exported. Do you have any idea as to why the data would be attached to each column like that?
Hi @enorthrop ,
It would be worth updating your fiddle again, I suspect a lot has changed since you first did.
Cheers,
Colin