How to enable multi column filter for dataTables?

Question

I am new to dataTable customization, for multi-column search(through input text box) I referred to this: https://datatables.net/examples/api/multi_filter.html.

And copy pasted the Javascript mentioned over that link. Is that enough?

PS: also I included the files mentioned, is there any order needed of adding those files?

As I have many other jQuery files in my pages (for bootstrap and other functions), I have included all dataTables files.

<script src=" https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="<?php echo base_url() ?>plugins/jquery-datatable/jquery.dataTables.js"></script>
<script src="<?php echo base_url() ?>plugins/jquery-datatable/skin/bootstrap/js/dataTables.bootstrap.js"></script>
<script src="<?php echo base_url() ?>plugins/jquery-datatable/extensions/export/dataTables.buttons.min.js"></script>
<script src="<?php echo base_url() ?>plugins/jquery-datatable/extensions/export/buttons.flash.min.js"></script>
<script src="<?php echo base_url() ?>plugins/jquery-datatable/extensions/export/jszip.min.js"></script>
<script src="<?php echo base_url() ?>plugins/jquery-datatable/extensions/export/pdfmake.min.js"></script>
<script src="<?php echo base_url() ?>plugins/jquery-datatable/extensions/export/vfs_fonts.js"></script>
<script src="<?php echo base_url() ?>plugins/jquery-datatable/extensions/export/buttons.html5.min.js"></script>
<script src="<?php echo base_url() ?>plugins/jquery-datatable/extensions/export/buttons.print.min.js"></script>

Screenshot for reference

click here

Hi, welcome to stackoverflow. Please try to show what you have tried to do. You have not shown how you have tried to build the table and thus we cannot help. Read this for further guidance on posting questions stackoverflow.com/help/how-to-ask — Rashid 'Lee' Ibrahim
– Rashid 'Lee' Ibrahim, Commented Apr 10, 2018 at 19:30
I am using codeigniter I have passed the values to the vies using a query from controller — S. Shaker
– S. Shaker, Commented Apr 10, 2018 at 20:14

colin0117 · Accepted Answer · 2018-04-10 21:12:15Z

0

Without seeing your code, it's hard to say what's wrong. The example you gave is a good one, and here is another live enter link description here - the code is below. Hopefully those will get you going.

$(document).ready(function() {
  $('#example thead th').each( function () {
    var title = $(this).text();
    $(this).html( '<input type="text" placeholder='+title+' />' );
  } );

  var table = $('#example').DataTable({
    scrollX: true
  });

  table.columns().every( function () {
    var that = this;

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

} );

answered Apr 10, 2018 at 21:12

colin0117

1,5581 gold badge12 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to enable multi column filter for dataTables?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related