Multi Filter Outside Table

elimariaaa

I'm using datatables as a tool in creating tables for my site. You can see it in action here.

Everything's working as expected but I'd like the multi filters to be outside the table. I tried making another table and place it on top - although the input boxes are shown, they don't work.

Here's my current code:

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

Any help is highly appreciated. Thanks!

Eli

elimariaaa

I am close to what I want to achieve. My only problem now is, my search fields are not working as expected.

This is where the input fields are:

$('.cq-search').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" class="cq-'+title+'" placeholder="'+title+'" />' );
    } );

This should show the filter results:

initComplete: function() {
          var api = this.api();

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

            $('.cq-search input').on('keyup change', function() {
              if (that.search() !== this.value) {
                that
                  .search(this.value)
                  .draw();
              }
            });
          });
        }

This is the HTML code:

<div class="cq-search-holder row">
        <h3>Search:</h3>
        <div class="col-md-12 col-sm-12 col-xs-12">
            <?php
                $cq_search_col_compare = 1;
                foreach ($cq_existing_columns as $cq_table_columns) {

                    if($cq_table_columns == 'id'){
                        echo "";
                    } else {
                        if ($cq_search_col_compare%3 == 1) {  
                            echo "<div class='col-md-12 search_space'>";
                        }
                        echo "<div class='col-md-4 col-xs-12 cq-search'>".ucwords(str_replace('_', ' ', $cq_table_columns))."</div>";
                        if($cq_search_col_compare%3 == 0) {
                            echo "</div>";
                        }
                        $cq_search_col_compare++;
                    }
                }
                if ($cq_search_col_compare%3 != 1) echo "</div>"; 
            ?>
        </div>
    </div>

Whenever I type something on any fields, my post.php is called more than once and even if the data I typed matches what I have in the database, it keeps on showing "No matching records found".

Please, please, any help is highly appreciated. Thanks!

elimariaaa

Please see the image attached.