Dropdown in the bfrtip line

Andreas S.

Is it possible to put a select Box beside the search field?
If yes, how can I do this?

Andreas

tangerine

That's not provided within DataTables' "dom" options.
You could do it within your own HTML markup and your own CSS styling.

allan

Yes, you could create a custom plug-in for this, or use a technique like in this example.

Allan

Andreas S.

i have now my select in the line. My problem is now, if in the select is a column selected, then should the value in the search field inserted to columns[i][search][value]
for server side filtering. My problem is I did not know where should I write the function that do this?

Andreas

allan

Use column().search().

Allan

Andreas S.

I have now in the "initComplete" following code:

                $('#sCol').append('<label>column <select id="sSelect" class="form-control input-sm" name="seCol" aria-controls="usrlst">' +
                        '<option value=""></option><option value="3">ageGroup</option><option value="1">Full Name</option>' +
                        '<option value="7">Status</option></select></label>')
                        .on('change', function(){
                            console.log($('#sSelect').val());
                            ulist.column($('#sSelect').val()).search().draw;

                        });

But if I enter a Char in the global Search field they did not filter the row with this char.
I know I must send it to the Server that I get the filtered rows
They search var would not set to the to this post array in the [search][value]

            [3] => Array
                (
                    [data] => 
                    [name] => ag
                    [searchable] => true
                    [orderable] => false
                    [search] => Array
                        (
                            [value] => 
                            [regex] => false
                        )

                )

Where is my fault in my code? I think I have misinterpreted the manual.

Andreas

allan

You need to use the column() part to select the column to filter, and then the search() part to tell it what to search for. The column().search() documentation has details and examples of this.

Allan

Andreas S.

yes I understand, but my problem is how can I read the value that are written in the global search field?

Andreas S.

I think I have now read the search val, but I get an out of Stackspace error. I see, that the script run in a endless loop. I did not understand why this are doing.

In the "initComplete" I have now only the select inserted.

                $('#sCol').append('<label>column <select id="sSelect" class="form-control input-sm" name="seCol" aria-controls="usrlst">' +
                        '<option value=""></option><option value="3">ageGroup</option><option value="1">Full Name</option>' +
                        '<option value="7">Status</option></select></label>');

And outside I write this code

        ulist.on('search.dt', function(){
            var gSearch = ulist.search();
            console.log(gSearch);
            ulist.column($('#sSelect').val()).search(gSearch).draw;
        });

I did not understand why the last line create an endless loop?

Andreas

allan

Because draw() will trigger a search.

Why are you trying to put the global search value into a column search? I don't get that.

Allan

Andreas S.

I do that, because webpage looks overloaded if I make an extra search input field.
Did you have a good idea how could I do that in a better way?

Andreas

Andreas S.

I get this error too if I remove the draw. is it possible to send an additional request field if I type something in the global search field, so my server side script can filter the correct data? I hoped that to add the search string to the column search request field is easy.

Andreas

allan

I'm just not entirely clear on what it is that you are actually trying to do. If you want a column search input, can you not just show a column search input, or is it that which you are saying looks too busy?

Allan

Andreas S.

I have next to the global search field a select box, where the user, if he needs it, choose in which column he would like to search. If the default value is set in the select box, then it should search globally in the table. If, however, a column is specified, the entered value is to be searched in the search field only in the selected column. I have set Server Side, so I must send the column in which is to be searched. My consideration was that I do this in the post request. Eg column 3.

[3] => Array
    (
        [data] => 
        [name] => ag
        [searchable] => true
        [orderable] => false
        [search] => Array
            (
                [value] => same value as [search][value]
                [regex] => false
            )
 
    )
    [start] => 0
    [length] => 10
    [search] => Array
        (
            [value] => my string
            [regex] => false
        )

To use a search field in each column, as in your example, would not simplify the presentation of the table. I send you a pm with the link that you can see what I mean.

Andreas