Add Filtering in the Column Header

tseward

I would like to add Filtering in the table header of my datatable. In the table there is a finite list of Products, and a few other fields which have a small set of values.

See http://sharepointupdates.com/Patches.

What I would like to do is have a drop down (or autocomplete text filter, doesn't matter to me) under "Products" where someone could filter results by the Product. If someone searched for "2016", they may only be interested in "Project Server 2010" and not say, "SharePoint Server 2013". Or they may only be interested in "Hotfix" rather than "Cumulative Update".

glenderson

You want to make sure your dom option includes the "f" for filtering.

https://datatables.net/reference/option/dom

tseward

It already does "dom: 'Bfrtip'". It looks like 'f' maps to the search field, which I already have in place. I just want a drop down list within the field header.

glenderson

That sounds more like an autoComplete feature.

There is a plugin that handles all sorts of header filtering including autoCompletes. It might be of value for you solution.

http://yadcf-showcase.appspot.com/DOM_Ajax_Multiple_1.10.html

tseward

That's the right idea, although I'm unable to get it to perform the actual filtering. I'll admit, I'm likely working on this wrong. Note my DataTable has serverSide: true and based on the filter, I do need to return all results from the table, not simply the rows currently displayed. Column 1 is the "Product" column and the table name is simply 'table'.

var table = $('#buildlisttbl').DataTable({
...});

        yadcf.init(table, [
            {
                column_number: 1, filter_type: 'multi_select', filter_default_label: ""

            }
        ]);

        yadcf.exFilterColumn(table, [[1, ['SharePoint Server 2013', 'Project Server 2013']]], true);

jr42.gordon

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

Did you check out this?

tseward

That doesn't seem to be able to filter based on input, either. I get the "Processing" dialog, but the results do not change based on the input.

jr42.gordon

You mentioned a dropdown hence why I linked that example. They have another example

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

tseward

Yep, I've tried both. There seems to be some sort of issue with searching the columns specifically. Using the standard out of the box search box works just fine.

tseward

Ah I see what is going on, the column filter boxes are not passing a search value back to the controller, so of course no filtering would occur. Any idea on why the OOTB DataTables Search box is operating differently from the column search boxes?

daniel_r

For additional server side processing related to yadcf you can inspect the showcase page , look ath the code snippets / inspect dev tools network tab and see source code (java) on github showcase repo - sever side servlet

tseward

I do already have server side processing working, and the out of the box global search box works just fine with it -- but none of these solutions with the column based search do.

daniel_r

I guess you have some "ready made" server side code that you are using, and that code was not meant to do column filtering, if you'll look at your server code you should see reading the value of search[value] for the global search as in my yadcf servlet , but you have to add code that reads column filters values like in my code and do some logic based on it and return filtered list of rows from your server.

tseward

Yeah, I can read the column values, although with the yadcf solution, for some reason the custom function (based exactly on the example) isn't firing when the filter value changes for the column.

        function myCustomFilterFunction(filterVal, columnVal, data) {
            console.log('custom func');
            var found;
            if (columnVal === '') {

        yadcf.init(table, [
                {
                    column_number: 1,
                    filter_type: 'custom_func',
                    custom_func: 'myCustomFilterFunction',

Anyhow, once I can figure that out, I can get the filter values. I'm displaying my JS ignorance here :)

daniel_r

Thats because custom function is not relevant for server side mode (in which the entire filtering logic happens on your server and not front end (js)), see jsbin: http://jsbin.com/duguqasiwo/edit?html,js,output

The following setup will be enough

      column_number : 1,
      data: ['One', 'Three', 'etc']

tseward

That did the trick, daniel. Just wanted to thank everyone for their help, this will make the table much easier to use.