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>
when we click create button how to show processing icon there