Printing information on table gathered via ajax call

I am new to using ajax call and modals. I have a form that when members input some values they will get information from controller, I receive the information and managed to display it using a modal. Now I need to print this or export as xls based on user button commands. I have used Datatables in the past with no issues. However when I click on the table either to sort or to have the print out the information comes blank and it clears from the modal. Not sure why this is happening. Here are some screenshots of the issue.

After clicking on the column sorters table is cleared out

Also the excel pdf or print will be blank only showing the headers as those are hard coded.

Here is my JS

$("#report").click(function () {
var postData = $("#ReportsForm").serialize();
$.ajax({
    type: "POST",
    url: "/Reports/GetReport",
    dataType: "json",
    data: postData,
    success: function (data) {
        var row = "";
        $.each(data, function (index, item) {
            var arr = new Date(item.arrive);
            var arrstr = (arr.getMonth() + 1) + "/" + arr.getDate() + "/" + arr.getFullYear();
            var dep = new Date(item.amDepart);
            var depstr = (dep.getMonth() + 1) + "/" + dep.getDate() + "/" + dep.getFullYear();

        row += "<tr><td>" + item.hotelName + "</td><td>"
                 + item.lastFirstRank + "</td><td>"
                 + item.unitName + "</td><td>"
                 + item.gender + "</td><td>"
                 + arrstr + "</td><td>"
                 + depstr + "</td><td>"
                 + item.idt + "</td><td>"
                 + item.adt + "</td></tr>";
        });
        $("#ReservationResultsTable").html(row);
        $('#myLargeModalLabel').modal('show');
    },
    error: function (result) {
        alert(result);
    }
});

});

This is what am using for Datatables:

$(document).ready(function () {
$('#ReportingTable1').DataTable({
    /*paging: false,*/
    "info": false,
    searching: false,
    dom: 'Bfrtip',
    buttons: [
        //{ extend: 'copy', className: 'btn btn-primary glyphicon glyphicon-duplicate' },
        //{ extend: 'csv', className: 'btn btn-primary glyphicon glyphicon-save-file' },
        { extend: 'excel', className: 'btn btn-primary glyphicon glyphicon-list-alt' },
        { extend: 'pdf', className: 'btn btn-primary glyphicon glyphicon-file' },
        { extend: 'print', className: 'btn btn-primary glyphicon glyphicon-print' }
    ]
});

});

Here is my table view:

div class="modal fade bd-example-modal-lg" id="myLargeModalLabel" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">Reports</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <div id="ReportResults">
                <table id="ReportingTable1" class="table table-striped table-bordered table-responsive-xl align-middle" style="text-align:center">
                    <thead class="thead-dark">
                        <tr>
                            <th>Hotel Name</th>
                            <th>Airman</th>
                            <th>Unit</th>
                            <th>Gender</th>
                            <th>Arrive</th>
                            <th>Depart</th>
                            <th>IDT</th>
                            <th>ADT</th>
                        </tr>
                    </thead>
                    <tbody id="ReservationResultsTable">
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>