如何使用 jQuery ajax 请求在数据表中显示 json 响应数据？答案

【问题标题】：How to show json response data in datatable using jQuery ajax request?如何使用 jQuery ajax 请求在数据表中显示 json 响应数据？
【发布时间】：2018-08-01 12:12:34
【问题描述】：

我正在尝试使用 jquery ajax 进行日期范围搜索并在数据表中显示数据。 这是我的 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 响应

但不能在 Datatable 中表示数据。

【问题讨论】：

Remove var json = $.parseJSON(output); 你告诉 jQuery 你使用 dataType: "json", 从服务器返回 JSON 并且服务器代码使用 echo json_encode($output); 返回数据所以试图将它解析成 json 只会导致问题

标签： php jquery ajax

【解决方案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();
    });
},

【讨论】：

【解决方案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);
                }
            }

【讨论】：