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

Question

我使用 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 filter()
    {
        $this->load->helper('url');

        $key = $this->input->post('key');

        if ( $key == 'Ganjil' ) {
            $this->load->model('filter_model', 'filter');
            $data['semester'] = $this->filter->getGanjil($key);
        } else {
            $this->load->model('filter_model', 'filter');
            $data['semester'] = $this->filter->getGenap($key);
        }
        $this->load->view('tambah_semester', $data);

        echo json_encode($data);
    }

这是我的模型：

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 的表格。这是图片 数据无法填充到表中

Answer 1

我会将您的控制器方法分开，一个用于 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
            }
        });
    });
});

而你的模型，发生了太多事情。您应该使用 Codeigniter 的函数，如下所示：

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