每列数据表选择框过滤器不起作用

Question

我检查了代码，控制台中没有任何错误但它没有显示表格页脚中的选择框如何解决这个问题请帮助我。提前感谢您收看我的问题。抱歉我的英语不好。

数据表代码：

$(document).ready(function() {
    $('#property').DataTable( {
        initComplete: function () {
            this.api().columns().every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );

                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );

                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        }
    } );
} );

Html代码：

<table  class="display table dataTable table-bordered table-striped" id="property" cellspacing="0" width="100%">
  <thead>
  <tr>
      <th style="font-style: uppercase;color:red;">ID</th>
      <th style="font-style: uppercase;color:red;">PROPERTY FOR</th>
      <th style="font-style: uppercase;color:red;">PROPERTY TYPE</th>
      <th style="font-style: uppercase;color:red;">BHK</th>
      <th style="font-style: uppercase;color:red;">RENT AMOUNT</th>
      <th style="font-style: uppercase;color:red;">SELL AMOUNT</th>
      <th style="font-style: uppercase;color:red;">LOCALITY</th>
      <th style="font-style: uppercase;color:red;">AREA</th>
      <th style="font-style: uppercase;color:red;">SOCITEY</th>
      <th style="font-style: uppercase;color:red;">OWNER TYPE</th>
      <th style="font-style: uppercase;color:red;">NAME</th>
      <th style="font-style: uppercase;color:red;">CONTACT</th>
      <th style="font-style: uppercase;color:red;">MONTH</th>
      <th style="font-style: uppercase;color:red;">ACTION</th>
  </tr>
  </thead>
  <tbody>
  <?php foreach($datas as $data):?>
    <tr class="gradeX">
        <td style="color:#000;font-size:15px"><?php echo $data['ID'];?></td>
        <td style="color:#000;font-size:15px"><?php if($data['Property_for'] == 1){echo 'Sell';}else{echo 'Rent';} ?></td>
        <td style="color:#000;font-size:15px"><?php echo $data['Property_name'];?></td>
        <td style="color:#000;font-size:15px"><?php echo $data['BHK'];?></td>
        <td style="color:#000;font-size:15px"><?php echo $data['Monthly_rent'];?></td>
        <td style="color:#000;font-size:15px"><?php echo $data['Sellprice'];?></td>
        <td style="color:#000;font-size:15px"><?php echo $data['Area'];?></td>
        <td style="color:#000;font-size:15px"><?php echo $data['Builtup'].' '.$data['Unit_name'];?></td>
        <td style="color:#000;font-size:15px"><?php echo $data['Socitey'];?></td>
        <td style="color:#000;font-size:15px"><?php echo $data['Owner_Type'];?></td>
        <td style="color:#000;font-size:15px"><?php echo $data['Owner_name'];?></td>
        <td style="color:#000;font-size:15px"><?php echo $data['Owner_Mobile'];?></td>
        <td style="color:#000;font-size:15px"><?php echo date("M", strtotime($data['Create_date']));?></td>
        <td><button type="button" class="btn btn-danger btn-xs" data-toggle="modal" id="<?php echo $data['ID']?>" onClick="deleteproperty(this.id)"><i class="icon-trash"></i></button><?php if($view == 'Close'):?><button type="button" class="btn btn-danger btn-xs" data-toggle="modal" id="<?php echo $data['ID']?>" onClick="openproperty(this.id)"><i class="icon-expand-alt"></i></button><?php else:?><button type="button" class="btn btn-danger btn-xs" data-toggle="modal" id="<?php echo $data['ID']?>" onClick="closeproperty(this.id)"><i class="icon-remove"></i></button><?php endif;?><a href="http://www.kakaproperty.com/View/Property/<?php echo $data['ID']?>"><button type="button" class="btn btn-danger btn-xs"><i class="icon-expand"></i></button></a></td>
    </tr>
  <?php endforeach;?>
  </tbody>
</table>

Answer 1

您需要在标记中添加tfoot元素。

请参阅this example以获取代码和演示。