テーブル外のマルチフィルタ

Question

私は自分のサイトのテーブルを作成するツールとしてdatatablesを使用しています。あなたはそれを実際に見ることができますhere。

すべてが期待どおりに機能していますが、マルチフィルタをテーブル外にしたいと思います。私は別のテーブルを作って一番上に置いてみました - 入力ボックスは表示されますが、動作しません。すべてのヘルプは高く評価されて

<script type="text/javascript"> 
// Setup - add a text input to each footer cell 
jQuery(document).ready(function($) { 
    $('#cq-datatables-<?php echo $datatable_id; ?> tfoot th').each(function() { 
     var title = $(this).text(); 
     $(this).html('<input type="text" placeholder="Search '+title+'" />'); 
    }); 
    var table = $('#cq-datatables-<?php echo $datatable_id; ?>').DataTable( 
    { 
     "processing": true, 
     "serverSide": true, 
     "responsive": true, 
     "ajax": { 
      "url": "<?php echo plugins_url(); ?>/cq-datatables/datatables/scripts/post.php", 
      "type": "POST", 
      "data": function(dtParms){ 
         dtParms.table_name = "<?php echo $retrieve_table_name; ?>"; 
         dtParms.column_names = '<?php echo $column_names; ?>'; 
         return dtParms; 
        } 
     }, 
     initComplete: function() { 
      var api = this.api(); 

      // Apply the search 
      api.columns().every(function() { 
      var that = this; 

      $('input', this.footer()).on('keyup change', function() { 
       if (that.search() !== this.value) { 
       that 
        .search(this.value) 
        .draw(); 
       } 
      }); 
      }); 
     }, 
     "columns": [<?php echo $test; ?>], 
     "columnDefs": [ 
      { 
       "targets": [ 0 ], 
       "visible": false 
      } 
     ], 
     "dom": '<"row"<"col-md-12"<"pull-right"B>l>><"custom-spacer"f>rtip', 
     "buttons": [ 
      'excelHtml5', 
      'csvHtml5', 
      'pdfHtml5', 
      'print', 
      'colvis' 
     ] 
    } 
    ); 
}); 
</script> 
    <table id="cq-datatables-<?php echo $datatable_id; ?>" class="display" cellspacing="0" width="100%"> 
     <thead> 
      <tr> 
       <?php 
        $table_counter = 0; 
        foreach ($cq_existing_columns as $table_columns) { 
         echo "<th>".ucwords(str_replace('_', ' ', $table_columns))."</th>"; 
        } 
       ?> 
      </tr> 
     </thead> 
     <tfoot> 
       <tr> 
        <?php 
         $table_counter = 0; 
         foreach ($cq_existing_columns as $table_columns) { 
          echo "<th>".ucwords(str_replace('_', ' ', $table_columns))."</th>"; 
         } 
        ?> 
       </tr> 
      </tfoot> 
    </table> 

：

は、ここに私の現在のコードです。ありがとう！

UPDATE：

はここでUIですが、期待通りの検索機能が動作していません。

イーライ

Answer 1

I am doing the same thing in this way. Hope it helps you. 

<input type="text" id="searchBox1" placeholder="Search Here.."></input> 
<input type="text" id="searchBox2" placeholder="Search Here.."></input> 
<input type="button" value="Search" id="searchButton" name="search"> 

$('#searchButton').on('click', function() { 
    table.draw(); 
}); 

And the data param of datatable ajax will be like this : 
'data' :function (d){ 
     d.search_term1 = $("#searchBox1").val(), 
     d.search_term2 = $("#searchBox2").val() 
}