如何使用jQuery ajax請求在數據表中顯示json響應數據？

Question

我正在嘗試使用jquery ajax進行日期范圍搜索，並在datatable中顯示數據。 這是我的php控制器代碼。

 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);

}

這是我的Javascript代碼

$('#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");
    }
});

我得到這樣的json響應

但是Cant在Datatable中表示數據。

Answer 1

您甚至都沒有使用數據表。 您是否嘗試過dataTable的方法？

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

是的，我確實編輯了此行以了解Ajax的成功及其工作。

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);
                }
            }