How to assign an id or class to length select menu?

countesscat

I would like to use select2 with DataTables and all select-option menus to look better. How do I assign an id or a class to length menu? I tried selecting it with name attribute with jquery but that did not work, so I thought assigning it a custom class or id should. Any ideas?

colin

Hi @countesscat ,

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

countesscat

Hello, colin! Thanks for your reply. Unfortunately the example is not publicly accessible. I created an example table and a select with 3 example options to demonstrate what I want to do to the per page length select option but I need to set an id or a class for it. How do I do that?

allan

You shouldn't need to assign an id to it - use $('div.dataTables_length select') as the selector for the Select2 initialisation.

Allan

colin

Oh, yeah, that was easy http://live.datatables.net/cerukogo/1/edit

countesscat

Great! Thanks! I will now try to apply to my instance.

countesscat

Somehow it is not working on my instance. I tried even $( "select[name*='length']" ).select2();, I tried with your suggestion without div, tried with the div's class, the div's id... Same thing. Jquery can't select it. Funny thing is that it selects other elements on page and turns them into nice selects with select 2 but only not the DataTables lenght select option filter. So question still is - how to assign an id to length filter select element or... Why is it not working on my instance but working on the example? Eh..

countesscat

~~Also, appears that to hide the search I need to apply data-minimum-results-for-search="Infinity" to the select element. How do I do that with DataTables?~~

Alternative: select2({minimumResultsForSearch: Infinity});

colin

Hi @countesscat ,

The only thing I can think of is if you're trying to select the menu before the table is drawn/created/initialised. Are you able to link to your page, and we can take a look.

For hiding the search, you can either use dom or $('div.dataTables_filter').hide(),

Cheers,

Colin

countesscat

I can't do that publicly because the project is not finished, yet, and I could send you a test username/pass over a PM, so you could see. Please let me know, if interested.

countesscat

I meant to hide the search for select2. But I solved it. Maybe I am really trying to select the element before the table is drawn but there is $(document).ready(function() and for example the footer filters are selected properly, but not this length filter.

colin

It sounds like all working, excellent.