I'm trying to apply filters to my data-table with drop-down list box which are dependent. But when i'm trying to select a value from drop-down, data-table takes value from only one drop-down.
Here is my code:
Script:
<script type="text/javascript">
$(document).ready(function(){
var dataTable = $('#exampleProp').DataTable({
"processing": true,
"serverSide": true,
"dom": 'lfrtip',
"ajax": {
"url": "<?= base_url('Property/fetchProp'); ?>",
"dataType": "json",
"type": "POST"
},
"lengthMenu": [[50, 100, 200, -1], [50, 100, 200, "All"]],
// "ordering": false,
});
$('#areaId').on('change', function(){
if (this.value == 1) {
dataTable.search("Midlands & East of England").draw();
} else {
dataTable.search("North East, Yorkshire & Humberside").draw();
}
});
$('#cluster_id').on('change', function(){
dataTable.search(this.value).draw();
});
$('#prop_type').on('change', function(){
dataTable.search(this.value).draw();
});
$('#prop_status').on('change', function(){
dataTable.search(this.value).draw();
});
});
</script>
In this, Cluster is dependent on Area, but if I select Area, it filters using area only, and not by cluster.
Here is the code to pick a cluster list from database:
$('#areaId').change(function(){
var form_date =
$.ajax({
url: "<?= base_url('Property/clusterlistAddPropertyUse'); ?>",
data: {areaId:$(this).val()},
method:'POST',
dataType: 'html',
success:function(data){
// $('#cluster_id option:selected').each(function(){
// $(this).prop('selected', false);
// });
$('#cluster_id').html(data);
$('.propcluster').multiselect('rebuild');
}
});
});
Here is my view code:
<?php if($this->session->flashdata('success_msg')){ ?>
<div class="alert alert-success">
<?php echo $this->session->flashdata('success_msg'); ?>
</div>
<?php } ?>
<?php if($this->session->flashdata('error_msg')){ ?>
<div class="alert alert-danger">
<?php echo $this->session->flashdata('error_msg'); ?>
</div>
<?php } ?>
<div class="panel panel-default" id="refresh">
<div class="panel-heading">
<b>Property List</b>
</div>
<div class="panel-body">
<div class="col-md-3">
<label>Area:</label>
<select class="form-control select2" name="area_id" id="areaId">
<option>All</option>
<?php foreach ($areas as $area) { ?>
<option value="<?= $area->area_id; ?>"><?php echo $area->area_name; ?></option>
<?php } ?>
</select>
</div>
<div class="col-md-3">
<label>Cluster:</label>
<select class="form-control select2" name="cluster_id[]" id="cluster_id">
<option>All</option>
<?php foreach ($clusters as $cluster){ ?>
<option><?php echo $cluster->cluster_name; ?></option>
<?php } ?>
</select>
</div>
<div class="col-md-3">
<label>Type:</label>
<select class="form-control" name="property_type" id="prop_type">
<option>All</option>
<?php if ($property_type) { foreach ($property_type as $type) {?>
<option><?= $type->property_type_name;?></option>
<?php } } ?>
</select>
</div>
<div class="col-md-3">
<label>Stage:</label>
<select class="form-control" name="property_status" id="prop_status">
<option>All</option>
<?php foreach ($property_stage as $stage) { ?>
<option><?= $stage->stage_name; ?></option>
<?php } ?>
</select>
</div>
</div>
<div class="panel-body">
<table id="exampleProp" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Code</th>
<th>Date</th>
<th>Type</th>
<th>ASYS</th>
<th>Address1</th>
<!-- <th>Area</th> -->
<th>City</th>
<th>Status</th>
<th>Landlord</th>
<th>Rooms</th>
<th>Edit</th>
<th>Action</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Code</th>
<th>Date</th>
<th>Type</th>
<th>ASYS No</th>
<th>Address1</th>
<!-- <th>Area</th> -->
<th>City</th>
<th>Status</th>
<th>Landlord</th>
<th>Rooms</th>
<th>Edit</th>
<th>Action</th>
</tr>
</tfoot>
</table>
</div>
<div class="modal fade" id="myModal">
<?php include('property_model_view.php'); ?>
</div>
</div>
I want to filter data with both area and cluter and then type and stage also.
Edit: **
For more details, I'm adding Controller and model code here:
**
Model
public function prop_query()
{
# code...
$this->db->select('property_id, property_code, property_added_date, property_updated_date, property_type, tbl_property_type.property_type_name as type, property_ASYS_no, property_address_1, property_area, tbl_area.area_name as area, property_cluster, tbl_cluster.cluster_name as cluster, property_status, tbl_property_stage.stage_name as stage, property_landlord_id, concat(tbl_landlord.landlord_first_name, tbl_landlord.landlord_middle_name, tbl_landlord.landlord_last_name) as landlord, property_postcode, count(tbl_rooms.room_property_id) as rooms,');
$this->db->from($this->property);
$this->db->join('tbl_property_type', 'tbl_property.property_type = tbl_property_type.property_type_id', 'left');
$this->db->join('tbl_area', 'tbl_property.property_area = tbl_area.area_id', 'left');
$this->db->join('tbl_cluster', 'tbl_property.property_cluster = tbl_cluster.cluster_id', 'left');
$this->db->join('tbl_property_stage', 'tbl_property.property_status = tbl_property_stage.stage_id', 'left');
$this->db->join('tbl_landlord', 'tbl_property.property_landlord_id = tbl_landlord.landlord_id', 'left');
$this->db->join('tbl_rooms', 'tbl_property.property_id = tbl_rooms.room_property_id', 'left');
// $whereArray = array('tbl_property.property_type' => $propertyType, 'tbl_property.property_area' => $area, 'tbl_property.property_status' => $stageId, 'tbl_property.property_cluster' => '$clusterString');
// $this->db->where('tbl_property.property_type', $propertyType);
// $this->db->where('tbl_property.property_area', $area);
// $this->db->where('tbl_property.property_status', $stageId);
// $this->db->where('tbl_property.property_cluster', $clusterString);
$this->db->group_by('tbl_property.property_id');
// $this->db->order_by("tbl_property.property_updated_date", "DESC");
if (isset($_POST["search"]["value"])) {
# code...
$this->db->like("property_id", $_POST["search"]["value"]);
$this->db->or_like("property_code", $_POST["search"]["value"]);
$this->db->or_like("property_added_date", $_POST["search"]["value"]);
$this->db->or_like("tbl_property_type.property_type_name", $_POST["search"]["value"]);
$this->db->or_like("property_ASYS_no", $_POST["search"]["value"]);
$this->db->or_like("property_address_1", $_POST["search"]["value"]);
$this->db->or_like("tbl_area.area_name", $_POST["search"]["value"]);
$this->db->or_like("tbl_cluster.cluster_name", $_POST["search"]["value"]);
$this->db->or_like("tbl_property_stage.stage_name", $_POST["search"]["value"]);
$this->db->or_like("concat(tbl_landlord.landlord_first_name, tbl_landlord.landlord_middle_name, tbl_landlord.landlord_last_name)", $_POST["search"]["value"]);
$this->db->or_like("property_postcode", $_POST["search"]["value"]);
}
if (isset($_POST["order"])) {
# code...
// $this->db->order_by("tbl_property.property_updated_date", "DESC");
$this->db->order_by($this->order_column[$_POST['order']['0']['column']], $_POST['order']['0']['dir']);
} else {
# code...
$this->db->order_by("tbl_property.property_updated_date", "DESC");
// $this->db->order_by($this->order_column[$_POST['order']['0']['column']], $_POST['order']['0']['dir']);
}
}
public function prop_datatables()
{
# code...
$this->prop_query();
if ($_POST["length"] != -1) {
# code...
$this->db->limit($_POST["length"], $_POST["start"]);
}
$query = $this->db->get();
return $query->result();
}
public function prop_filtered_data()
{
# code...
$this->prop_query();
$query = $this->db->get();
return $query->num_rows();
}
public function prop_all_data()
{
# code...
$this->db->select("*");
$this->db->from($this->property);
return $this->db->count_all_results();
}
Controller:
public function fetchProp()
{
# code...
$user = $this->ion_auth->user()->row();
$data['username'] = $user->username;
$data['user_id'] = $user->id;
$user_id = $user->id;
$data['groupId'] = $this->l->groupId($user_id);
$data['group'] = $data['groupId']['0']->group_id;
$fetch_prop = $this->pm->prop_datatables();
$data = array();
foreach ($fetch_prop as $row) {
# code...
$sub_array = array();
$sub_array[] = $row->property_code;
$sub_array[] = $row->property_added_date;
$sub_array[] = $row->type;
$sub_array[] = $row->property_ASYS_no;
$sub_array[] = $row->property_address_1;
// $sub_array[] = $row->area;
$sub_array[] = $row->cluster;
$sub_array[] = $row->stage;
$sub_array[] = $row->landlord;
$sub_array[] = $row->rooms;
}
}
// $sub_array[] = '<a style="text-decoration: none;" href="'.base_url('Property/propertyDetails/'.$row->property_id).'" class="btn-warning btn-xs">View</a>
// <a style="text-decoration: none;" href="'.base_url('Property/viewRoom/'.$row->property_id).'" class="btn-success btn-xs">Rooms</a>';
$data[] = $sub_array;
}
$output = array(
"draw" => intval($_POST["draw"]),
"recordsTotal" => $this->pm->prop_all_data(),
"recordsFiltered" => $this->pm->prop_filtered_data(),
"data" => $data
);
echo json_encode($output);
}
I'm gone through this link Data-Tables, But it gives result from columns from table only, I'm not showing area column in the table.
Edit_2:
While googled, I got this link, Search API (regular expressions), Data table specific column filter with multi select drop down , Individual column searching (select inputs) , I'm trying to achieve result like this, But with Drop-down box.
Any kind of help is welcome. Thanks in advance.
phpcode, and how about that snippet? ;)