我正在尝试将过滤器应用到我的数据表中，其中包含从属的下拉列表框。但是，当我尝试从下拉列表中选择一个值时，数据表仅从一个下拉列表中获取值。

这是我的代码:

脚本:

<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>

这里Cluster依赖于Area，但是如果我选择Area，它只使用区域过滤，而不是按cluster。

下面是从数据库中选择集群列表的代码:

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

这是我的 View 代码:

<?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>

我想用面积和杂波来过滤数据，然后还要输入和分级。

编辑: **

For more details, I'm adding Controller and model code here:

**

型号

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>&nbsp;
        // <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);
}

我浏览了这个链接 Data-Tables , 但它只给出来自表格列的结果，我没有在表格中显示区域列。

Edit_2:

在用谷歌搜索时，我得到了这个链接，Search API (regular expressions) , Data table specific column filter with multi select drop down , Individual column searching (select inputs) ，我正在尝试实现这样的结果，但是使用下拉框。

欢迎任何形式的帮助。提前致谢。

最佳答案

了解 .search() 和 .column().search() 之间的区别很重要

您在这里遇到的一个问题是，您正在使用 .search()，就好像它正在对 当前过滤 数据集进行减法操作。实际上，.search() 函数的每次调用都只是在原始 数据集上运行，因此它只会返回应用了 1 个过滤器的数据集。

要解决这个问题，最好的选择是搜索特定列的特定值，并利用 .column().search()

我建议更改您对下拉列表的处理方式，以便为他们希望过滤的列使用数据属性，例如:

<select class="table-filter" name="area_id" data-column-filter="2">
    <option></option>
</select>
<select class="table-filter" name="cluster_id" data-column-filter="3">
    <option></option>
</select>

其中 data-column-filter 属性是您要过滤的列的索引。

然后您可以为所有相关选择框的更改编写一个简单的事件监听器。我们甚至可以测试选择框以查看它是否是多选框，并相应地对事件作出 react - 我们可以获得所选值的数组，然后将它们连接在一起成为一个可行的正则表达式语句:

$('.table-filter').on('change',function(){
    $('.table-filter').each(function(){

        var filterColumn = $(this).data('column-filter');
        var filterValue = $(this).val();

        if($(this).is('[multiple]'])){
            var filterValuesExpression = filterValue.join('|');
            dataTable.column(filterColumn).search(filterValuesExpression, true, false );
        }else{
            dataTable.column(filterColumn).search(filterValue);
        }
    });

    dataTable.draw();
});

就您用来确定哪些框在任何时候应该和不应该成为过滤器的一部分(哪些框依赖于其他框)的逻辑而言，这与 DataTables 本身完全不同。

关于javascript - 如何使用两个或多个相关下拉列表过滤数据表？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49504657/