Filter collumns on top

mgi

Hi,
I am strugling with placing filtering columns on top of tables, I managed to solve this with css :

tfoot {
display: table-header-group;
}

but when i have scrollX: true this does not work due to div wrapper

my code i am using GWT:

   private native void initJs(Element el, JavaScriptObject columns,
           DataTableEditor editor, String apiEndpoint, JsArray<DataTableCustomButton> customButtons, RelatedDataTableView detailsTable) /*-{
        // Setup - create table footer with text inputs for filtering
        $wnd.$(el).append('<tfoot></tfoot>');
        $wnd.$('tfoot', el).append('<tr></tr>');
        columns.forEach(function(col) {
            var th = $wnd.$('<th></th>');
            th.data({
                'searchable' : col.searchable,
                'title' : col.title,
                'type' : col.type,
                'isBoolean' : col.isBoolean
            });
            $wnd.$('tfoot tr', el).append(th);
        });
        $wnd
                .$('tfoot th', el)
                .each(
                        function(i) {
                            var e = $wnd.$(this);
                            var s = e.data()['searchable'];
                            var t = e.data()['title'];
                            var type = e.data()['type'];
                            var b = e.data()['isBoolean'];
                            if (s == null || s) {
                                if ((type == "select" && b == true)) {
                                    e.html('<select class="form-control input-sm">'
                                                + '<option value=""></option>'
                                                + '<option value="true">Yes</option>'
                                                + '<option value="false">No</option>'
                                                + '</select>');
                                } else {
                                    e.html('<input type="text" class="form-control input-sm" style="width: 100%;" placeholder="Filter ' + t + '"/>');
                                }
                            }
                        });

        var dom = "<'row'<'col-sm-2'l><'col-sm-10'B>>"
                + "<'row'<'col-sm-12'tr>>"
                + "<'row'<'col-sm-5'i><'col-sm-7'p>>";

        var buttons = [ 
                    {extend : 'create', editor : editor},
                    {extend : 'remove', editor : editor},
                    'selectAll', 'selectNone', 'colvis', 'colvisRestore'];

        // adding custom buttons to datatable
        customButtons.forEach(function(b) {
            buttons.push(b);
        });

        var dt = $wnd.$(el).DataTable({
            columns : columns,
            ajax : {
                type:"POST",
                url : apiEndpoint
            },
            dom : dom,
            processing : true,
            serverSide : true,
            scrollX : true,
            select : {
                style : 'os'
            },
            buttons : buttons,
        });
        
        // throttling for search requests
        var search = $wnd.$.fn.dataTable.util.throttle(function(col, val) {
            if (col.search() !== val) {
                col.search(val).draw();
            }
        }, 1000);

        // enable filter on individual text boxes in footer
        dt.columns().every(function() {
            var that = this;
            $wnd.$('input', this.footer()).on('keyup change', function() {
                search(that, this.value);
            });
            $wnd.$('select', this.footer()).on('change', function() {
                search(that, this.value);
            });
        });
}

I tried to replace tfoot with thead but then filtering columns disappeared.
Thanks

colin

Hi @mgi ,

Would this example here work for you? It's based on this example, but I just moved the input elements into the header.

Cheers,

Colin

mgi

Hi @colin thanks for reply,
but unfortunately that does not work for me, filters just disappear

colin

When you say 'disappear'. is that because they scroll off the screen? If so, you could keep this visible with the FixedHeader extension.

mgi

No it is not present in html at all

allan

Rather than using CSS to make the table footer a header, insert the search elements into a second row in the header, similar to what Colin has suggested.

If they are just disappearing for you, can you link to a test page showing the issue so we can help please.

Allan

mgi

thanks for response @allan , but unfortunately since it is GWT application I am not able to post test page, but I managed to solve this with jQuery like this:

$wnd.$(".dataTables_scrollFoot").detach().insertBefore($wnd.$('.dataTables_scrollHead'));