Need Custom Search Outside Datatable Wrapper - Only for selected columns

just10minutes

Hi,

First of thank you for this wonderful plugin.

I am using this library along with django framework. Using server side processing.

Attached is the result i would like to achieve.

I want a custom search panel to be populated for particular columns.
currently looking for two types of filter
1. Normal Text search
2. Drop Down (Little tricky as this has to show all available values, i do not want to hard code the values)

Do we have any example to achieve this? or any guidance will be very helpful

kthorngren

These examples might help you get started.

https://datatables.net/examples/api/multi_filter.html
https://datatables.net/examples/api/multi_filter_select.html

Since you aren't putting these in the footer or header you will need to use the column() api with a column selector.

Please post any questions.

Kevin

just10minutes

@kthorngren Thank you for your input.

I have applied both the examples before on my table both works fine as long they are for all columns and placed either on header or footer.

Let me admit I am a beginner in Jquery.

Below is what I have which will put dropdown for all columns in footer, how can I convert this into for single column lets say "age" and put inside a id="Age_filter" on my html?

Any help is much appreciated

        initComplete: function () {
           this.api().columns().every( function () {
                 var column = this;
                 var select = $('<select><option value=""></option></select>')
                     .appendTo( $(column.footer()).empty() )
                     .on( 'change', function () {
                         var val = $.fn.dataTable.util.escapeRegex(
                             $(this).val()
                         );

                         column.search( this.value ).draw();
                     } );

                 column.data().unique().sort().each( function ( d, j ) {
                     select.append( '<option value="'+d+'">'+d+'</option>' )
                 } );
             } );
           },

kthorngren

See if this example helps:
http://live.datatables.net/voseluna/1/edit

It shows both a text input column search and a drop down (based on the above example) column search.

Kevin

just10minutes

@kthorngren Thanks a lot, Now i understand how this can be applied in my case.

I didn't observe one thing earlier. i observed now when i applied this. my use case is server side data retrieval.

The drop down does not bring all possible values from server. It just has the values which is shown on the table at presentation layer.

For eg:
Available Office : 12 unique values
Presentation layer shows only 4 unique office location in the first 10 results.

So the drop down will have only 4 values instead of 12.

Do you think this can be achieved?

I am accepting your answer for my initial question.

Thanks

kthorngren

As you mentioned, server side does not work well with the example drop down search as it pulls data from the client side data.

Probably what I would do is create an ajax request to get the desired data before initializing DT. Store that in a variable. Then change the loop that builds the options from the column data to build from the ajax response variable.

Kevin

just10minutes

Thank you Kevin.

I will look into this option.

Thanks a lot for all your help.

one last thing

var column = this.api().column(2);

What selector I should use to avoid index and put actual column name?

Something like below, was going through this but didn't quite get proper answer https://datatables.net/reference/type/column-selector

var column = this.api().column('office');

kthorngren

You can define columns.name and use that as the column selector, like this example:

https://datatables.net/reference/type/column-selector#{string}:name

Kevin

just10minutes

@kthorngren Thank you for your input.

I am stuck at the point where i want two columns as drop down.

I tried repeating the same code twice for eg: Office and position. But only the second option works. I think It should be handled separately , can i get some hint on this?

I tried writing my code in this way

this.api().columns([1,2]).every( function () {
#Here i am not getting how to pass the id of the html template, 
as it differs per column.
}

Thanks,

kthorngren

Yes, I see. It seems the column variable is within the scope of all the search events, so the last one assigned is used for all columns. Not sure why though.

I updated the example to include the use of data attributes to track the column id. There might be better alternatives but this seems to work.

Kevin

just10minutes

Thank you for this updated answer, you have been very helpful.

Thank you very much