Unable to export Ajax Data to Excel in DataTable

Unable to export Ajax Data to Excel in DataTable

vk4bodduvk4boddu Posts: 12Questions: 1Answers: 0

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.

This question has an accepted answers - jump to answer

Answers

  • jLinuxjLinux Posts: 981Questions: 73Answers: 75
    Answer ✓

    Can you show us the code?

  • vk4bodduvk4boddu Posts: 12Questions: 1Answers: 0
    edited 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>
    
  • vk4bodduvk4boddu Posts: 12Questions: 1Answers: 0
      <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

  • vk4bodduvk4boddu Posts: 12Questions: 1Answers: 0

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

  • jLinuxjLinux Posts: 981Questions: 73Answers: 75

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

This discussion has been closed.