Multi Filter Outside Table

Multi Filter Outside Table

elimariaaaelimariaaa Posts: 30Questions: 11Answers: 0
edited May 2017 in Free community support

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

Answers

  • elimariaaaelimariaaa Posts: 30Questions: 11Answers: 0

    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!

  • elimariaaaelimariaaa Posts: 30Questions: 11Answers: 0

    Please see the image attached.

This discussion has been closed.