Unable to export Ajax Data to Exel

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. Please find the code.

Thanks in advance.

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

  </table>
</div>

jLinux

format the code

vk4boddu

Thanks jLinux for your reply. I am new to DataTable. Can you please help me to do that or give me sample code to format the code. Thank you very much once again.

jLinux

The Markdown link below the text box you type in to reply has all that info :-)

allan

I think in this case we will actually need a link to the page rather than just the code (regardless of how it is formatted).

Can you give us a link to your page so we can offer some help please.

Allan

vk4boddu

Thanks Allan & jLinux trying to help me on this issue. I find the issue and resolved it. My model (which is converting to JSON) has Boolean data type property so it not allowing me to export. Once I changed the data type from Boolean to string for that property it is working fine.