Individual column searching (select inputs) as Header + dom

overhead

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)?

kthorngren

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

overhead

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

} );

kthorngren

But the lengthMenu dont work. Also is not visible.

Checkout this FAQ.

Kevin

overhead

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.

colin

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

overhead

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?

kthorngren

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

overhead

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.

colin

Hi @overhead ,

This example here from an earlier thread does that.

Cheers,

Colin

overhead

Thx, support is very nice.

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

kthorngren

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

Kevin

overhead

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?

kthorngren

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

overhead

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

overhead

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

tangerine

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

overhead

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

overhead

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?

kthorngren

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