Dropdown filter jquery datatables

Question

Here is my code:

$(document).ready(function() {
    /* Initialise the DataTable */
    var oTable = $('#example').dataTable({
        "oLanguage": {
            "sSearch": "Search all columns:"
        },
        "iDisplayLength": 10,
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "bFilter": true,
    }); 

    /* Add a select menu for each TH element in the table footer */
    $("thead th").each( function ( i ) {
        this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
        $('select', this).change( function () {
            oTable.fnFilter( $(this).val(), i );
        } );
    } );        
} );

Im using the jquery datatables plugin, its working perfectly just like this example:

http://www.datatables.net/release-datatables/examples/api/multi_filter_select.html

What i would like to do is rather than having a dropdown for each column i would like a dropdown only on one specific column.

So i presume i need to change:

$("thead th").each( function ( i ) {

But im not sure what to put. Any help would be much appreciated, thanks in advance.

I think using 'i' you can control which column you want to show into — Amritpal Singh
– Amritpal Singh, Commented Mar 8, 2012 at 11:22

HASNAT · Accepted Answer · 2020-05-14 20:46:56Z

26

You can also create your own select list and position it anywhere you like outside the table.

<select id="mySelect">
    <option value="">Select</option>
    <option value="1">1</option>
    ...
</select>

<script>
    $('#mySelect').on('change',function(){
        var selectedValue = $(this).val();
        oTable.fnFilter("^"+selectedValue+"$", 0, true); //Exact value, column, reg
    });
</script>

edited May 14, 2020 at 20:46

HASNAT

1332 silver badges18 bronze badges

answered Jul 17, 2013 at 15:48

crashtestxxx

1,4655 gold badges21 silver badges31 bronze badges

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

6 Comments

We0 Over a year ago

This in my opinion is the best answer and usage

zizoujab Over a year ago

this supposes that you already know the values of that column , sometimes it's not the case

Anas Naim Over a year ago

But if bStateSave set to true, you'll not get the selected value after refresh

Heena Over a year ago

var oTable = $('#example').DataTable(); $('#main_cat_select').on('change',function(){ var selectedValue = $(this).val(); oTable.column( 3 ) .search( selectedValue ) .draw(); });

Heena Over a year ago

3 is column number. @user9437856 you can use like that.

|

Nicola Peluchetti · Accepted Answer · 2012-03-08 11:28:45Z

12

If you need only on one column you could do

var indexOfMyCol = 2;//you want it on the third column
$("thead th").each( function ( i ) {
    if(i === indexOfMyCol){ 
      this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
      $('select', this).change( function () {
        oTable.fnFilter( $(this).val(), i );
      } );
    }
} );

answered Mar 8, 2012 at 11:28

Nicola Peluchetti

77k32 gold badges150 silver badges197 bronze badges

8 Comments

Codded Over a year ago

Thanks, so easy when you think about it :) Can i Give the dropdown a title? like.... Please select

Nicola Peluchetti Over a year ago

@Codded in fnCreateSelect replace var r='<select><option value=""></option>', with var r='<select><option value="">Please Select</option>',

Codded Over a year ago

Im not switched on today, could have worked that one out :) Thanks for the help

Codded Over a year ago

How about sorting the select into alphabetical order?

Nicola Peluchetti Over a year ago

@Codded on line 52 before return asResultData; you should aplly a sort to asResultData

|

pjammer · Accepted Answer · 2016-11-12 12:07:06Z

Maybe times have changed, but with no plugin and using dataTables 1.10.12and it's @api, as a person in the comments suggested, you can use the zero based index integer from an array for the corresponding table. Example code, important bits are on line 2 below. I'm searching just on the 4th column, and this is coffeescript but you get the idea.

    $('#example').DataTable initComplete: ->
                    @api().columns([3]).every ->
                            column = this
                            select = $('<select><option value="">Sort Column(All)</option></select>').appendTo($(column.header()).empty()).on('change', ->
                                    val = $.fn.dataTable.util.escapeRegex($(this).val())
                                    column.search(val ? '^'+val+'$' : '', true, false).draw()
                                    return
                            )
                            column.data().unique().sort().each (d, j) ->
                                    select.append '<option value="' + d + '">' + d + '</option>'
                                    return
                            return
                    return

Jovan MSFT · Accepted Answer · 2012-03-08 15:06:25Z

2

You can use date tables column filter see http://jquery-datatables-column-filter.googlecode.com/svn/trunk/customFilters.html

It is a second level plugin for datatables.

Jovan

answered Mar 8, 2012 at 15:06

Jovan MSFT

14.8k4 gold badges44 silver badges59 bronze badges

Comments

shanmugavel · Accepted Answer · 2012-07-19 16:01:06Z

2

You can use the columnfilter plugin...

$(document).ready(function(){
     $('#example').dataTable()
          .columnFilter({
            aoColumns: [ { type: "select", values: [ 'Gecko', 'Trident', 'KHTML', 'Misc', 'Presto', 'Webkit', 'Tasman']  },
                     { type: "text" },
                     null,
                     { type: "number" },
             { type: "select" }
                ]

        });
});

answered Jul 19, 2012 at 16:01

shanmugavel

1991 gold badge3 silver badges13 bronze badges

Comments

Zafar · Accepted Answer · 2016-02-20 22:46:37Z

2

I think something like following might do the trick

$("thead th").each( function ( i ) {
    if(i==1)
    {
        this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
        $('select', this).change( function () {
            oTable.fnFilter( $(this).val(), i );
        } ); 
    }
} );

edited Feb 20, 2016 at 22:46

Zafar

3,4444 gold badges31 silver badges45 bronze badges

answered Mar 8, 2012 at 11:25

Amritpal Singh

1,7851 gold badge13 silver badges20 bronze badges

1 Comment

Codded Over a year ago

Thank you, i have used the other answer but this would work aswel :)

AjithKumar · Accepted Answer · 2020-02-21 04:22:40Z

-1

<select id="dropdown1">
<option value="">Select</option>
<option value="London">London</option>
<option value="San Francisco">San Francisco</option>
</select>

$(document).ready(function() {
var table = $('#example').DataTable();
$('#dropdown1').on('change', function() {
table.columns(1).search(this.value).denter code hereraw();
});
});

answered Feb 21, 2020 at 4:22

AjithKumar

12 bronze badges

Collectives™ on Stack Overflow

Dropdown filter jquery datatables

7 Answers 7

6 Comments

8 Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

6 Comments

8 Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related