Unable to export Ajax Data to Excel in DataTable

vk4boddu

Hi, I have search page and using DataTable to display the result set and using Export Excel option. Initializing the DataTable while page loading. When click on search button making ajax call to get the search results and then cleared the DataTable and adding rows using rows.add(json).draw(). And then try to export it is not working. Please suggest on this.

Thanks in advance.

jLinux

Can you show us the code?

vk4boddu

$(document).ready( function () {
ResidentReportComponents.init();

} );

function GetResidentReportResults() {

        oTable = $('#example').DataTable();

       // ResidentReportComponents.init();

        $.ajax({
            "dataType": 'json',
            "type": "POST",
            "url": "http://localhost:5932/Reports/ResidentReportJSon",
            "async": true,
            "success": function (data) {
                oTable.clear();
                oTable.rows.add(data).draw();

                }
        });

}

var ResidentReportComponents = function () {

  var initResidentReportTable = function (rootUtl) {
    var table = $('#example').DataTable({
        "columnDefs": [{ "width": "10%", "targets": 0 },
            { "width": "10%", "targets": 1 },
            { "width": "10%", "targets": 2 },
           // { "width": "5%", "targets": 3 },
            { "width": "7%", "targets": 4 },
            { "width": "15%", "targets": 5 },
            { "width": "6%", "targets": 6 },
           // { "width": "5%", "targets": 7 },
            { "width": "10%", "targets": 8 },
            { "width": "10%", "targets": 9 },
            { "width": "10%", "targets": 10 },
            { "width": "5%", "targets": 11 },
            { "width": "5%", "targets": 12 },
            { "width": "10%", "targets": 13 }
        ],
        "columns": [
                { "data": "BuildingName" },
                { "data": "ClientLastName" },
                { "data": "ClientFirstName" },
                { "data": "DOB" },
                { "data": "SSN" },
                { "data": "CurrentAddress" },
                { "data": "RoomNumber" },
                { "data": "MoveInDate" },
                { "data": "RRHCaseManagerName" },
                { "data": "CASACCaseManagerName" },
                { "data": "HousingAssessmentDate" },
                { "data": "PsychosocialAssessmentDate" },
                { "data": "Income" },
                { "data": "IsInTemporaryHousing" }
        ],

        //dom: "<'row'<'col-sm-2 text-right pull-right'B>>" +
        dom: "<'row'<'col-sm-6'l><'col-sm-4 'f><'col-sm-2  text-right pull-right'B>>" +
                "<'row'<'col-sm-12'tr>>" +
                "<'row'<'col-sm-5'i><'col-sm-7'p>>",
        buttons: [
                    {
                        extend: 'excel',
                        text: '<span class="glyphicon glyphicon-export"></span> Export To Excel',
                        className: 'btn btn-circle btn-default btn-sm',
                        title: 'TQH - Resident Report'
                    }
        ],
        "bStateSave": false, // save datatable state(pagination, sort, etc) in cookie.
        "lengthMenu": [
                    [5, 15, 20, -1],
                    [5, 15, 20, "All"] // change per page values here
        ],
        "pageLength": 5,
        "scrollX": true,
        //"scrollY":false
    });

}
return {

    //main function to initiate the module
    init: function () {
        if (!jQuery().DataTable) {
            return;
        }
        initResidentReportTable();
    }

};

}();

  <a class=" btn green btn-sm" data-toggle="modal" href="#Search" onclick="GetResidentReportResults()">Search</a>
  <table id="example" class="display nowrap" width="100%">
    <thead>
       <tr>
                                                <th>Building
                                                </th>
                                                <th>Last Name
                                                </th>
                                                <th>First Name
                                                </th>
                                                <th>DOB
                                                </th>
                                                <th>SSN
                                                </th>
                                                <th>Current Address 
                                                </th>
                                                <th>Room Number
                                                </th>
                                                <th>Move In Date 
                                                </th>
                                                <th>RH Case Manager 
                                                </th>
                                                <th>CAS Case Manager
                                                </th>
                                                <th>Housing Assessment Date
                                                </th>
                                                <th>Psychosocial Assessment Date
                                                </th>
                                                <th>Income</th>
                                                <th>Is In Temporary Housing</th>
                                            </tr>
    </thead>

    <tfoot>
      <tr>
                                                <th>Building
                                                </th>
                                                <th>Last Name
                                                </th>
                                                <th>First Name
                                                </th>
                                                <th>DOB
                                                </th>
                                                <th>SSN
                                                </th>
                                                <th>Current Address 
                                                </th>
                                                <th>Room Number
                                                </th>
                                                <th>Move In Date 
                                                </th>
                                                <th>RH Case Manager 
                                                </th>
                                                <th>CAS Case Manager
                                                </th>
                                                <th>Housing Assessment Date
                                                </th>
                                                <th>Psychosocial Assessment Date
                                                </th>
                                                <th>Income</th>
                                                <th>Is In Temporary Housing</th>
                                            </tr>
    </tfoot>

  </table>
</div>

vk4boddu

  <a class=" btn green btn-sm" data-toggle="modal" href="#Search" onclick="GetResidentReportResults()">Search</a>
  table id="example" class="display nowrap" width="100%">
    <thead>
       <tr>
                                                <th>Building
                                                </th>
                                                <th>Last Name
                                                </th>
                                                <th>First Name
                                                </th>
                                                <th>DOB
                                                </th>
                                                <th>SSN
                                                </th>
                                                <th>Current Address 
                                                </th>
                                                <th>Room Number
                                                </th>
                                                <th>Move In Date 
                                                </th>
                                                <th>RH Case Manager 
                                                </th>
                                                <th>CAS Case Manager
                                                </th>
                                                <th>Housing Assessment Date
                                                </th>
                                                <th>Psychosocial Assessment Date
                                                </th>
                                                <th>Income</th>
                                                <th>Is In Temporary Housing</th>
                                            </tr>
    </thead>

    <tfoot>
      <tr>
                                                <th>Building
                                                </th>
                                                <th>Last Name
                                                </th>
                                                <th>First Name
                                                </th>
                                                <th>DOB
                                                </th>
                                                <th>SSN
                                                </th>
                                                <th>Current Address 
                                                </th>
                                                <th>Room Number
                                                </th>
                                                <th>Move In Date 
                                                </th>
                                                <th>RH Case Manager 
                                                </th>
                                                <th>CAS Case Manager
                                                </th>
                                                <th>Housing Assessment Date
                                                </th>
                                                <th>Psychosocial Assessment Date
                                                </th>
                                                <th>Income</th>
                                                <th>Is In Temporary Housing</th>
                                            </tr>
    </tfoot>

  </table>
</div>

Intentionally removed starting div tag to display as palin text

vk4boddu

This was not answered by mistake I changed it as answered. So created another discussion for the same question.

jLinux

You didnt have to do that. and you should format your posts.