Add a class to searchbuilder dropdown data

Add a class to searchbuilder dropdown data

ECEGROUPEECEGROUPE Posts: 77Questions: 28Answers: 1
edited April 2022 in SearchBuilder

Is it possible to add a class to the dropdown data used by searchbuilder ?

Case for exemple : https://datatables.net/extensions/searchbuilder/examples/initialisation/simple.html

In this exemple, when you inspect the searchbuilder

we have this code

<div class="dtsb-criteria">
   <select class="dtsb-data dtsb-dropDown">
      <option value="" disabled="" selected="" hidden="">Data</option>
      <option value="0" class="dtsb-option dtsb-notItalic">Name</option>
      <option value="1" class="dtsb-option dtsb-notItalic">Position</option>
      <option value="2" class="dtsb-option dtsb-notItalic">Office</option>
      <option value="3" class="dtsb-option dtsb-notItalic">Age</option>
      <option value="4" class="dtsb-option dtsb-notItalic">Start Date</option>
      <option value="5" class="dtsb-option dtsb-notItalic">Salary</option>
   </select>
</div>

What i want is add myclass

<option value="2" class="dtsb-option dtsb-notItalic myclass">Office</option>

Additional information : Why i want to do that ?

I want to add my class here to change the background color of specific option field. I know i can do it with css selector like this :
#example_wrapper > div.dtsb-searchBuilder > div.dtsb-group > div.dtsb-criteria > select.dtsb-data.dtsb-dropDown > option:nth-child(4) { background-color : red }

but i use multiple html pages / datatables but only one css, if i don't want to use multiple css for each datatables, i need something like this :

.myclass { background-color : red }

Thx for your help

Answers

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    Yes, you can use:

    DataTable.Criteria.classes.data = 'dtsb-data mnyClass';
    

    http://live.datatables.net/vixicoxo/1/edit

    Allan

  • ECEGROUPEECEGROUPE Posts: 77Questions: 28Answers: 1

    Thank alan,

    i have modified your exemple, this almost work -> http://live.datatables.net/lidutehe/1/edit

    what i want is the class to be apply to only ertain field option, for exemple only on the field name and office, is it possible ?

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    Do you mean you want a specific item in the dropdown list to have specific styling? Or to have styling when that option is selected?

    Allan

  • ECEGROUPEECEGROUPE Posts: 77Questions: 28Answers: 1
    edited April 2022

    This :

    Do you mean you want a specific item in the dropdown list to have specific styling?

    Exemple : http://live.datatables.net/lidutehe/4/

    This work BUT i want to do it with a class selector and not nth-child() because i have multiple tables and it's never the same columns / different order

Sign In or Register to comment.