How to show json response data in datatable using jQuery ajax request?

Question

I am trying date range search using jquery ajax and show data in datatable. Here is my php controller code.

 public function date()
{
    $date_from = date('Y-m-d H:i:s', strtotime($this->input->post('date_from')));
    $date_to = date('Y-m-d H:i:s', strtotime($this->input->post('date_to')));

    if ($date_from != "" && $date_to != "") {
        $data[] = $this->report_model->get_report_by_date($date_from, $date_to);
        $output= $data;
    }

    echo json_encode($output);

}

Here is my Javascript code

$('#filterDate').click(function () {
    var from_date = $('#from_date').val();
    var to_date = $('#to_date').val();

    if (from_date != '' && to_date != '') {
        $.ajax({
            url: "<?php echo base_url(); ?>report/date",
            method: "POST",
            data: {date_from: from_date, date_to: to_date},
            dataType: "json",


            success: function (output) {

                $("#reportDataOld").remove();
                var json = $.parseJSON(output);
                alert(json.html);
                if (output == "err") {
                    alert("Something Happened Wrong! Please Try Again.");
                } else {
                    $("#reportDataNew").html(output);
                    console.log(output);
                }


            }
        })
        ;
    }
    else {
        alert("Please Select Date");
    }
});

I get json response like this

But Cant represent data in Datatable.

Answer 1

you're not even using data table. Have you tried dataTable's method?

success: function (data, status) {
    let table = $('table').DataTable();
    table.clear();
    let array = $.map(data, function (key) {
        return key;
    });
    $.each(array, function( index, value ) {
        let row = table.row.add([
                                    array[index]['id'],
                                    array[index]['party_id']
                                ]);
        row.draw();
    });
},

Answer 2

Yes I did edit this line to Ajax success and its working.

success: function (output) {

                $("#reportDataOld").remove();

                if (output == "err") {
                    alert("Something Happened Wrong! Please Try Again.");
                } else {
                    var trHTML = '';
                    $.each(output.ReportArr, function (i, obj) {
                        trHTML += '<tr><td>' + obj.id + '</td><td>' + obj.created_datetime + '</td><td>' + obj.product_name + ' </td><td>' + obj.party_name + '</td><td>' + obj.quantity + '</td><td>' + obj.sup_charge_vat_total + '</td><td>' + obj.value_added_tax_qty + '</td><td></td></tr>';
                    });
                    $('#reportDataOld').append(trHTML);
                }
            }