Select inputs for only one specific column

ishaksi

Hello fellow programmers,

I have a table with several columns and I want to achieve a filtering with a drop down list for a specific column(where the drop down list is dynamically built with all unique values in current table. How do I achieve this in the best possible way?

ishaksi

Okay, so far I've gotten here. The problem is that if I choose a option with "Hello" everything that has "Hello" in the value filters in the table. I want specific values to show up, not everything that cointains the value.

initComplete: function () {
                    var api = this.api();
                    api.columns([3]).indexes().flatten().each(function (i) {
                        var column = api.column(i);
                        var select = $('#selectinput')
                            .appendTo($("#selectinput"))
                            .on('change', function () {
                                var val = $.fn.dataTable.util.escapeRegex(
                                    $(this).val()
                                );

                                column
                                    .search(val ? '' + val + '' : '', true, false)
                                    .draw();
                            });

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

ishaksi

Solved it.

Solution for exact match:

```

var val = $(this).val();

                            column
                                .search("^" + val + "$", column, true, false)
                                .draw() ; 

ishaksi

Another problem:

I hardcode a empty select option the HTML-code. Otherwise it will choose the first in select input and only show those values. But when I choose a option and choose the empty option there is no data in the table because it searches for a empty string... How do I fix this?

ishaksi

Fixed:

    var searchString;
            if (this.value === '') {
                searchString = '';
            } else {
                searchString = "^" + this.value + "$";
            }
            table.columns(2)
                .search(searchString, true, false)
                .draw();