Dropdown in the bfrtip line

Dropdown in the bfrtip line

Andreas S.Andreas S. Posts: 208Questions: 74Answers: 4

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

Andreas

This question has accepted answers - jump to:

Answers

  • tangerinetangerine Posts: 3,365Questions: 39Answers: 395
    Answer ✓

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

  • allanallan Posts: 63,692Questions: 1Answers: 10,500 Site admin
    Answer ✓

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

    Allan

  • Andreas S.Andreas S. Posts: 208Questions: 74Answers: 4

    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

  • allanallan Posts: 63,692Questions: 1Answers: 10,500 Site admin

    Use column().search().

    Allan

  • Andreas S.Andreas S. Posts: 208Questions: 74Answers: 4

    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

  • allanallan Posts: 63,692Questions: 1Answers: 10,500 Site admin

    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.Andreas S. Posts: 208Questions: 74Answers: 4

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

  • Andreas S.Andreas S. Posts: 208Questions: 74Answers: 4

    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

  • allanallan Posts: 63,692Questions: 1Answers: 10,500 Site admin

    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.Andreas S. Posts: 208Questions: 74Answers: 4

    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.Andreas S. Posts: 208Questions: 74Answers: 4

    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

  • allanallan Posts: 63,692Questions: 1Answers: 10,500 Site admin

    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.Andreas S. Posts: 208Questions: 74Answers: 4

    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

This discussion has been closed.