Rafraîchir la table HTML(vue JSP) après une requête AJAX

Question

J'ai une table HTML qui est remplie dans ma vue JSP. Ce tableau contient toujours des données de la date du jour par défaut. Les données sont récupérées par un batch automatique qui va chercher les données dans une base de données. Cependant, je dois donner une fonctionnalité pour pouvoir sélectionner les données sur une plage de dates. C'est pourquoi j'utilise un daterangepicker. J'ai réussi à appliquer un filtre de date avec des appels ajax.

Ce que je veux faire, c'est que lorsque je sélectionne une nouvelle plage de dates, je mette à jour mon tableau HTML avec la date par défaut avec les données de la date sélectionnée pour remplacer les anciennes données par les nouvelles dans mon tableau.

Voici ma page JSP avec la table que je veux mettre à jour lorsque je sélectionne le tableau. a DATERANGE :

<div class="panel-body">
    <table width="100%"class="table table-striped table-bordered table-hover" id="tableUp">
        <thead>
            <tr>
                <th>FormName</th>
                <th>Type</th>
                <th>Language</th>
                <th>Sent To NAS</th>
                <th>Sending Date</th>
                <th>FeedBack Received</th>
                <th>Feedback not Received</th>
            </tr>
        </thead>
        <tbody id='tbod'>
            <tr class="odd gradeX" id="myTable">
                <c:forEach var="item" items="${eblinb2b_list}">
                    <tr id=1>
                        <td><c:out value="${item.form_name}" /></td>
                        <td><c:out value="${item.mode}" /></td>
                        <td><c:out value="${item.language}" /></td>
                        <td><c:out value="${item.count}" /></td>
                        <td><c:out value="${item.sendingDate}" /></td>
                        <td><c:out value="" /></td>
                        <td><c:out value="" /></td>
                    </tr>
                </c:forEach>
            </tr>
        </tbody>
    </table>
</div>

Pour faciliter la compréhension, j'ai mis ici une nouvelle table dans la partie inférieure de ma vue JSP pour que vous compreniez :

<!-- DateRange PICKER -->

<div class="panel-body">
    <table width="100%" class="class2" id="mainTable">
        <thead>
            <tr>
                <th>FormName</th>
                <th>Type</th>
                <th>Language</th>
                <th>Sent To NAS</th>
                <th>Sending Date</th>
                <th>FeedBack Received</th>
                <th>Feedback not Received</th>
            </tr>
        </thead>
        <tbody>
            <tr class="odd gradeX" id="myTable1"></tr>
        </tbody>
    </table>
    <input type="text" name="datepickerinput" id="datepicker" value="" />
</div>
<!-- /.panel-body -->
<button onclick="filterByDate()" id="button">Apply filter</button>

Voici la partie de ma fonction JavaScript qui remplit mon deuxième tableau pour illustrer mon propos.

**//Function for populating second table with Ajax JSON response**
var table = $("#mainTable tbody");
$.each(data, function(idx, elem) {
    var time = new Date(elem.sendingDate);
    var parsedTime = time.getDate() + "/" + (time.getMonth() + 1) + "/"
                                    + time.getFullYear();

    table.append("<tr><td>" + elem.form_name + "</td><td>"
                            + elem.mode + "</td><td>" + elem.language
                            + "</td><td>" + elem.count + "</td><td>"
                            + parsedTime + "</td></tr>");

Answer 1

J'ai finalement réussi à gérer le problème voici ma fonction finale qui met à jour la table en mettant les données et en remplaçant les anciennes :

                    function prepareTable(data) {

                    //Function for populating table with Ajax JSON response

                    var table = $("#tableUp #tbody1");
                    var html = "";
                    $.each(data, function(idx, elem) {

                        var time = new Date(elem.sendingDate);

                        var parsedTime = time.getDate() + "/"
                                + (time.getMonth() + 1) + "/"
                                + time.getFullYear();

                        html += "<tr><td>" + elem.form_name + "</td><td>"
                                + elem.mode + "</td><td>" + elem.language
                                + "</td><td>" + elem.count + "</td><td>"
                                + parsedTime + "</td><td></td><td></td></tr>";

                    });

                    table.html(html);

                }

La fonction prepareTable() est déclenchée (appelée) lorsque l'appel Ajax a réussi :

                    function filterByDate() {

                    var startDate = document.getElementById("datepicker").value
                            .substring(0, 10);

                    var endDate = document.getElementById("datepicker").value
                            .substring(13, 23);

                    $.ajax({
                        url : '/gms/eblinb2b/filterOnDate',

                        data : {
                            "startDate" : startDate,
                            "endDate" : endDate
                        }, //here you send the daterange over an Ajax request and by default it's sended with a GET method
                        success : function(data) {

                            //here you will see displaying the callback result coming from your spring controller
                            console.log(data);

                            //Here we populate the HTML table with the new data based on the new daterange filter applied and replace the old data in my table
                            prepareTable(data);

                        },

                        error : function(xhr, ajaxOptions, thrownError) {
                            if (xhr.status == 404) {
                                alert(thrownError);
                            }
                        }

                    });
                }