Toggle column filtering with responsive option

Toggle column filtering with responsive option

airmasterairmaster Posts: 72Questions: 15Answers: 2
edited October 2019 in Free community support

I didn't see any instructions on how to have responsible tables with the toggling of column filtering, so I thought I would post this. I wanted to be able to toggle the filters, since using the column filtering causes the # of columns displayed to be reduced and is less easy on the eyes.

The only downside of this is that the only searchable columns are displayed at the top, or suggest using column reordering plugin to move them around.

Let me now if there are ways to make this better.

Any idea if there is a way to keep the search row width no wider than the data that it is searching?

                    {
                        text: 'Filter',
                        action: function (e, dt, node, config) {
                            var table = $('#index').DataTable();
                            $('#index thead th').each(function (i) {
                                var title = $(this).attr('id');
                                var html = $(this).html();
                                var isInputBox = html.indexOf('<input') != -1;
                                if (isInputBox) {
                                    $(this).html(title);
                                }
                                else {
                                    $(this).html('<input type="text" placeholder="Search ' + title + '" />');
                                    $('input', this).on('keyup change', function () {
                                        if (table.column(i).search() !== this.value) {
                                            table
                                                .column(i)
                                                .search(this.value)
                                                .draw();
                                        }
                                    });

                                }
                            });
                            window.dispatchEvent(new Event('resize'));  // causes the responsive table to recalculate size
                        }
                    },
                    {
                        text: 'Clear Filters',
                        action: function () {
                            var table = $('#index').DataTable();
                            table.search("").draw();                            
                            table.columns().search('').draw();
                        }
                    },

Store the name of the column in the ID, so it can be toggled off and on.

    $(document).ready(function () {
        // Setup - insert title as ID for each column
        $('#winloss thead th').each(function (i) {
            var title = $(this).text();
            $(this).attr("id", title);

        }); 
    });
</script>

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,450Questions: 1Answers: 10,055 Site admin
    Answer ✓

    Nice solution - thanks for posting that!

    We are going to be publishing a new filtering extension for DataTables fairly soon (final things being ironed out) called SearchPanes which builds on a blog post of mind from a while back. It will have Responsive and Buttons integration as well.

    Regards,
    Allan

This discussion has been closed.