I want to show export to excel button after the table loads

Question

I am creating an HTML table from JSON data which is coming from java end. what i want is to after populating the table want to show a export to excel button. what i am doing is, i have an HTML form where users are passing from date to date and choosing something from select option . what i am doing is after the clicking on submit button i am hiding the form and by AJAX call i am calling a URL having JSON data and populating table.

this is my HTML consist of form,table tag and export button

 <form id="formId" method="get">
        <div class="container">
            <h4>Start Date:</h4>
            <input type="text" id="startdate" name="fromdate" width="276"
                placeholder="dd/mm/yyyy" required />

            <h4>End Date:</h4>
            <input type="text" id="enddate" name="todate" width="276"
                placeholder="dd/mm/yyyy" required />


            <h4>Outlets:</h4>
            <select name="outlet" id="all">
                <option>ALL</option>
                <c:forEach var="item" items="${obj.outlet}">
                    <option>${item}</option>
                </c:forEach>
            </select>
            <h5 class="NoDataFound"><%=(request.getAttribute("NoDataFound") == null) ? "" : request.getAttribute("NoDataFound")%></h5>
            <br>
            <div class='progress progress-striped deactive'
                style="background-color: white">
                <div class='progress-bar'>Loading..Please Wait...</div>
            </div>
            <br>
            <div>

                <button id="button" class="btn btn-default" type="submit">Search</button>
            </div>

        </div>

    </form>



    <table id="newTable" class="table table-striped" border="2">
    </table>
<div>

    <a href="welcome.jsp">HOME</a>
    <button id="btnExport">Export To Excel File</button>

</div>

<script type="text/javascript">
        $(function() {
            $("#btnExport").click(function() {
                $("#newTable").table2excel({
                    filename : "Hourly wise Sales Bet Dates"   // this is j query code for exporting the table into excel
                });
            });
        });
    </script>

so when i am loading the page with the form export button also loaded which i dont want i want that my export button should appear after clicking on submit button below the table. but its loading with form only..

below is my J query code where i am calling API

  $(document).ready(function() {
    $("#formId").submit(function(event) {
        event.preventDefault();
    $.ajax({
        url : "HourlySales",
        method : "GET",
        dataType : "json",
        contentType: "application/json; charset=utf-8",
        data : {
               fromdate : $("#startdate").val(),
               todate : $("#enddate").val(),
               outlet : $("#all").val()

             },

        success : function(tableValue) {

//        console.log("test",tableValue);
        $("#formId").hide();
         addTable(tableValue)



        }

    });

    function addTable(tableValue) {
        var col = Object.keys(tableValue[0]); // get all the keys from first
                                                // object
        var countNum = col.filter(i => !isNaN(i)).length; // count all which
                                                            // are number
        var num = col.splice(0, countNum); // cut five elements from frist
        col = col.concat(num); // shift the first item to last
        // CREATE DYNAMIC TABLE.
        var table = document.createElement("table");

        // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

        var tr = table.insertRow(-1); // TABLE ROW.


          for (var i = 0; i < col.length; i++) {
            var th = document.createElement("th"); // TABLE HEADER.
            th.innerHTML = col[i];
            tr.appendChild(th);
        }

        // ADD JSON DATA TO THE TABLE AS ROWS.
        for (var i = 0; i < tableValue.length; i++) {

            tr = table.insertRow(-1);

            for (var j = 0; j < col.length; j++) {
                var tabCell = tr.insertCell(-1);
                tabCell.innerHTML = tableValue[i][col[j]];
            }
        }

        // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
        var divContainer = document.getElementById("newTable");
        divContainer.innerHTML = "";
        divContainer.appendChild(table);
        }

});
});

Answer 1

Well, you can use DataTables to export tables to excel. Datatables can be downloaded here. If I'm correct you want to just show a button to export your table after the table shows.

Start by dynamically inserting the button after the table is filled with the date, and then put the button to execute this code:

//change #tblSample by the id of your table    
$('#tblSample').DataTable({
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'excel',
                text: 'Export table',
                title: ''
            }
        ]
    } );
    } );

also, remember to insert the script tag in the head with the URL of Datables it'll be something like that:

<script type="text/javascript" src="DataTables/datatables.min.js"></script>

I hope this will help you solve your problem