Javascript AJAX成功无法将数据填充到HTML表中

我使用ajax过滤表上的数据。但是当成功呼叫时，数据没有显示在表上。表上的数据消失了

这是我的脚本代码：

$(document).ready(function() {
    $("#inputJenis").change(function() {
        var key = $(this).val();
        var jenis_semester = 'key=' + key;
        $.ajax({
            type: "POST",
            url: '<?php echo base_url("search/filter") ?>',
            data: jenis_semester,
            dataType: 'json',
            success: function(data) {
                $('table tbody').html(data);
            },
            error: function(XMLHttpRequest) {
                alert(XMLHttpRequest.responseText);
            }
        });
    });
});

这是我的模型：

public function getGanjil($key)
    {

        $sql = "SELECT * FROM tahunajaran WHERE jenis = 'Ganjil'";
        $data = $this->db->query($sql);
        $index = 1;
        foreach ($data->result() as $row) {
            $dataSemester[$index] = array('id_tahun_ajaran' =>$row->id_tahun_ajaran,
                            'awal_semester' =>$row->awal_semester ,
                            'akhir_semester'=> $row->akhir_semester,
                            'tahun_ajaran'=>$row->tahun_ajaran,
                            'jenis'=>$row->jenis,
                            'nama_semester'=>$row->nama_semester );
            $index++;
        }
        return $dataSemester;
    }

    public function getGenap($key)
    {

        $sql = "SELECT * FROM tahunajaran WHERE jenis = 'Genap'";
        $data = $this->db->query($sql);
        $index = 1;
        foreach ($data->result() as $row) {
            $dataSemester[$index] = array('id_tahun_ajaran' =>$row->id_tahun_ajaran,
                            'awal_semester' =>$row->awal_semester ,
                            'akhir_semester'=> $row->akhir_semester,
                            'tahun_ajaran'=>$row->tahun_ajaran,
                            'jenis'=>$row->jenis,
                            'nama_semester'=>$row->nama_semester );
            $index++;
        }
        return $dataSemester;
    }

我想在HTML表格上显示数据

<table class="footable table table-striped" data-page-size="10">
    <thead>
        <tr>
            <td id="colNomer">Id</td>
            <td id="colNama">Nama</td>
            <td id="colTanggal">Awal semester</td>
            <td id="colTanggal">Akhir semester</td>
            <td id="colTanggal">Tahun ajaran</td>
            <td id="colNama">Jenis</td>
            <td id="colAksi">Aksi</td>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

请允许我们填写关于成功调用ajax的表格。这是皮克特 无法在表上填充数据

---

我将分离控制器方法，一个用于AJAX调用，另一个用于普通视图，如下所示：

public function doFilter($key) {
    $this->load->helper('url');
    $this->load->model('filter_model', 'filter');
    if ($key == 'Ganjil') {
        $data['semester'] = $this->filter->getGanjil($key);
    } else {
        $data['semester'] = $this->filter->getGenap($key);
    }
    return $data;
}

public function getFilterJson() {
    $key = $this->input->post('key');
    $data = $this->doFilter($key);
    echo json_encode($data);
}

public function filter() {
    $key = $this->input->post('key');
    $data = $this->doFilter($key);
    $this->load->view('tambah_semester', $data);
}

您还需要向AJAX调用传递一个对象，并添加我们在控制器中创建的新URL，我还将使用jquery的$.post，因此如下更改您的JS：

$(document).ready(function() {
    $("#inputJenis").change(function() {
        $('table tbody').empty();//this will make sure the table is empty first
        var key = $(this).val();
        var postdata = {key: key};
        var url = '<?php echo base_url("search/getFilterJson") ?>';
        $.post(url, postdata, function(result) {
            console.log(result);
            if (result) {
                var obj = JSON.parse(result);
                $.each(obj, function(key, line) {
                    var elem = '<tr>\n\
                                    <td>' + line.id + '</td>\n\
                                    <td>' + line.Nama + '</td>\n\
                                    <td>' + line.Awal + '</td>\n\
                                    <td>' + line.Akhir + '</td>\n\
                                    <td>' + line.Tahun + '</td>\n\
                                    <td>' + line.Jenis + '</td>\n\
                                    <td>' + line.Aksi + '</td>\n\
                                </tr>';
                    $('table tbody').append(elem);
                 });
            } else {
                //your error code
            }
        });
    });
});

public function getGanjil($key) {
    $this->db->select("*");
    $this->db->from("tahunajaran");
    $this->db->where("jenis", "Ganjil");
    $data = $this->db->get();
    return $data->result_array();
}

public function getGenap($key) {
    $this->db->select("*");
    $this->db->from("tahunajaran");
    $this->db->where("jenis", "Genap");
    $data = $this->db->get();
    return $data->result_array();
}

---

在您的ajax成功方法中，您可以对数据进行控制台并让我知道您得到了什么结果吗？在您的模型中，$key变量用于什么？我看不出有人在用它，什么都没发生，兄弟。我想过滤表上的数据，当用户从选择框中选择值时，例如'Ganjil'，然后表上的数据更改只显示行'Ganjil'ok的数据，在我提供的JS中，当您在var key=$this.val之后console.logkey；你得到了什么？你知道如何使用控制台吗？在你的模型函数getGanjil中，$键在哪里被使用？

public function getGanjil($key) {
    $this->db->select("*");
    $this->db->from("tahunajaran");
    $this->db->where("jenis", "Ganjil");
    $data = $this->db->get();
    return $data->result_array();
}

public function getGenap($key) {
    $this->db->select("*");
    $this->db->from("tahunajaran");
    $this->db->where("jenis", "Genap");
    $data = $this->db->get();
    return $data->result_array();
}