I am using a datagrid with the buttons for export and show pagination.
My script reference looks like this:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.2.4/js/dataTables.select.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.0/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.0/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.0/js/buttons.print.min.js"></script>
@Styles.Render("https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css")
@Styles.Render("https://cdn.datatables.net/select/1.2.4/css/select.dataTables.min.css")
@Styles.Render("https://cdn.datatables.net/buttons/1.5.0/css/buttons.dataTables.min.css")
The plugin loads like this:
var table = $('#resultsTable').DataTable({
dom: 'Bfrtip',
initComplete: function (settings, json) {
debugger;
$('#resultsTable').DataTable().buttons().container().appendTo('#UserHead');
},
lengthMenu: [
[10, 25, 50, -1],
['10 rows', '25 rows', '50 rows', 'Show all']
],
buttons: [
'pageLength',
{
extend: 'collection',
text: 'Export',
buttons: [
'copy',
'excel',
'csv',
'pdf',
'print'
]
}]
});
This works correctly when the page first starts. I have an Ajax.BeginForm, where I refresh the datatable with a dataset. With the above code, the buttons disappear, but the rest of the datatable plugin works ok.
The Ajax code:
@using (Ajax.BeginForm(Model.ReportName, "Report",
new AjaxOptions
{
OnSuccess = "OnSuccess",
UpdateTargetId = "resultsDiv",
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST"
},
new { @class = "form-horizontal" }
))
{ ... }
I attempted to get the buttons to come back in the datagrid with the following code in the OnSuccess method:
var table = $('#resultsTable').DataTable({
dom: 'Bfrtip',
"initComplete": function (settings, json) {
$('#resultsTable').DataTable().buttons().container().appendTo('#UserHead');
table.buttons().container().appendTo('#UserHead');
},
lengthMenu: [
[10, 25, 50, -1],
['10 rows', '25 rows', '50 rows', 'Show all']
],
buttons: ['pageLength',
{
extend: 'collection',
text: 'Export',
buttons: [
'copy',
'excel',
'csv',
'pdf',
'print'
]
}]
});
This results in an exception in the initComplete function: JavaScript runtime error: Object doesn't support property or method 'buttons'
I have tried the following to fix the issue: Save a table variable from the first load, and call destroy before the OnSuccess call to DataTable. This results in exception.
My question is what should I do to get my export buttons to show back up after the Ajax call(s)?