Individual column searching (select inputs)

Agarad

Dear program developers!

My name is Ardanya and
I need your help in this program section:
Would you be so kind as to answer how to do that if you choose "London", in others <select><option value="" ></select> would be shown only data about "London", and not all datas?
One more example, in colomn "Age" chosen "22", and <select><option value="" ></option></select> in colomn "Office" shows not only Edinburgh and San Francisco,, but also all unique colomn values (Edinburgh, London, New York, San Francisco,, Singapore, Sydney, Tokyo).
Thank you and waiting for your kind reply,
Best regards,
Ardanya

colin

You could do something like this. Also, it would be worth looking at SearchPanes - particularly this example,

Colin

Agarad

Thank You! But... 12 = 112, 1120, 11200, ..... ?

tangerine

Your test case seems to be working correctly for me.

But... 12 = 112, 1120, 11200, ..... ?

I don't know what that means.

Agarad

Agarad

$.fn.dataTable.Api.register('column().searchable()', function() {
var ctx = this.context[0];
return ctx.aoColumns[this[0]].bSearchable;
});

function createDropdowns(api) {
api.columns().every(function() {
if (this.searchable()) {
var that = this;
var col = this.index();

        // Only create if not there or blank
        var selected = $('thead tr:eq(1) td:eq(' + col + ') select').val();
        if (selected === undefined || selected === '') {
            // Create the `select` element
            $('thead tr:eq(1) td')
                .eq(col)
                .empty();
            var select = $('<select><option value=""></option></select>')
                .appendTo($('thead tr:eq(1) td').eq(col))
                .on('change', function() {
                    that.search($(this).val()).draw();
                    createDropdowns(api);
                });

            api
                .cells(null, col, {
                    search: 'applied'
                })
                .data()
                .sort()
                .unique()
                .each(function(d) {
                    select.append($('<option>' + d + '</option>'));
                });
        }
    }
});

}
$(document).ready(function() {
$('#krepyozh').DataTable( {
"ordering": false,
"info": false,
// paging: false,
language: {
search: "Поиск",
lengthMenu: "Показывать по MENU строк",
paginate: {
first: "в конец",
previous: "<<",
next: ">>",
last: "<<"
},
},
fixedHeader: true,
orderCellsTop: true,
columnDefs: [
{
searchable: false,
targets: [1,4,5]
}
],
initComplete: function() {
createDropdowns(this.api());
}
} );
} );

colin

Please can you modify my test to reflect your problem,

Colin

Agarad

http://live.datatables.net/zeqimaju/1/edit

Agarad

"Age" = 61

Agarad

kthorngren

You can change the search to use regex like this example:
https://datatables.net/examples/api/multi_filter_select.html

Kevin

colin

On top of what Kevin said, just use regular expressions with search() - http://live.datatables.net/gezizabe/1/edit

Colin

Agarad

Kevin! Colin! Thank you very much! But now, if you remove the filter, everything disappears:

kthorngren

I updated the example to look more like the example I linked.
http://live.datatables.net/gezizabe/2/edit

The key is this statement modification:

that.search(val ? '^'+val+'$' : '', true, false).draw()

Kevin

Agarad

Kevin! Thank you very much!!!

It works as it should!