Refresh jquery Data table

Question

I am trying to refresh the create data table without reloading the whole page. So, everytime I try to search for a result, it will refresh the data table and give a new result and not add a new row instead. If i remove the $('#investmentTable').empty();. It gives me the all the result but it does not refresh my result

$('#investmentTable').empty(); only clears my data table completely and doesn't display any result

 <div class="control-group">
      <label class="control-label">Enter From Date</label>
      <div style="width:40%" class="controls">
        <input id="fromDate" type="text" name="fromDate" type="text" data-date-format="dd-mm-yyyy" class="datepicker span11">
    </div>
    </div>
    <div class="control-group">
      <label class="control-label">Enter To Date</label>
      <div style="width:40%" class="controls">
        <input id="toDate" type="text" name="toDate" type="text" data-date-format="dd-mm-yyyy" class="datepicker span11">
    </div>
    </div>
    <div class="form-actions">
        <input id="next" class="btn btn-primary" type="button"
            value="Search" />
        <div id="status"></div>
</div>
$("#next").on("click",function(event) {
 $('#investmentTable').empty();

            $.ajax({
                type: 'POST',
                url: app.api+'admin/report/date',
                data: {
                    fromDate: $('#fromDate').val(),
                    toDate: $('#toDate').val()
                },
                success: function(data)
                {
                    if (data.result == true) {
                    for(var i = 0; i < data.data.length; i++){
                        var item = data.data[i][0];

                        var x = $('#investmentTable').DataTable({
                                    responsive: true, 
                                bJQueryUI: true,
                                scrollX: true,
                                height: "100px",
                                display: "block",
                                sPaginationType:  "full_numbers",
                                sDom: '<""l>t<"F"fp>'                       
                        });
                        x.row.add([item.date, item.name, item.email, item.contact.phone, item.account.investedAmount]);
                        x.draw();
                    }
                    }
                },
                return false;
});

Can you try these for reference ? datatables.net/blog/2017-06-30 datatables.net/media/blog/2017-06-30/onPage.js datatables.net/media/blog/2017-06-30/onPage.css — Plankton

Rajesh Patel Rajesh Patel · Accepted Answer · 2017-07-12T10:08:02

Could you please move the code which creates table out of for loop. Please try below code.

$("#next").on("click",function(event) {
$('#investmentTable').empty();

        $.ajax({
            type: 'POST',
            url: app.api+'admin/report/date',
            data: {
                fromDate: $('#fromDate').val(),
                toDate: $('#toDate').val()
            },
            success: function(data)
            {
                if (data.result == true) {
                                        var x = $('#investmentTable').DataTable({
                                responsive: true, 
                            bJQueryUI: true,
                            scrollX: true,
                            height: "100px",
                            display: "block",
                            sPaginationType:  "full_numbers",
                            sDom: '<""l>t<"F"fp>'                       
                    });
                for(var i = 0; i < data.data.length; i++){
                    var item = data.data[i][0];
                    x.row.add([item.date, item.name, item.email, item.contact.phone, item.account.investedAmount]);
                    x.draw();
                }
                }
            },
            return false;
});

Refresh jquery Data table

1 Answers