Ajax BeginForm with Buttons on Jquery DataTable

jmccrapi

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)?

kthorngren

The problem is likely due to loading jQuery twice:

<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>

Also the B in dom: 'Bfrtip', is used to place the buttons.

The .buttons().container().appendTo() in the initComplete is probably not needed since you have the B in your dom config.

Kevin

jmccrapi

@kthorngren

Thank you. I removed the duplicate call, and that did not fix. I also changed the code in the ajax postback to remove everything after the DataTable().

$('#resultsTable').DataTable({
            dom: 'Bfrtip',
            "initComplete": function (settings, json) {
                $('#resultsTable').DataTable();
            },
            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'
                    ]
                }]
        });

That did not throw the exception, but you helped me realize what the issue may be due to the scripts not loading. The call in the ajax callback for OnSuccess throws exception on the buttons() because that extension has not been loaded yet, for whatever reason, jquery must be getting reinitialized I think.

Thank you for the help.

jmccrapi

@kthorngren
Hi, I think I hit no instead of yes. Sorry, if you reply again I will hit yes? You did answer this question.

kthorngren

You will want to remove this code. It is not doing anything useful. Its just creating an API instance that is lost when the function completes.

            "initComplete": function (settings, json) {
                $('#resultsTable').DataTable();
            },

Kevin