那些遇到过的问题

如何使用两个或更多依赖下拉列表过滤数据表？

Gan*_*her 8 html javascript jquery datatables codeigniter-3

我正在尝试使用依赖的下拉列表框将过滤器应用于我的数据表.但是,当我尝试从下拉列表中选择一个值时,data-table只从一个下拉列表中获取值.

这是我的代码:

脚本:

<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>
Run Code Online (Sandbox Code Playgroud)

在此,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');                 
             }
          }); 
    });
Run Code Online (Sandbox Code Playgroud)

这是我的观看代码:

<?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>
Run Code Online (Sandbox Code Playgroud)

我想用area和cluter过滤数据,然后输入和分段.

编辑: **

有关更多详细信息,我在此处添加控制器和模型代码:

**

模型

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();
}
Run Code Online (Sandbox Code Playgroud)

控制器:

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);
}
Run Code Online (Sandbox Code Playgroud)

我已经浏览了这个链接数据表,但是它只从表中的列给出结果,我没有在表中显示区域列.

Edit_2:

谷歌搜索时,我得到了这个链接,搜索API(正则表达式),数据表特定列过滤器与多选下拉 ,单独列搜索(选择输入) ,我试图实现这样的结果,但使用下拉框.

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

Per*_*ell 5

重要的是要认识到.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>
Run Code Online (Sandbox Code Playgroud)

其中data-column-filter属性是要筛选的列的索引.

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

$('.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();
});
Run Code Online (Sandbox Code Playgroud)

根据逻辑,您可以在任何时候确定哪些框应该和不应该是过滤器的一部分(哪些框取决于哪些框),这与DataTables本身完全不同.

Gan*_*her 0

感谢您的回复。我正在处理Data-Table并且PHP我想Server-Side Processing从数据库中获取数据。

我在这里发布我的代码，

我找到了解决方案：

<div class="panel panel-default" id="refresh">
    <div class="panel-heading">
        <b>Defects List</b>
    </div>
    <div class="panel-body">
        <form id="form-filter" class="form-horizontal">
            <div class="row">
                <div class="col-md-3">
                  <label>Area:</label>
                  <?php echo $form_area; ?>
                </div>
                <div class="col-md-3">
                  <label>Cluster:</label>
                  <?php echo $form_cluster; ?>
                </div>
                <div class="col-md-3">
                    <label>Timeframe:</label>
                    <?php echo $form_timeframe; ?>
                </div>  
                <div class="col-md-3">
                    <label>Status:</label>
                    <?php echo $form_defect_status; ?>
                </div>
            </div><br>
            <div class="row">
                <div class="col-md-3" style="display: none;">
                    <label>FUP Start Date:</label>
                    <div class="input-group date">
                        <div class="input-group-addon">
                            <i class="fa fa-calendar"></i>
                        </div>
                        <input type="text" name="startdate" class="form-control" id="datepickerfilter1" placeholder ="dd/mm/yyyy"/>
                    </div>
                </div>
                <div class="col-md-3" style="display: none;">
                    <label>FUP End Date:</label>
                    <div class="input-group date">
                        <div class="input-group-addon">
                            <i class="fa fa-calendar"></i>
                        </div>
                        <input type="text" name="enddate" class="form-control" id="datepickerfilter2" placeholder ="dd/mm/yyyy"/>
                    </div>
                </div>
                <div class="col-sm-6 pull-right" style="text-align: right;">
                    <label>&nbsp;</label><br>
                    <button type="button" id="btn-filter" class="btn btn-primary" style="margin: 0 0px;">Filter</button>
                    <button type="button" id="btn-reset" class="btn btn-default" style="margin: 0 30px;">Reset</button>
                </div>
            </div>
        </form>
    </div>
    <div class="panel-body">
    <table id="defect_view" class="table table-striped table-bordered" cellspacing="0" width="100%">
        <thead>
                <tr>
                <th>ID</th>
                <th>Date</th>
                <th>Subject</th>
                <th>Address1</th>
                <th>Cluster</th>
                <th>Assign to</th>
                <th>FUP-Date</th>
                <th>Timeframe</th>
                <!-- <th>Landlord</th> -->
                <th>Status</th>
                <th>Action</th>

                </tr>
            </thead>
            <tfoot>
                <th>ID</th>
                <th>Date</th>
                <th>Subject</th>
                <th>Address1</th>
                <th>Cluster</th>
                <th>Assign to</th>
                <th>FUP-Date</th>
                <th>Timeframe</th>
                <!-- <th>Landlord</th> -->
                <th>Status</th>
                <th>Action</th> 
            </tfoot>
        </table>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

脚本：

<script type="text/javascript">
  var defect_view_var;

$(document).ready(function() {

    defect_view_var = $('#defect_view').DataTable({ 

        "processing": true, //Feature control the processing indicator.
        "serverSide": true, //Feature control DataTables' server-side processing mode.
        "order": [], //Initial no order.

        // Load data for the table's content from an Ajax source
        "ajax": {
            "url": "<?php echo site_url('Property/ajax_list_for_defects')?>",
            "type": "POST",
            "data": function ( data ) {
                data.area = $('#area').val();
                data.cluster = $('#cluster').val();
                data.timeframe = $('#timeframe').val();
                data.defect_status = $('#defect_status').val();
                data.startdate = $('#datepickerfilter1').val();
                data.enddate = $('#datepickerfilter2').val();
            }
        },
        "lengthMenu": [[50, 100, 200, -1], [50, 100, 200, "All"]],
        //Set column definition initialisation properties.
        "columnDefs": [
        { 
            "targets": [ 0, 9 ], //first column / numbering column
            "orderable": false, //set not orderable
        },
        ],

    });

    $('#btn-filter').click(function(){ //button filter event click
        defect_view_var.ajax.reload();  //just reload table
    });
    $('#btn-reset').click(function(){ //button reset event click
        $('#form-filter')[0].reset();
        // document.getElementById('form-filter').reset();
        // defect_view_var.ajax.reload();  //just reload table
        window.location.reload();
    });

});
</script>
Run Code Online (Sandbox Code Playgroud)

代码点火器型号：

private function _get_datatables_query()
    {

        //add custom filter here
        // if($this->input->post('startdate') && $this->input->post('enddate'))
        // {
        //  $this->db->where("'FUPdate' BETWEEN 'startdate' AND 'enddate'");
        // }
        if($this->input->post('area'))
        {
            $this->db->like('area_name', $this->input->post('area'));
        }
        if($this->input->post('cluster'))
        {
            $clustersID['cluster']=$this->input->post('cluster');
            if(!empty($clustersID['cluster'])){
              // Array contains values, everything ok
              $clusterString = implode(',', $clustersID['cluster']);
            }
            foreach ($clustersID['cluster'] as $clusterStr) {
                $this->db->like('cluster_name', $clusterStr);
            }

        }
        if($this->input->post('timeframe'))
        {
            $this->db->like('timeframe_name', $this->input->post('timeframe'));
        }
        if($this->input->post('defect_status'))
        {
            $this->db->like('defect_status_name', $this->input->post('defect_status'));
        }
        if($this->input->post('startdate'))
        {
            $this->db->like('FUPdate', $this->input->post('startdate'));
        }
        if($this->input->post('enddate'))
        {
            $this->db->like('FUPdate', $this->input->post('enddate'));
        }

        $this->db->from($this->Property_Defect_View);
        $i = 0;

        foreach ($this->Property_Defect_search as $item) // loop column 
        {
            if($_POST['search']['value']) // if datatable send POST for search
            {

                if($i===0) // first loop
                {
                    $this->db->group_start(); // open bracket. query Where with OR clause better with bracket. because maybe can combine with other WHERE with AND.
                    $this->db->like($item, $_POST['search']['value']);
                }
                else
                {
                    $this->db->or_like($item, $_POST['search']['value']);
                }

                if(count($this->Property_Defect_search) - 1 == $i) //last loop
                    $this->db->group_end(); //close bracket
            }
            $i++;
        }

        if(isset($_POST['order'])) // here order processing
        {
            $this->db->order_by($this->Property_Defect_order[$_POST['order']['0']['column']], $_POST['order']['0']['dir']);
        } 
        else if(isset($this->order))
        {
            $order = $this->order;
            $this->db->order_by(key($order), $order[key($order)]);
        }
    }
Run Code Online (Sandbox Code Playgroud)

控制器：

public function DefectList()
    {   
        $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;
        $data['title'] = 'Defect List';

        $areas = $this->defects->get_list_areas();
        $clusters = $this->defects->get_list_clusters();
        $timeframes = $this->defects->get_list_timeframes();
        $defect_statuss = $this->defects->get_list_defect_statuss();

        $areaList = array('' => 'All Areas');
        foreach ($areas as $area) {
            $areaList[$area] = $area;
        }
        $data['form_area'] = form_dropdown('',$areaList,'','name="area" id="area" class="form-control select2"');

        $clusterList = array('' => 'All Clusters');
        foreach ($clusters as $cluster) {
            $clusterList[$cluster] = $cluster;
        }
        $data['form_cluster'] = form_dropdown('',$clusterList,'','name="cluster" id="cluster" class="form-control select2" multiple=""');

        $timeframeList = array('' => 'All Timeframes');
        foreach ($timeframes as $timeframe) {
            $timeframeList[$timeframe] = $timeframe;
        }
        $data['form_timeframe'] = form_dropdown('',$timeframeList,'','name="timeframe" id="timeframe" class="form-control select2"');

        $defect_statusList = array('' => 'All Status');
        foreach ($defect_statuss as $defect_status) {
            $defect_statusList[$defect_status] = $defect_status;
        }
        $data['form_defect_status'] = form_dropdown('',$defect_statusList,'','name="defect_status" id="defect_status" class="form-control select2"');


        $this->load->view('template/header', $data);
        $this->load->view('Property/defect_view', $data);
        $this->load->view('template/footer');
    }

    public function ajax_list_for_defects()
    {
        $list = $this->defects->get_datatables();
        $data = array();
        // $no = $_POST['start'];
        foreach ($list as $defects) {
            // $no++;

            $start= $defects->defect_start_date; 
            $start_date = str_replace('/', '-', $start); 
            $startdate=date('d/m/Y', strtotime($start_date)); 

            $follow= $defects->defect_followup_date; 
            $followup = str_replace('/', '-', $follow); 
            $followupdate=date('d/m/Y', strtotime($followup));

            $row = array();
            $row[] = $defects->defect_id;
            $row[] = $startdate;
            $row[] = $defects->defect_subject;
            $row[] = $defects->property_address_1;
            $row[] = $defects->cluster_name;
            $row[] = $defects->users;
            $row[] = $followupdate;
            $row[] = $defects->timeframe_name;
            $row[] = $defects->defect_status_name;
            $row[] = '<a href="'.base_url('property/defectDetails/'.$defects->defect_id).'" style="text-decoration: none;" class="btn btn-info btn-xs">View 
                    <!-- <i class="fa fa-eye" aria-hidden="true" title="View Defect" ></i> -->
                    </a>';

            $data[] = $row;
        }

        $output = array(
                        "draw" => $_POST['draw'],
                        "recordsTotal" => $this->defects->count_all(),
                        "recordsFiltered" => $this->defects->count_filtered(),
                        "data" => $data,
                );
        //output to json format
        echo json_encode($output);
    }
Run Code Online (Sandbox Code Playgroud)

我把我的整个代码放在这里，这样可以帮助其他人。

谢谢。

归档时间：

查看次数：

4656 次

最近记录：

7 年 前
具有多选下拉列表的数据表特定列过滤器 5
更多相关链接
相关归档
如何在Redux中显示执行异步操作的模式对话框？ 229
jquery:更改URL地址而不重定向？ 85
Angularjs:更新ng-model时选择不更新 63
如何发送HTML电子邮件 62
使用jQuery delay()和css() 51
如何显示在MVC 3 Razor中解码的编码HTML？ 34
JSF不呈现自定义HTML标记属性 27
CSS - 只有水平溢出？ 26
如何在JQuery中获取字符串的前三个字母？ 24
特定于页面的CSS规则 - 放置它们的位置？ 21
难疑归档
将字符串转换为datetime 2035
使用JavaScript/jQuery滚动到页面顶部？ 1511
从Git提交中删除文件 1484
类型检查:typeof,GetType还是？ 1435
.gitignore被Git忽略了 1407
如何使用自定义对象对NSMutableArray进行排序？ 1253
如何在正则表达式中使用变量？ 1250
哪个MySQL数据类型用于存储布尔值 1168
为特定提交生成git补丁 1144
使用node.js作为简单的Web服务器 1068