Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all articles
Browse latest Browse all 81909

Ajax BeginForm with Buttons on Jquery DataTable

$
0
0

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


Viewing all articles
Browse latest Browse all 81909

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>