Individual column searching (select inputs) as Header + dom

Individual column searching (select inputs) as Header + dom

overheadoverhead Posts: 20Questions: 0Answers: 0

Hello,

Today I tried to install the individual column searching (select inputs). Unfortunately I get after the insertion of the script no more buttons for export and Rows displayed. I can no longer configure the dom. What am I doing wrong?

How can i config the Dom and the buttons and so on with individual column searching (select inputs)?

Replies

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    Its hard to say what the problem with your code is without an example.

    Here is an example:
    http://live.datatables.net/saqozowe/70/edit

    Kevin

  • overheadoverhead Posts: 20Questions: 0Answers: 0
    edited March 2019

    thx for the Code. dom and buttons und order and slec in Header is work. But the lengthMenu dont work. Also is not visible.

    My Code:

    $(document).ready(function() {
    // Hide the Footer
    $('#records tfoot th').hide();

    // Data Table
    var table = $('#records').DataTable( {
        dom: 'Btip',
        ordering: false,
        buttons: [
            'csv'
        ],
        lengthMenu: [ 
            [10, 25, 50, -1], 
            [10, 25, 50, "All"] 
        ],
        initComplete: function () {
            this.api().columns().every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.header()) )
                    .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>' )
                } );
            } );
        }
    } );
    

    } );

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    But the lengthMenu dont work. Also is not visible.

    Checkout this FAQ.

    Kevin

  • overheadoverhead Posts: 20Questions: 0Answers: 0

    Thx. it works.

    So now is the Problem. when i make a export then is the head from the table the complete Selectmenu. How can configuration the Export? i dont need the complete selectmenu.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Hi @overhead ,

    We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • overheadoverhead Posts: 20Questions: 0Answers: 0

    Thank for the note.
    But i dont have a test case because the datas get from a sql query.

    So a other people ask.
    It is possible that only displays that in the selectmenu, whatever it may be after e.g. a filter only in the table?

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited April 2019

    The test case would show how you have your selects setup so we can help resolve the problem. The test case can use mock data since the specific data in the table is not what we are troubleshooting. Maybe this example will help:
    http://live.datatables.net/saqozowe/70/edit

    Note that it uses two thead rows and orderCellsTop to designate the top row for Datatables to use for sorting, etc. The seconds header is not exported. Is this what you are looking for?

    Kevin

  • overheadoverhead Posts: 20Questions: 0Answers: 0

    Yeah the Option orderCellsTop its fine.

    But now to the Select Menu.
    If you in the example http://live.datatables.net/saqozowe/70/edit look for a name out of name then you have in the column position anyway all positions in it in the whole list. It would be nice if you then only had the results there which are only available in the already filtered list.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Hi @overhead ,

    This example here from an earlier thread does that.

    Cheers,

    Colin

  • overheadoverhead Posts: 20Questions: 0Answers: 0

    Thx, support is very nice.

    Now....
    My customer now has a new idea every day. Is this also possible to make a multiselect menu?

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    Here is an example using select2:
    http://live.datatables.net/jetupuda/1/edit

    Kevin

  • overheadoverhead Posts: 20Questions: 0Answers: 0

    thx.

    very complex the whole. Although Select2 is great, the example http://live.datatables.net/cusologu/7/edit still needs to be applied. Is this also available as a combo?

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    I don't have an example of them combined but they can be. The key with the select2 search is you need to combine the search terms with the | separator then use regex searching. And of course enable the select input to use select2.

    Kevin

  • overheadoverhead Posts: 20Questions: 0Answers: 0

    That's the problem ... it's too complex for me. Maybe someone else has a combo?

  • overheadoverhead Posts: 20Questions: 0Answers: 0

    I would be happy if someone can make the effort. Payment possible after successful work.

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

    You can apply for paid support here:
    https://datatables.net/support/index

  • overheadoverhead Posts: 20Questions: 0Answers: 0

    I need a programmer who writes me this thing shortly. So plz all PM me

  • overheadoverhead Posts: 20Questions: 0Answers: 0

    In the example http://live.datatables.net/cusologu/7/edit, the dropdown does not look for a full-text search directly. What would you have to change, because he only looks for A if I choose A and not everywhere where A is in it?

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    First you need to change the search to be a column search using column().search(). You have this which is causing the search to search the whole table not just the column with the drop down:

                    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);
                        });
    

    It should look like this:

                    var select = $('<select><option value=""></option></select>')
                        .appendTo($('thead tr:eq(1) td').eq(col))
                        .on('change', function() {
                            that.column(col).search($(this).val()).draw();
                            createDropdowns(api);
                        });
    

    Next you will need to implement regex searching and turn off the default "smart" mode search. You would change the column().search() to this:

    that.column(col).search('^' + $(this).val() + '$', true, false).draw();
    

    You can see this working by searching for Developer in the Position column. None of the Junior Developers will show. Without regex they will show.

    Here is the updated example:
    http://live.datatables.net/zevoliva/1/edit

    Kevin

This discussion has been closed.