Unable to export Ajax Data to Excel in DataTable

vk4boddu · October 2015

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 · October 2015

Can you show us the code?

vk4boddu · October 2015

$(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 · October 2015

  <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 · October 2015

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

jLinux · October 2015

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

Unable to export Ajax Data to Excel in DataTable

Unable to export Ajax Data to Excel in DataTable

Answers

Howdy, Stranger!

Categories

DataTables

Unable to export Ajax Data to Excel in DataTable

Unable to export Ajax Data to Excel in DataTable

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables