目前,我的視圖類中有一個表,其中使用 Codeigniter 中的 MVC 框架填充了來自后端的資料。現在我在每列上方都有一個下拉串列,用于填充我的資料庫中的相同記錄。所以我是一個過濾器,一旦人們點擊下拉串列中的專案,它就會過濾我的記錄。
為了實作這一點,我使用 Jquery 來獲取所選專案并將該值發送到我的控制器。代碼:
到目前為止,我的視圖類中有這個:
<table>
<tr>
<th width="10%">Source</th>
</tr>
<tr>
<td width="5%"><select id="your_id_name">
<option value="">All </option>
<?php if($sources) foreach($sources as $source): ?>
<option value="<?php echo $source['title'] ?>"><?php echo $source['title'] ?></option>
<?php endforeach;?>
</select></td>
<td width="10%"><select id="contact_type">
<option value="">All </option>
<?php if($types) foreach($types as $type): ?>
<option value="<?php echo $type['id'] ?>"><?php echo $type['title'] ?></option>
<?php endforeach;?>
</select></td>
</tr>
<tbody>
<?php
if(isset($records) && count($records) > 0)
{
foreach($records as $row ){
?>
<tr>
<td><?= $row->source ?></td>
<td><?= $row->title ?></td>
</tr>
<?php } } ?>
</tbody>
<script type="application/javascript">
$('#your_id_name').on('change', function() {
console.log($('#your_id_name').val());
$.get('<?php echo base_url('ajax_dropdown'); ?>', {
selected: $('#your_id_name').val()
}, function(res) {
var values = JSON.parse(res); // then do something
var status = values.status;
var records = values.records;
var html = ""
records.forEach(function(row){
html = `<tr><td>${row.source}</td>
<td>${row.title }</td></tr>
`;
console.log(tbody_tag)
})
var tbody_tag = $('tbody#table_body');
tbody_tag.html(html);
})
})
$('#contact_type').on('change', function() {
console.log($('#contact_type').val());
$.get('<?php echo base_url('ajax_dropdown'); ?>', {
selected_contact: $('#contact_type').val()
}, function(res) {
var values = JSON.parse(res); // then do something
var status = values.status;
var records = values.records;
var html = ""
records.forEach(function(row){
html = `<tr><td>${row.source}</td>
<td>${row.title}</td></tr>
`;
})
var tbody_tag = $('tbody#table_body');
tbody_tag.html(html);
})
})
控制器類:
public function ajax_lists(){
$data = array(); // store data in here, store all data you need in data
$selected_input = $this->input->get('selected');
$selected_input2 = $this->input->get('selected_contact');
$data['records'] =$this->contacts_model->get_records($selected_input,$selected_input2);
echo json_encode($data);
}
型號分類:
function get_records($selected_input = null,$selected_input2 =null){
$this->db->select("*");
$this->db->from("crm_contacts as con");
if($selected_input){
$this->db->where("con.added_by",$selected_input);
}
if($selected_input2){
$this->db->where("con.contact_type",$selected_input2);
}
$query = $this->db->get();
return $query->result();
}
到目前為止,我可以一次過濾所有記錄 1。因此,假設我按源過濾表,然后在該源中我想按 contact_type 過濾剩余的資料,我不能這樣做,因為這樣做會重置我擁有的第一個過濾器并根據我單擊的新選擇項過濾所有資料.
基本上,我希望能夠過濾已經過濾的資料并根據我的需要進行更改。我試過在我的一個 onchange 函式中輸入 2 個相同的 val,如下所示:
$('#your_id_name').on('change', function() {
console.log($('#your_id_name').val());
$.get('<?php echo base_url('ajax_dropdown'); ?>', {
selected: $('#your_id_name').val(),
selected_contact: $('#contact_type').val()
但這仍然沒有奏效。
uj5u.com熱心網友回復:
首先,在 jquery 中修復您的網址:
'<?php echo base_url('ajax_dropdown'); ?>'
到:
'<?php echo base_url("ajax_dropdown"); ?>'
tbody_tag.html(html);
html 在這里不起作用。使用附加功能
$('tbody').append(html);
不需要在控制器中創建 $data的鍵["records"]使用這個:
$data['records'] =$this->contacts_model->get_records($selected_input,$selected_input2);
并通過console.log(res)檢查;無論您是否收到回復...
轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/353909.html
下一篇:將資訊從AJAX傳遞到控制器類
